WRAPPER, not on the control. Bordering them drew
a second box around every field. Only the control itself is styled, and the
wrappers are explicitly reset. */
body.checkout-wc p.form-row,
body.checkout-wc .cfw-text-input,
body.checkout-wc .cfw-tel-input,
body.checkout-wc .cfw-select-input,
body.checkout-wc .cfw-country-input,
body.checkout-wc .cfw-state-input,
body.checkout-wc .cfw-input-wrap {
border: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
body.checkout-wc .cfw-input-wrap input,
body.checkout-wc input[type="text"],
body.checkout-wc input[type="email"],
body.checkout-wc input[type="tel"],
body.checkout-wc input[type="password"],
body.checkout-wc select,
body.checkout-wc textarea {
font-family: var(--lp-body) !important;
font-size: .92rem !important;
border: 1.5px solid var(--lp-line) !important;
border-radius: 8px !important;
color: var(--lp-ink) !important;
}
body.checkout-wc .cfw-input-wrap input:focus,
body.checkout-wc input:focus,
body.checkout-wc select:focus,
body.checkout-wc textarea:focus {
border-color: var(--lp-blue) !important;
box-shadow: 0 0 0 3px rgba(0,86,139,.14) !important;
outline: none !important;
}
body.checkout-wc label,
body.checkout-wc .cfw-floatable-label {
font-family: var(--lp-head) !important; font-weight: 600 !important;
color: var(--lp-ink-soft) !important;
}
/* buttons */
body.checkout-wc .cfw-primary-btn,
body.checkout-wc button[type="submit"],
body.checkout-wc #place_order {
background: var(--lp-blue) !important;
color: #fff !important;
font-family: var(--lp-head) !important;
font-weight: 700 !important;
font-size: .95rem !important;
border: 0 !important;
border-radius: 10px !important;
padding: 15px 26px !important;
transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
body.checkout-wc .cfw-primary-btn:hover,
body.checkout-wc button[type="submit"]:hover,
body.checkout-wc #place_order:hover {
background: var(--lp-blue-dk) !important;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,86,139,.3);
}
body.checkout-wc .cfw-secondary-btn,
body.checkout-wc .cfw-prev-tab,
body.checkout-wc a.cfw-tab-link {
color: var(--lp-blue) !important;
font-family: var(--lp-head) !important; font-weight: 600 !important;
}
/* payment / shipping method rows — the card-style radios from the mockup */
/* NOTE: .cfw-shipping-method is also used on the step-bar
, so the
card treatment is scoped to the shipping list only. */
body.checkout-wc .cfw-radio-reveal-li,
body.checkout-wc .cfw-shipping-methods-list .cfw-shipping-method {
border: 1.5px solid var(--lp-line) !important;
border-radius: 12px !important;
margin-bottom: 12px !important;
overflow: hidden;
transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
body.checkout-wc .cfw-radio-reveal-li:has(input:checked),
body.checkout-wc .cfw-shipping-methods-list .cfw-shipping-method:has(input:checked),
body.checkout-wc .cfw-radio-reveal-li.cfw-active {
border-color: var(--lp-blue) !important;
box-shadow: 0 0 0 3px rgba(0,86,139,.11);
background: #fbfdff;
}
body.checkout-wc .cfw-radio-reveal-title {
font-family: var(--lp-head) !important; font-weight: 700 !important;
color: var(--lp-navy) !important; font-size: .96rem !important;
}
/* ---- payment method rows ----
The gateway markup is: title-wrap (radio + label + icon) followed by a
.payment_box reveal. Neither carries padding of its own, which is why the
rows read cramped and inconsistent next to the rest of the checkout. */
body.checkout-wc .cfw-radio-reveal-title-wrap,
body.checkout-wc .payment_method_title_wrap {
display: flex !important; align-items: center; gap: 12px;
padding: 15px 18px !important; margin: 0 !important; cursor: pointer;
}
body.checkout-wc .payment_method_title_wrap > label { margin: 0 !important; padding: 0 !important; flex: 1; cursor: pointer; }
body.checkout-wc .payment_method_title_wrap > label > div { display: flex !important; align-items: center; gap: 10px; width: 100%; }
body.checkout-wc .payment_method_title_wrap input.input-radio { margin: 0 !important; flex: 0 0 18px; accent-color: var(--lp-blue); }
body.checkout-wc .payment_method_title { flex: 1; }
body.checkout-wc .payment_method_icons { margin-left: auto; display: flex; align-items: center; gap: 6px; }
body.checkout-wc .payment_method_icons img,
body.checkout-wc .cfw-radio-reveal-title-wrap img {
max-height: 26px !important; width: auto !important; border-radius: 6px; display: block;
}
/* revealed instructions */
body.checkout-wc .payment_box {
background: #f7f9fc !important;
border: 0 !important; border-top: 1px solid var(--lp-line) !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 16px 18px !important;
font-family: var(--lp-body) !important;
font-size: .87rem !important; line-height: 1.65 !important;
color: var(--lp-ink-soft) !important;
}
body.checkout-wc .payment_box::before,
body.checkout-wc .payment_box::after { display: none !important; }
body.checkout-wc .payment_box fieldset { border: 0 !important; margin: 0 !important; padding: 0 !important; }
body.checkout-wc .payment_box p { margin: 0 0 .8em !important; font-size: .87rem !important; }
body.checkout-wc .payment_box p:last-of-type { margin-bottom: 0 !important; }
body.checkout-wc .payment_box strong { color: var(--lp-navy); font-weight: 700; }
body.checkout-wc .payment_box a { color: var(--lp-blue); font-weight: 600; }
/* the Cash App button + QR sit in one ; give them a proper row */
body.checkout-wc .payment_box p.wc-cashapp {
display: flex !important; align-items: center; justify-content: center;
gap: 22px; flex-wrap: wrap;
background: #fff; border: 1px solid var(--lp-line); border-radius: 10px;
padding: 16px !important; margin: 0 0 .9em !important;
}
body.checkout-wc .payment_box p.wc-cashapp a { display: inline-flex; align-items: center; }
body.checkout-wc .payment_box p.wc-cashapp img { max-height: 92px !important; width: auto !important; border-radius: 8px; }
/* order summary */
body.checkout-wc .cfw-cart-item-title {
font-family: var(--lp-head) !important; font-weight: 700 !important;
color: var(--lp-navy) !important; font-size: .88rem !important;
}
body.checkout-wc .cfw-cart-item-description { color: var(--lp-muted) !important; font-size: .78rem !important; }
/* The thumbnail is a
inside a
; bordering both produced a double
box. Only the inner wrap is the image well. */
body.checkout-wc td.cfw-cart-item-image {
border: 0 !important; background: none !important;
width: 74px; padding: 12px 0 !important; vertical-align: top;
}
body.checkout-wc .cfw-cart-item-image-wrap {
position: relative;
width: 56px !important; min-width: 56px; max-width: 56px;
height: 56px !important; flex: 0 0 56px; box-sizing: border-box;
border: 1px solid var(--lp-line); border-radius: 10px;
background: linear-gradient(170deg, #f4f7fc, #fff);
display: flex; align-items: center; justify-content: center;
overflow: visible;
}
body.checkout-wc .cfw-cart-item-image-wrap img {
width: 100%; height: 100%; object-fit: contain; padding: 5px; border-radius: 9px;
border: 0 !important; background: none !important; box-shadow: none !important;
}
body.checkout-wc .cfw-cart-item-quantity-bubble {
position: absolute; top: -7px; right: -7px;
width: 20px; height: 20px; min-width: 0; border-radius: 50%;
background: var(--lp-navy) !important; color: #fff !important;
font-family: var(--lp-head); font-weight: 700; font-size: .66rem;
display: grid !important; place-items: center; line-height: 1;
}
body.checkout-wc .cfw-cart-item-description { padding-left: 4px; }
body.checkout-wc tr.cart-item-row td { border: 0 !important; padding-block: 12px !important; vertical-align: middle; }
body.checkout-wc tr.cart-item-row + tr.cart-item-row { border-top: 1px solid var(--lp-line) !important; }
body.checkout-wc .cfw-cart-item-subtotal {
font-family: var(--lp-head) !important; font-weight: 700 !important; color: var(--lp-navy) !important;
}
body.checkout-wc .cfw-totals-list .order-total,
body.checkout-wc .cfw-totals-list .order-total .amount,
body.checkout-wc .order-total .amount {
font-family: var(--lp-head) !important; font-weight: 700 !important;
color: var(--lp-blue) !important;
}
body.checkout-wc .cfw-totals-list .order-total .amount { font-size: 1.45rem !important; }
/* separate collapse leaves gaps between cells, which chopped the divider
above Total into two pieces */
body.checkout-wc .cfw-totals-list table,
body.checkout-wc table.cfw-cart-table { border-collapse: collapse !important; border-spacing: 0 !important; }
body.checkout-wc .cfw-totals-list table,
body.checkout-wc .cfw-totals-list tr,
body.checkout-wc .cfw-totals-list td,
body.checkout-wc .cfw-totals-list th { border: 0 !important; }
body.checkout-wc .cfw-totals-list tr td,
body.checkout-wc .cfw-totals-list tr th {
padding: 9px 0 !important; font-size: .9rem; vertical-align: middle !important;
}
/* Put the rule on the ROW, not the cells — per-cell borders sat at different
heights and rendered as two offset segments. */
body.checkout-wc .cfw-totals-list tr.order-total {
border-top: 1px solid var(--lp-line) !important;
}
body.checkout-wc .cfw-totals-list tr.order-total td,
body.checkout-wc .cfw-totals-list tr.order-total th {
border: 0 !important; padding-top: 15px !important;
}
/* free shipping reads as a positive, like the mockup */
body.checkout-wc .cfw-totals-list .free-shipping,
body.checkout-wc .woocommerce-shipping-totals .amount { color: var(--lp-navy); }
/* trust strip injected under the logo by lumen-design.js */
body.checkout-wc .lp-trust { border-radius: 0; margin-bottom: 22px; }
/* RUO note in the checkout footer */
body.checkout-wc .cfw-footer-inner {
font-family: var(--lp-body); font-size: .78rem; color: var(--lp-muted);
}
@media (max-width: 620px) {
body.checkout-wc ul.etabs { gap: 6px 12px; font-size: .72rem; padding: 11px 12px; }
body.checkout-wc ul.etabs li.tab, body.checkout-wc ul.etabs li { font-size: .72rem; }
body.checkout-wc .cfw-panel { padding: 18px; }
}
/* =====================================================================
Cart & checkout — same tokens as the rest of the site
===================================================================== */
/* Page-content headings only. Without the :not() these also matched the
white heading inside .lp-page-hero and, sitting later in the file at equal
specificity, turned "Your Cart" heading-blue. */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart :is(h1, h2, h3):not(.lp-page-hero *),
.woocommerce-checkout :is(h1, h2, h3):not(.lp-page-hero *) {
font-family: var(--lp-head); color: var(--lp-heading); letter-spacing: -.02em;
}
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
background: #fff; border: 1px solid var(--lp-line);
border-radius: var(--lp-radius); padding: 22px;
}
.woocommerce-cart .checkout-button,
.woocommerce-checkout #place_order,
.woocommerce-cart .button,
.woocommerce-checkout .button {
font-family: var(--lp-head) !important; font-weight: 700 !important;
border-radius: 8px !important; background: var(--lp-blue) !important;
color: #fff !important; border: 0 !important;
}
.woocommerce-cart .checkout-button:hover,
.woocommerce-checkout #place_order:hover { background: var(--lp-blue-dk) !important; }
.woocommerce-cart .order-total .amount,
.woocommerce-checkout .order-total .amount {
font-family: var(--lp-head); font-weight: 700; color: var(--lp-blue);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
border: 1.5px solid var(--lp-line); border-radius: 8px; padding: 11px 13px;
font-family: var(--lp-body); font-size: .9rem; outline: none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
border-color: var(--lp-blue); box-shadow: 0 0 0 3px rgba(0,86,139,.14);
}
.woocommerce form .form-row label { font-family: var(--lp-head); font-weight: 600; font-size: .84rem; color: var(--lp-navy); }
.woocommerce-info, .woocommerce-message {
border-top-color: var(--lp-blue) !important;
border-radius: 8px;
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--lp-blue) !important; }
/* =====================================================================
Polish pass — button rhythm, box padding, mobile density
===================================================================== */
/* Action rows: even gaps, and never leave a lone ragged button.
Below 620px every action button goes full width so the left and
right edges line up with the cards above them. */
.lp-hero-actions,
.lp-cta-actions { gap: 14px; }
/* NOTE: `.lp-page p` (0,1,1) outranks a bare `.lp-center` (0,1,0) and was
zeroing this margin, so the button sat flush against the boxes above.
Scoping under .lp-page (0,2,0) wins the cascade. */
.lp-page .lp-center { margin-top: 44px; margin-bottom: 0; }
.lp-page .lp-center .lp-btn + .lp-btn { margin-left: 12px; }
/* Give the reference CTA room before the pillars below it. */
.lp-ref-copy > .lp-btn { margin-top: 4px; }
.lp-pillars { margin-top: 38px; }
/* Cards: keep the button pinned to the bottom edge on every card in a
row, regardless of title length. */
.lp-card-body { gap: 0; }
.lp-card-body h3 { min-height: 2.6em; }
.lp-info-card > :last-child { margin-bottom: 0; }
.lp-article > :last-child { margin-bottom: 0; }
@media (max-width: 900px) {
.lp-hero-inner { gap: 36px; }
.lp-ref-grid { gap: 28px; }
.lp-ref-visual { order: -1; }
}
@media (max-width: 620px) {
/* Stack every action pair, full-bleed within the container. */
.lp-hero-actions,
.lp-cta-actions { flex-direction: column; align-items: stretch; gap: 12px; }
.lp-hero-actions .lp-btn,
.lp-cta-actions .lp-btn,
.lp-page .lp-center .lp-btn { width: 100%; }
.lp-page .lp-center .lp-btn + .lp-btn { margin-left: 0; margin-top: 12px; }
/* Tighten the vertical rhythm so the page isn't endless on a phone. */
.lp-section { padding-block: 46px; }
.lp-value,
.lp-reference { padding-block: 42px; }
.lp-cta { padding-block: 46px; }
.lp-page-hero { padding-block: 38px; }
.lp-head { margin-bottom: 28px; }
.lp-page .lp-center { margin-top: 34px; }
.lp-hero-inner { padding-block: 44px; gap: 30px; }
.lp-hero-lead { font-size: 1rem; margin-bottom: 1.7em; }
.lp-hero-note { margin-top: 20px; }
.lp-process-title { margin-bottom: 28px; }
.lp-pillars { margin-top: 30px; }
/* Box padding scaled for narrow screens. */
.lp-value-card { padding: 28px 22px; }
.lp-info-card { padding: 24px 20px; }
.lp-article { padding: 22px 20px; }
.lp-step { padding: 24px 20px; }
.lp-mini { padding: 12px 14px; font-size: .84rem; }
/* Accordion sized for thumbs. */
.lp-acc-trigger { padding: 16px 18px; font-size: .95rem; gap: 12px; }
.lp-acc-panel p { padding: 16px 18px 18px; font-size: .9rem; }
/* Spec grid: "Lyophilized" must not wrap in a third of a small card. */
.lp-spec dd { font-size: .72rem; }
.lp-spec dt { font-size: .58rem; letter-spacing: .08em; }
/* Trust strip: three wrapped lines is too much chrome on a phone. */
.lp-trust .lp-wrap { padding-block: 9px; gap: 6px 16px; font-size: .7rem; }
.lp-header-actions .lp-label { display: none; }
.lp-header-actions { gap: 14px; }
.lp-search input[type="search"] { font-size: .85rem; padding: 11px 14px 11px 40px; }
.lp-search-ico { left: 14px; }
.lp-search button { position: static; margin-left: 8px; padding: 11px 16px; flex-shrink: 0; }
.lp-trust svg { width: 13px; height: 13px; }
}
@media (max-width: 400px) {
.lp-trust .lp-wrap { font-size: .66rem; gap: 5px 12px; }
.lp-card-body { padding: 4px 14px 16px; }
.lp-card-body h3 { font-size: .92rem; }
}
/* ---- Apple Pay panel (injected by lumen-design.js) ---- */
body.checkout-wc .lp-ap {
background: #fff; border: 1px solid var(--lp-line); border-radius: 10px;
padding: 14px 16px; margin: 0 0 14px;
}
body.checkout-wc .lp-ap-amount {
margin: 0 0 12px !important;
font-family: var(--lp-body); font-size: .92rem !important; color: var(--lp-ink) !important;
}
body.checkout-wc .lp-ap-amount strong { color: var(--lp-blue); font-family: var(--lp-head); font-weight: 700; }
body.checkout-wc .lp-ap-row {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
background: #f6f8fb; border: 1px solid var(--lp-line); border-radius: 9px; padding: 10px 12px;
}
body.checkout-wc .lp-ap-lbl {
font-family: var(--lp-head); font-weight: 700; font-size: .68rem;
letter-spacing: .09em; text-transform: uppercase; color: var(--lp-muted);
}
body.checkout-wc .lp-ap-val {
flex: 1; min-width: 130px;
font-family: var(--lp-head); font-weight: 700; font-size: .98rem; color: var(--lp-navy);
}
body.checkout-wc .lp-ap-btn {
flex-shrink: 0; cursor: pointer;
border: 1px solid var(--lp-line); background: #fff; color: var(--lp-blue);
border-radius: 8px; padding: 9px 14px;
font-family: var(--lp-head); font-weight: 700; font-size: .78rem;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.checkout-wc .lp-ap-btn:hover { background: var(--lp-pale); }
body.checkout-wc .lp-ap-btn-primary { background: var(--lp-blue); color: #fff; border-color: var(--lp-blue); }
body.checkout-wc .lp-ap-btn-primary:hover { background: var(--lp-blue-dk); border-color: var(--lp-blue-dk); color: #fff; }
body.checkout-wc .lp-ap-btn.is-ok {
background: #e6f7ef !important; color: #1a9c62 !important; border-color: #bfe8d3 !important;
}
@media (max-width: 520px) {
body.checkout-wc .lp-ap-row { gap: 8px; }
body.checkout-wc .lp-ap-val { flex-basis: 100%; }
body.checkout-wc .lp-ap-btn { flex: 1; }
}
/* =====================================================================
Slide-out cart drawer
===================================================================== */
.lp-drawer { position: fixed; inset: 0; z-index: 9999; }
/* clear the WordPress admin bar for logged-in staff */
body.admin-bar .lp-drawer { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .lp-drawer { top: 46px; } }
.lp-drawer[hidden] { display: none; }
body.lp-drawer-locked { overflow: hidden; }
.lp-drawer-overlay {
position: absolute; inset: 0; background: rgba(13, 24, 38, .55);
opacity: 0; transition: opacity .26s ease;
}
.lp-drawer.is-open .lp-drawer-overlay { opacity: 1; }
.lp-drawer-panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(420px, 100%);
background: #fff; display: flex; flex-direction: column;
box-shadow: -18px 0 46px rgba(13, 24, 38, .22);
transform: translateX(100%); transition: transform .26s ease;
font-family: var(--lp-body);
}
.lp-drawer.is-open .lp-drawer-panel { transform: translateX(0); }
.lp-drawer-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 18px 20px; border-bottom: 1px solid var(--lp-line); flex-shrink: 0;
}
.lp-drawer-head h2 {
margin: 0; font-family: var(--lp-head); font-weight: 700;
font-size: 1.12rem; color: var(--lp-navy); letter-spacing: -.02em;
}
.lp-drawer-x {
border: 1px solid var(--lp-line); background: #fff; color: var(--lp-navy);
width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
display: grid; place-items: center; transition: background .15s ease;
}
.lp-drawer-x:hover { background: var(--lp-bg-alt); }
.lp-drawer-body { flex: 1; overflow-y: auto; padding: 6px 20px; transition: opacity .15s ease; }
.lp-drawer-body.is-busy { opacity: .5; pointer-events: none; }
.lp-drawer-items { list-style: none; margin: 0; padding: 0; }
.lp-drawer-item {
display: flex; gap: 13px; align-items: flex-start;
padding: 16px 0; border-bottom: 1px solid var(--lp-line);
}
.lp-drawer-item:last-child { border-bottom: 0; }
.lp-drawer-thumb {
flex: 0 0 60px; width: 60px; height: 60px; border-radius: 10px;
border: 1px solid var(--lp-line);
background: linear-gradient(170deg, #f4f7fc, #fff);
display: grid; place-items: center; overflow: hidden;
}
.lp-drawer-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.lp-drawer-info { flex: 1; min-width: 0; }
.lp-drawer-name {
font-family: var(--lp-head); font-weight: 700; font-size: .89rem;
color: var(--lp-navy); text-decoration: none; line-height: 1.35; display: block;
}
.lp-drawer-name:hover { color: var(--lp-blue); }
.lp-drawer-var { margin: 3px 0 0; font-size: .76rem; color: var(--lp-muted); }
.lp-drawer-qty { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.lp-drawer-qty button {
width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
border: 1px solid var(--lp-line); background: #fff; color: var(--lp-navy);
font-family: var(--lp-head); font-weight: 700; font-size: .9rem; line-height: 1;
display: grid; place-items: center; transition: background .15s ease, border-color .15s ease;
}
.lp-drawer-qty button:hover { background: var(--lp-pale); border-color: var(--lp-blue); }
.lp-drawer-qty span {
min-width: 26px; text-align: center;
font-family: var(--lp-head); font-weight: 700; font-size: .85rem; color: var(--lp-navy);
}
.lp-drawer-remove {
width: auto !important; padding: 0 8px; margin-left: 4px;
font-size: .72rem !important; font-weight: 600 !important;
color: var(--lp-muted) !important; border-color: transparent !important;
}
.lp-drawer-remove:hover { color: #b3261e !important; background: #fdf0ef !important; border-color: #f5cdc9 !important; }
.lp-drawer-price {
font-family: var(--lp-head); font-weight: 700; font-size: .92rem;
color: var(--lp-navy); white-space: nowrap;
}
/* Per-line saving while a buy-more-save-more tier is active */
.lp-drawer-price { text-align: right; }
.lp-drawer-was {
display: block; font-size: .76rem; font-weight: 500;
color: var(--lp-muted); text-decoration: line-through;
}
.lp-drawer-now { display: block; color: var(--lp-navy); }
.lp-drawer-save {
display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 999px;
background: var(--lp-pale); color: var(--lp-blue);
font-size: .64rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
/* skeleton shown only when there is no cached cart to paint from */
.lp-drawer-item.is-skeleton { pointer-events: none; }
.lp-drawer-item.is-skeleton .lp-drawer-thumb { background: #eef1f6; border-color: #eef1f6; }
.lp-sk {
display: block; height: 11px; border-radius: 5px; background: #eef1f6;
animation: lp-sk-pulse 1.1s ease-in-out infinite;
}
.lp-sk-l { width: 72%; margin-bottom: 8px; }
.lp-sk-s { width: 42%; }
@keyframes lp-sk-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .lp-sk { animation: none; } }
.lp-drawer-empty { text-align: center; padding: 48px 10px; color: var(--lp-ink-soft); }
.lp-drawer-empty strong { color: var(--lp-navy); font-family: var(--lp-head); }
.lp-drawer-empty .lp-btn { margin-top: 14px; }
.lp-drawer-foot {
flex-shrink: 0; border-top: 1px solid var(--lp-line);
padding: 18px 20px; background: #fff;
}
.lp-drawer-foot:empty { display: none; }
.lp-drawer-sub {
display: flex; align-items: center; justify-content: space-between;
font-family: var(--lp-head); font-weight: 700; color: var(--lp-navy); font-size: 1rem;
}
.lp-drawer-sub strong { font-size: 1.3rem; color: var(--lp-blue); }
.lp-drawer-note { margin: 6px 0 14px; font-size: .76rem; color: var(--lp-muted); }
.lp-drawer-fee {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
margin-top: 7px; font-size: .85rem; font-weight: 600; color: var(--lp-slate);
}
.lp-drawer-fee.is-discount { color: var(--lp-blue); }
.lp-drawer-after {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--lp-line);
font-family: var(--lp-head); font-weight: 700; color: var(--lp-navy); font-size: .92rem;
}
.lp-drawer-after strong { font-size: 1.1rem; color: var(--lp-navy); }
.lp-drawer-viewcart {
display: block; text-align: center; margin-top: 11px;
font-family: var(--lp-head); font-weight: 600; font-size: .84rem;
color: var(--lp-blue); text-decoration: none;
}
.lp-drawer-viewcart:hover { text-decoration: underline; }
@media (max-width: 480px) {
.lp-drawer-panel { width: 100%; }
.lp-drawer-body { padding-inline: 16px; }
.lp-drawer-foot { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.lp-drawer-panel, .lp-drawer-overlay { transition: none !important; }
}
@media (max-width: 560px) {
/* smaller drift so the row stays compact on a phone */
.lp-hero-vial { width: 28%; max-width: 108px; }
@keyframes lp-float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-9px,0); } }
}
@media (prefers-reduced-motion: reduce) {
.lp-hero-vial { animation: none !important; transition: none !important; }
}
/* ============================================================
Cart page (WooCommerce Cart block) -- match the CheckoutWC
card design: white rounded panels on the pale page ground,
Poppins navy headings, blue total.
============================================================ */
.woocommerce-cart .wc-block-cart { align-items: flex-start; gap: 26px; }
/* main+sidebar are 65/35 of the container and already sum to 100%, so the
gap has to come out of their widths or the sidebar wraps below. */
.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-cart__main { width: calc(65% - 13px); }
.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-cart__sidebar { width: calc(35% - 13px); }
.woocommerce-cart .wc-block-cart__main,
.woocommerce-cart .wc-block-cart__sidebar {
background: #fff;
border: 1px solid var(--lp-line);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow);
padding: 26px 28px;
margin: 0;
}
.woocommerce-cart .wc-block-cart__sidebar { padding: 22px 24px; }
/* Column headers read as labels, not table chrome */
.woocommerce-cart .wc-block-cart-items__header {
font-family: var(--lp-head); font-weight: 700; font-size: .68rem;
letter-spacing: .08em; text-transform: uppercase; color: var(--lp-muted);
border-bottom: 1px solid var(--lp-line);
}
.woocommerce-cart .wc-block-cart-items__row { border-bottom: 1px solid var(--lp-line); }
.woocommerce-cart .wc-block-cart-items__row:last-child { border-bottom: 0; }
.woocommerce-cart .wc-block-cart-item__product a {
font-family: var(--lp-head); font-weight: 700; color: var(--lp-navy); text-decoration: none;
}
.woocommerce-cart .wc-block-cart-item__product a:hover { color: var(--lp-blue); }
/* Order summary heading */
.woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block {
font-family: var(--lp-head); font-weight: 700; font-size: .72rem;
letter-spacing: .08em; text-transform: uppercase; color: var(--lp-navy);
}
/* Totals rows */
.woocommerce-cart .wc-block-components-totals-item__label { color: var(--lp-slate); font-size: .9rem; }
.woocommerce-cart .wc-block-components-totals-item__value { color: var(--lp-navy); font-weight: 600; }
.woocommerce-cart .wc-block-components-totals-wrapper { border-top-color: var(--lp-line); }
/* Discount lines read as savings */
.woocommerce-cart .wp-block-woocommerce-cart-order-summary-discount-block .wc-block-components-totals-item__value,
.woocommerce-cart .wp-block-woocommerce-cart-order-summary-fee-block .wc-block-components-totals-item__value {
color: var(--lp-blue);
}
/* Grand total */
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
font-family: var(--lp-head); font-weight: 700; color: var(--lp-navy); font-size: 1rem;
}
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-family: var(--lp-head); font-weight: 700; font-size: 1.5rem; color: var(--lp-blue);
}
/* Checkout button matches the drawer / product CTA */
.woocommerce-cart .wc-block-cart__submit-button {
background: var(--lp-blue); border-radius: 10px;
font-family: var(--lp-head); font-weight: 700; letter-spacing: .01em;
}
.woocommerce-cart .wc-block-cart__submit-button:hover { background: var(--lp-blue-dk); }
/* Totals rows: keep the label and the amount on one line with the amount hard
right, whatever the label length. Without min-width:0 a long fee label eats
the whole row and the amount drops underneath it. */
.woocommerce-cart .wc-block-components-totals-item {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.woocommerce-cart .wc-block-components-totals-item__label { flex: 1 1 auto; min-width: 0; }
.woocommerce-cart .wc-block-components-totals-item__value {
flex: 0 0 auto; white-space: nowrap; text-align: right;
}
/* WooCommerce repeats the whole product description under every cart line.
Clamping it to two lines only produced a sentence chopped off mid word in
each row. By this point the customer has already read the product page and
is checking quantities and money, so the row keeps the name, the price and
the quantity, and nothing else. Variation attributes such as Size are a
different element and stay. */
.woocommerce-cart .wc-block-components-product-metadata__description { display: none; }
/* Thumbnails sit on the row itself. An earlier version put a tinted tile
behind them, which read as a stray blue box against a white row. */
.woocommerce-cart .wc-block-cart-item__image img {
object-fit: contain;
border-radius: 6px;
}
/* Variation attributes, for products such as GHK-Cu that come in two sizes. */
.woocommerce-cart .wc-block-components-product-details {
margin: 2px 0 0; font-size: .8rem; color: var(--lp-ink-soft);
}
.woocommerce-cart .wc-block-components-product-details__name { font-weight: 600; }
/* With the blurb gone the row can close up. */
.woocommerce-cart .wc-block-cart-item__wrap > * + * { margin-top: 4px; }
.woocommerce-cart .wc-block-cart-items__row td { padding-top: 16px; padding-bottom: 16px; }
.woocommerce-cart .wc-block-components-product-name {
font-size: .95rem; font-weight: 700; line-height: 1.3;
}
.woocommerce-cart .wc-block-cart-item__quantity { margin-top: 10px; }
/* The sale badge sat tight under the line total. */
.woocommerce-cart .wc-block-components-sale-badge {
display: inline-block; margin-top: 6px;
background: var(--lp-pale); color: var(--lp-navy);
border: 1px solid var(--lp-line); border-radius: 999px;
padding: 2px 9px; font-size: .72rem; font-weight: 700; white-space: nowrap;
}
@media (max-width: 900px) {
/* Has to out-specify the desktop 65/35 rule above, which is written with the
sidebar-layout ancestor and would otherwise pin the sidebar to 35% -- about
109px on a phone, which crushed every totals row onto three lines. */
.woocommerce-cart .wc-block-cart { flex-direction: column; gap: 18px; }
.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-cart__main,
.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-cart__sidebar {
width: 100%; flex: 1 1 100%; padding: 18px 16px;
}
.woocommerce-cart .wc-block-cart-item__wrap { min-width: 0; }
.woocommerce-cart .wc-block-cart-items__row td { padding-top: 14px; padding-bottom: 14px; }
}
/* Optimistic states for the drawer: the row fades the instant Remove is hit,
and the panel dims only while a write is actually in flight. */
.lp-drawer-item.is-removing { opacity: .35; pointer-events: none; transition: opacity .15s ease; }
.lp-drawer-body.is-busy { opacity: .75; transition: opacity .12s ease; }
/* WooCommerce injects a small "View cart" link beside a button after an AJAX
add. The drawer and the header count already cover that, and the stray link
breaks the button block, so it stays hidden. */
.woocommerce a.added_to_cart,
.woocommerce-page a.added_to_cart { display: none !important; }
/* Add-to-cart confirmation, shown on the button instead of opening the drawer */
.single_add_to_cart_button.is-added,
a.add_to_cart_button.is-added { background: var(--lp-blue-dk); }
.single_add_to_cart_button.is-adding,
a.add_to_cart_button.is-adding { opacity: .75; pointer-events: none; }
/* Quantity stepper + add button on catalog and home-page cards */
.lp-quickadd { display: flex; gap: 8px; align-items: stretch; max-width: 100%; }
/* Flex items default to min-width:auto and refuse to shrink below their text,
which pushed the button past the card edge. */
.lp-quickadd .lp-btn {
flex: 1 1 0%; min-width: 0; padding-left: 12px; padding-right: 12px;
font-size: .82rem; white-space: nowrap;
}
.lp-qty {
display: flex; align-items: center; flex: 0 0 auto;
border: 1px solid var(--lp-line); border-radius: 10px; background: #fff; overflow: hidden;
}
.lp-qty button {
width: 30px; height: 100%; min-height: 38px; border: 0; background: none; cursor: pointer;
font-size: 1rem; line-height: 1; color: var(--lp-blue); font-weight: 700;
}
.lp-qty button:hover { background: var(--lp-pale); }
/* Theme rules stretch bare inputs to 100%, which shoves the button out of the
card, so the stepper field is pinned explicitly. */
.lp-quickadd .lp-qty { flex: 0 0 auto; width: auto; }
.lp-quickadd .lp-qty input {
width: 34px !important; min-width: 0 !important; max-width: 34px;
flex: 0 0 34px; border: 0; text-align: center; background: none;
padding: 0 !important; margin: 0 !important; height: auto; box-shadow: none;
font-family: var(--lp-head); font-weight: 700; font-size: .85rem; color: var(--lp-navy);
-moz-appearance: textfield;
}
.lp-quickadd .lp-qty button { flex: 0 0 auto; }
.lp-qty input:focus { outline: none; }
.woocommerce ul.products li.product .lp-quickadd { margin: 0 14px 14px; }
/* Phones show the catalog two-up, so a card is ~159px wide. Side by side the
button was being squeezed to 27px and the label disappeared, so the stepper
and the button stack and each take the full card width. Controls also grow
to a comfortable tap size. */
@media (max-width: 700px) {
.lp-quickadd { flex-direction: column; gap: 6px; }
.lp-quickadd .lp-qty { align-self: stretch; justify-content: center; width: 100%; }
.lp-quickadd .lp-btn { width: 100%; flex: 0 0 auto; padding-top: 11px; padding-bottom: 11px; }
.lp-quickadd .lp-qty button { width: 44px; min-height: 42px; font-size: 1.1rem; }
.lp-quickadd .lp-qty input { width: 44px !important; max-width: 44px; flex: 0 0 44px; font-size: .95rem; }
.lp-drawer-qty button { min-width: 32px; min-height: 32px; }
.woocommerce-cart .wc-block-cart-item__remove-link { min-width: 32px; min-height: 32px; }
}
/* The "why" line under the grouped multi-vial discount */
.lp-drawer-why {
margin: 3px 0 0; font-size: .72rem; line-height: 1.4; color: var(--lp-muted);
}
/* Touch targets: the header cart link is the most-tapped control on the site
and its box was only 20px tall; the stepper field now fills its container so
the whole control is tappable, not just the +/- buttons. */
@media (max-width: 700px) {
.lp-cart-link { display: inline-flex; align-items: center; min-height: 42px; padding: 0 4px; }
.lp-quickadd .lp-qty input { align-self: stretch; height: auto; }
}
/* ============================================================
Contact dialog
============================================================ */
.lp-modal[hidden] { display: none; }
.lp-modal {
position: fixed; inset: 0; z-index: 10000;
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lp-modal-backdrop {
position: absolute; inset: 0; background: rgba(15, 28, 43, .55);
backdrop-filter: blur(2px);
}
.lp-modal-panel {
position: relative; z-index: 1; width: 100%; max-width: 460px;
max-height: calc(100vh - 40px); overflow-y: auto;
background: #fff; border-radius: var(--lp-radius-lg);
box-shadow: var(--lp-shadow-lg); padding: 30px 30px 26px;
}
.lp-modal-panel h2 {
font-family: var(--lp-head); font-size: 1.35rem; color: var(--lp-navy);
margin: 0 0 6px;
}
.lp-modal-sub { margin: 0 0 20px; color: var(--lp-ink-soft); font-size: .9rem; }
.lp-modal-x {
position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
border: 0; border-radius: 50%; background: var(--lp-bg-alt); color: var(--lp-slate);
font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.lp-modal-x:hover { background: var(--lp-pale); color: var(--lp-blue); }
.lp-field { display: block; margin-bottom: 14px; }
.lp-field > span {
display: block; margin-bottom: 5px;
font-family: var(--lp-head); font-weight: 600; font-size: .78rem;
letter-spacing: .04em; text-transform: uppercase; color: var(--lp-slate);
}
.lp-field > span em { font-style: normal; font-weight: 500; color: var(--lp-muted); text-transform: none; letter-spacing: 0; }
.lp-field input, .lp-field textarea {
width: 100%; padding: 11px 13px; border: 1px solid var(--lp-line);
border-radius: 10px; font: inherit; font-size: .93rem; color: var(--lp-navy);
background: #fff; resize: vertical;
}
.lp-field input:focus, .lp-field textarea:focus {
outline: none; border-color: var(--lp-baby);
box-shadow: 0 0 0 3px var(--lp-pale);
}
/* Off-screen rather than display:none, so bots that skip hidden fields still fill it. */
.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-form-note { margin: 12px 0 0; font-size: .85rem; font-weight: 600; min-height: 1.2em; }
.lp-form-note.is-ok { color: #1a6f52; }
.lp-form-note.is-error { color: #8c3d3d; }
.lp-modal-fine { margin: 14px 0 0; font-size: .8rem; color: var(--lp-muted); text-align: center; }
.lp-linkbtn {
display: inline-block; margin-top: 10px; padding: 0; border: 0; background: none;
font-family: var(--lp-head); font-weight: 600; font-size: .86rem;
color: var(--lp-blue); cursor: pointer;
}
.lp-linkbtn:hover { text-decoration: underline; }
.lp-section--tight { padding-top: 0; }
.lp-contact-lead {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
flex-wrap: wrap; padding: 26px 28px; margin-top: 34px;
background: var(--lp-pale); border: 1px solid var(--lp-baby);
border-radius: var(--lp-radius-lg);
}
.lp-contact-lead h2 {
font-family: var(--lp-head); font-size: 1.15rem; color: var(--lp-navy); margin: 0 0 4px;
}
.lp-contact-lead p { margin: 0; color: var(--lp-slate); font-size: .9rem; max-width: 52ch; }
.lp-contact-lead .lp-btn { flex: 0 0 auto; }
@media (max-width: 700px) {
.lp-modal { padding: 12px; }
.lp-modal-panel { padding: 26px 20px 22px; }
.lp-contact-lead { padding: 20px; }
.lp-contact-lead .lp-btn { width: 100%; }
}
/* Checkout address suggestion */
.lp-addr-hint {
margin-top: 6px; font-size: .82rem; color: var(--lp-ink-soft); line-height: 1.4;
}
.lp-addr-hint[hidden] { display: none; }
.lp-addr-use {
border: 0; background: var(--lp-pale); color: var(--lp-blue);
font: inherit; font-weight: 700; cursor: pointer;
padding: 3px 9px; border-radius: 999px;
}
.lp-addr-use:hover { background: var(--lp-baby); color: #fff; }
/* Checkout add-ons */
.lp-addons {
margin: 18px 0 0;
padding: 18px;
border: 1px solid var(--lp-line);
border-radius: 14px;
background: #fff;
}
.lp-addons-title {
margin: 0 0 4px;
font-size: .78rem; font-weight: 800;
letter-spacing: .08em; text-transform: uppercase; color: var(--lp-navy);
}
.lp-addons-sub {
margin: 0 0 14px;
font-size: .8rem; line-height: 1.4; color: var(--lp-ink-soft);
}
.lp-addons-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* One row height for every card, so a two-line product name does not make its
card taller than the one above it. */
.lp-addon {
display: grid;
grid-template-columns: 52px 1fr auto;
align-items: center;
gap: 14px;
min-height: 76px;
padding: 12px 14px;
border: 1px solid var(--lp-line);
border-radius: 12px;
background: transparent;
}
.lp-addon-img {
width: 52px; height: 52px;
object-fit: contain; border-radius: 8px;
}
.lp-addon-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lp-addon-name {
font-size: .86rem; font-weight: 700; color: var(--lp-navy); line-height: 1.3;
}
.lp-addon-price { font-size: .82rem; line-height: 1.3; color: var(--lp-ink-soft); }
.lp-addon-price del { opacity: .6; margin-right: 4px; }
.lp-addon-add {
border: 0; cursor: pointer;
background: var(--lp-blue); color: #fff;
font: inherit; font-size: .82rem; font-weight: 700;
min-width: 76px; padding: 9px 18px; border-radius: 999px;
text-align: center; white-space: nowrap;
}
.lp-addon-add:hover { background: var(--lp-navy); }
.lp-addon-add:disabled { opacity: .7; cursor: default; }
@media (max-width: 480px) {
.lp-addons { padding: 15px; }
.lp-addon { gap: 11px; padding: 11px; grid-template-columns: 46px 1fr auto; }
.lp-addon-img { width: 46px; height: 46px; }
.lp-addon-add { min-width: 66px; padding: 9px 14px; }
}
/* Lifted out of the collapsing summary on phones. */
.lp-addons-loose { margin: 0 0 18px; }
/* ---- Research guide: evidence at a glance ---- */
.lp-eviq {
margin: 28px 0; padding: 22px 24px;
border: 1px solid var(--lp-line); border-left: 4px solid var(--lp-baby);
border-radius: 14px; background: var(--lp-pale);
}
.lp-eviq-human { border-left-color: var(--lp-blue); }
.lp-eviq-early { border-left-color: var(--lp-baby); }
.lp-eviq-pre { border-left-color: #9aa6b4; }
.lp-eviq-head {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
margin-bottom: 10px;
}
.lp-eviq-title {
margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--lp-navy);
letter-spacing: -0.01em;
}
.lp-eviq-level {
font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
padding: 4px 11px; border-radius: 999px; white-space: nowrap;
background: #e5e9ee; color: #4a5561;
}
.lp-eviq-early .lp-eviq-level { background: var(--lp-baby); color: var(--lp-navy); }
.lp-eviq-human .lp-eviq-level { background: var(--lp-blue); color: #fff; }
.lp-eviq-summary {
margin: 0 0 18px; font-size: .95rem; line-height: 1.55; color: var(--lp-ink);
}
.lp-eviq-cols { display: grid; gap: 20px 28px; grid-template-columns: 1fr 1fr; }
@media (max-width: 780px) { .lp-eviq-cols { grid-template-columns: 1fr; } }
.lp-eviq-h {
margin: 0 0 9px; font-size: .74rem; font-weight: 800;
letter-spacing: .08em; text-transform: uppercase; color: var(--lp-navy);
}
.lp-eviq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lp-eviq-list li {
font-size: .88rem; line-height: 1.5; color: var(--lp-ink);
padding-left: 17px; position: relative;
}
.lp-eviq-list li::before {
content: ""; position: absolute; left: 0; top: .55em;
width: 6px; height: 6px; border-radius: 50%; background: var(--lp-baby);
}
.lp-eviq-reported li::before { background: #9aa6b4; }
.lp-eviq-found li::before { background: var(--lp-blue); }
.lp-eviq-found li strong { display: block; color: var(--lp-navy); font-weight: 700; }
.lp-eviq-found li span { color: var(--lp-ink-soft); font-size: .84rem; }
.lp-eviq-why {
margin: 0 0 20px; padding: 14px 16px;
border-radius: 10px; background: #fff; border: 1px solid var(--lp-line);
}
.lp-eviq-why .lp-eviq-h { margin-bottom: 6px; }
.lp-eviq-why p { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--lp-ink); }
.lp-eviq-foot {
margin: 18px 0 0; padding-top: 13px; border-top: 1px solid var(--lp-line);
font-size: .78rem; line-height: 1.5; color: var(--lp-ink-soft);
}
@media (max-width: 600px) {
.lp-eviq { padding: 18px 16px; }
}
/* ---- Research guide: getting back out ---- */
.lp-rback { margin: 0 0 18px; font-size: .86rem; }
.lp-rback a {
display: inline-flex; align-items: center; gap: 7px;
color: var(--lp-blue); font-weight: 700; text-decoration: none;
}
.lp-rback a:hover { color: var(--lp-navy); text-decoration: underline; }
.lp-rback-arrow { transition: transform .15s ease; }
.lp-rback a:hover .lp-rback-arrow { transform: translateX(-3px); }
.lp-rnav { margin: 36px 0 8px; padding-top: 24px; border-top: 1px solid var(--lp-line); }
.lp-rnav-links { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .lp-rnav-links { grid-template-columns: 1fr; } }
.lp-rnav-card {
display: flex; flex-direction: column; gap: 6px;
padding: 15px 17px; border: 1px solid var(--lp-line); border-radius: 12px;
background: var(--lp-pale); text-decoration: none;
transition: border-color .15s ease, background .15s ease;
}
.lp-rnav-card:hover { border-color: var(--lp-baby); background: #fff; }
/* A lone "next" card keeps to the right so the pair always reads outward. */
.lp-rnav-next { text-align: right; }
.lp-rnav-next:only-child { grid-column: 2; }
@media (max-width: 700px) {
.lp-rnav-next { text-align: left; }
.lp-rnav-next:only-child { grid-column: 1; }
}
.lp-rnav-label {
font-size: .72rem; font-weight: 800; letter-spacing: .07em;
text-transform: uppercase; color: var(--lp-ink-soft);
}
.lp-rnav-title {
font-size: .92rem; font-weight: 700; line-height: 1.35; color: var(--lp-navy);
}
.lp-rnav-card:hover .lp-rnav-title { color: var(--lp-blue); }
.lp-rnav-all {
display: inline-flex; align-items: center; margin-top: 16px;
padding: 11px 22px; border-radius: 999px;
background: var(--lp-blue); color: #fff;
font-size: .86rem; font-weight: 700; text-decoration: none;
}
.lp-rnav-all:hover { background: var(--lp-navy); color: #fff; }
/* The `hidden` attribute only carries a browser-default `display:none`, so any
author rule that sets `display` outranks it. `.lp-article` is a flex
container, which meant the research filter set `hidden` correctly and the
cards stayed on screen at full height -- the search looked dead. Make the
attribute authoritative for the elements we toggle. */
.lp-article[hidden],
.lp-section[hidden],
.lp-empty[hidden],
.lp-addons[hidden] {
display: none !important;
}
/* Quantity stepper in the checkout order summary */
.lp-cqty {
display: inline-flex; align-items: center; gap: 2px;
margin-top: 8px;
border: 1px solid var(--lp-line); border-radius: 999px;
background: #fff; overflow: hidden;
}
.lp-cqty button {
border: 0; background: none; cursor: pointer;
width: 28px; height: 28px; line-height: 1;
font-size: 1rem; font-weight: 700; color: var(--lp-navy);
}
.lp-cqty button:hover:not(:disabled) { background: var(--lp-pale); color: var(--lp-blue); }
.lp-cqty button:disabled { opacity: .35; cursor: default; }
.lp-cqty-val {
min-width: 26px; text-align: center;
font-size: .85rem; font-weight: 700; color: var(--lp-navy);
font-variant-numeric: tabular-nums;
}
.lp-cqty.is-busy { opacity: .55; pointer-events: none; }
/* Shipping address reminder before the order is placed */
.lp-addr-check {
display: flex; gap: 11px; align-items: flex-start;
margin: 0 0 18px; padding: 13px 15px;
border: 1px solid var(--lp-line); border-left: 3px solid var(--lp-blue);
border-radius: 10px; background: var(--lp-pale);
}
.lp-addr-check svg { flex: 0 0 18px; margin-top: 1px; color: var(--lp-blue); }
.lp-addr-check p { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--lp-ink); }
.lp-addr-check strong { color: var(--lp-navy); }
/* Totals waiting on the server after a quantity change */
.lp-totals-pending { opacity: .45; transition: opacity .12s ease; }
/* ---- San Antonio local page ---- */
.lp-local-ways { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; align-items: stretch; }
@media (max-width: 760px) { .lp-local-ways { grid-template-columns: 1fr; } }
.lp-local-way {
display: flex; flex-direction: column;
/* Without this the column stretches its children, which turned the little
SAME DAY tag into a full width bar. */
align-items: flex-start;
border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
padding: 30px; background: #fff;
}
.lp-local-tag {
display: inline-block; align-self: flex-start; margin-bottom: 14px;
font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
color: var(--lp-blue); background: var(--lp-pale);
padding: 4px 11px; border-radius: 999px;
}
.lp-local-way h2 { margin: 0 0 12px; font-size: 1.3rem; color: var(--lp-navy); }
.lp-local-way p { margin: 0; color: var(--lp-ink); line-height: 1.65; }
.lp-local-why { max-width: 760px; }
.lp-local-why h2 { margin: 0 0 14px; }
.lp-local-why p { line-height: 1.7; }
.lp-fineprint {
max-width: 760px; margin: 0 auto; font-size: .84rem; line-height: 1.6;
color: var(--lp-ink-soft); text-align: center;
}
/* Local delivery band on the home page */
.lp-localband {
display: flex; align-items: center; justify-content: space-between;
gap: 32px; flex-wrap: wrap;
border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
background: #fff; padding: 34px 38px;
}
.lp-localband-copy { flex: 1 1 320px; min-width: 0; }
.lp-localband-eyebrow {
display: block; margin-bottom: 10px;
font-size: .7rem; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--lp-blue);
}
.lp-localband h2 {
margin: 0 0 10px; font-size: 1.45rem; line-height: 1.25; color: var(--lp-navy);
}
.lp-localband p {
margin: 0; color: var(--lp-ink-soft); line-height: 1.65; max-width: 46ch;
}
.lp-localband .lp-btn { flex: 0 0 auto; }
@media (max-width: 720px) {
.lp-localband { padding: 26px 22px; gap: 22px; }
.lp-localband .lp-btn { width: 100%; text-align: center; }
}
/* ZIP checker on the San Antonio page */
.lp-zipcheck {
border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
background: #fff; padding: 24px 28px;
}
.lp-zipcheck h2 { margin: 0 0 4px; font-size: 1.2rem; color: var(--lp-navy); }
.lp-zipcheck-copy p { margin: 0; color: var(--lp-ink-soft); font-size: .92rem; }
.lp-zipcheck-form { display: flex; gap: 10px; }
.lp-zipcheck-form input {
width: 150px; padding: 12px 16px; font: inherit; font-size: 1rem;
letter-spacing: .05em; text-align: center; font-variant-numeric: tabular-nums;
border: 1px solid var(--lp-line); border-radius: 999px;
background: var(--lp-pale); color: var(--lp-navy);
}
.lp-zipcheck-form input::placeholder { letter-spacing: 0; font-size: .9rem; }
.lp-zipcheck-form input:focus {
outline: none; border-color: var(--lp-baby); background: #fff;
box-shadow: 0 0 0 3px rgba(0, 86, 139, .12);
}
.lp-zipcheck-form .lp-btn { padding-inline: 26px; }
.lp-zipcheck-result {
margin: 0; padding: 13px 16px; border-radius: 12px;
font-size: .9rem; line-height: 1.55; text-align: left;
background: var(--lp-pale); color: var(--lp-ink);
}
.lp-zipcheck-result[hidden] { display: none; }
.lp-zipcheck-result strong { color: var(--lp-navy); }
.lp-zipcheck-result.is-yes {
background: #eaf5f0; border: 1px solid #cfe6da; color: #1a5946;
}
.lp-zipcheck-result.is-yes strong { color: #10402f; }
.lp-zipcheck-result.is-no { border: 1px solid var(--lp-line); }
/* ---- San Antonio page: tighter rhythm ----
The site-wide section padding runs to 84px top and bottom, which put 168px of
air between every block. This page is short and its blocks are related, so it
sets its own rhythm and pairs the prose with the discount table. */
.lp-local .lp-section { padding-block: clamp(34px, 3.6vw, 48px); }
.lp-local .lp-page-hero { padding-block: clamp(38px, 4vw, 56px); }
.lp-local .lp-local-ways { margin-bottom: 22px; }
.lp-local .lp-zipcheck {
max-width: none; padding: 26px 30px;
display: grid; gap: 6px 26px;
grid-template-columns: 1fr auto; align-items: center; text-align: left;
}
.lp-local .lp-zipcheck h2 { grid-column: 1; margin: 0; font-size: 1.25rem; }
.lp-local .lp-zipcheck > p { grid-column: 1; margin: 0; }
.lp-local .lp-zipcheck-form { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
.lp-local .lp-zipcheck-result { grid-column: 1 / -1; margin-top: 16px; }
@media (max-width: 760px) {
.lp-local .lp-zipcheck {
grid-template-columns: 1fr; text-align: center; padding: 24px 20px;
}
.lp-local .lp-zipcheck-form { grid-column: 1; grid-row: auto; justify-content: center; margin-top: 16px; }
}
/* Prose and pricing side by side rather than stacked */
.lp-local-split {
display: grid; gap: 30px 48px; grid-template-columns: 1.15fr 1fr; align-items: start;
}
.lp-local-split h2 { margin: 0 0 12px; font-size: 1.35rem; }
.lp-local-split p { line-height: 1.65; }
.lp-local-split p:last-child { margin-bottom: 0; }
/* Discount table. These rules were lost when the ZIP checker block above was
rewritten, which flattened the table back to browser defaults. */
.lp-disc {
width: 100%; border-collapse: collapse;
border: 1px solid var(--lp-line); border-radius: 12px; overflow: hidden;
}
.lp-disc th, .lp-disc td {
text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--lp-line);
font-size: .92rem;
}
.lp-disc thead th {
background: var(--lp-pale); color: var(--lp-navy);
font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.lp-disc tbody tr:last-child td { border-bottom: 0; }
.lp-disc td:last-child { font-weight: 700; color: var(--lp-blue); white-space: nowrap; }
.lp-local-split .lp-disc { margin: 14px 0 14px; }
.lp-disc-note { font-size: .88rem; color: var(--lp-ink-soft); line-height: 1.55; }
@media (max-width: 860px) {
.lp-local-split { grid-template-columns: 1fr; gap: 30px; }
}
.lp-local .lp-fineprint {
max-width: 760px; margin: 0 auto; padding: 26px 20px 40px;
font-size: .8rem; line-height: 1.55; color: var(--lp-ink-soft); text-align: center;
}
/* Checker sits on one row: copy left, form right, answer underneath. */
.lp-local .lp-zipcheck {
display: grid; gap: 4px 26px;
grid-template-columns: 1fr auto; align-items: center;
}
.lp-local .lp-zipcheck-copy { grid-column: 1; }
.lp-local .lp-zipcheck-form { grid-column: 2; }
.lp-local .lp-zipcheck-result { grid-column: 1 / -1; margin-top: 18px; }
@media (max-width: 700px) {
.lp-local .lp-zipcheck { grid-template-columns: 1fr; text-align: center; }
.lp-local .lp-zipcheck-form { grid-column: 1; justify-content: center; margin-top: 16px; }
.lp-local .lp-zipcheck-form input { flex: 1 1 auto; width: auto; max-width: 200px; }
.lp-local .lp-zipcheck-result { text-align: left; }
}
/* ==========================================================================
CRO pass, 2026-08-27
Savings chips, catalog stock pills, the shipping/payment strip above the
grid, product-page supply add-ons and the cart free-shipping meter.
========================================================================== */
/* Blocksy prints the product's category under every catalog card. It is the
same two words on fourteen of sixteen products, it is internal taxonomy
rather than anything a buyer weighs, and it pushes Add to Cart down. */
.woocommerce ul.products li.product .ct-meta-categories,
.woocommerce ul.products li.product .entry-meta { display: none !important; }
/* Savings chip -------------------------------------------------------- */
.lp-save {
display: inline-block; margin-left: 8px; vertical-align: middle;
padding: 3px 9px; border-radius: 999px;
background: var(--lp-pale); color: var(--lp-blue-dk);
font-family: var(--lp-head); font-weight: 700; font-size: .72rem;
letter-spacing: .01em; white-space: nowrap;
}
/* Catalog stock pill ---------------------------------------------------
Shares .lp-pill with the home grid, which is positioned absolutely over the
thumbnail. In the loop it sits inline above the spec table, so position and
placement have to be unwound rather than inherited. */
.woocommerce ul.products li.product .lp-pill--loop,
.woocommerce ul.products li.product .lp-pill--out {
position: static; top: auto; left: auto;
display: inline-flex; align-self: flex-start; width: fit-content;
margin: 0 0 8px;
font-size: .68rem; letter-spacing: .02em;
}
.woocommerce ul.products li.product .lp-pill--out {
background: var(--lp-line); color: var(--lp-slate);
}
.woocommerce ul.products li.product .lp-pill--out::before { background: var(--lp-muted); }
/* Shipping / payment strip above the catalog grid ---------------------- */
.lp-shopnotes {
display: flex; flex-wrap: wrap; gap: 10px 26px;
margin: 0 0 18px; padding: 14px 18px;
border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
background: var(--lp-bg-alt);
}
.lp-shopnote {
position: relative; padding-left: 22px;
font-size: .86rem; color: var(--lp-slate); line-height: 1.4;
}
.lp-shopnote::before {
content: ''; position: absolute; left: 0; top: .38em;
width: 12px; height: 12px; border-radius: 50%;
background: var(--lp-baby);
box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--lp-blue);
}
.lp-shopnote strong { color: var(--lp-navy); font-weight: 700; }
.lp-shopnote--local { color: var(--lp-blue); }
/* Hero offer line + catalog sale note ---------------------------------- */
.lp-hero-offer {
margin: 14px 0 0; font-family: var(--lp-head); font-weight: 600;
font-size: .92rem; color: var(--lp-baby);
}
.lp-sale-note {
margin: 10px 0 0; font-size: .92rem; color: var(--lp-slate);
}
.lp-sale-note strong { color: var(--lp-blue); }
/* Cart drawer free-shipping meter -------------------------------------- */
.lp-freeship { margin: 0 0 14px; }
.lp-freeship-msg {
display: block; margin-bottom: 7px;
font-size: .85rem; color: var(--lp-slate);
}
.lp-freeship-msg strong { color: var(--lp-blue); font-weight: 700; }
.lp-freeship-bar {
display: block; height: 6px; border-radius: 999px;
background: var(--lp-line); overflow: hidden;
}
.lp-freeship-bar i {
display: block; height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--lp-baby), var(--lp-blue));
transition: width .35s ease;
}
.lp-freeship.is-met .lp-freeship-msg { color: #047857; font-weight: 600; }
.lp-freeship.is-met .lp-freeship-bar i { background: #10b981; }
@media (max-width: 640px) {
.lp-shopnotes { gap: 8px 0; flex-direction: column; padding: 12px 14px; }
}
/* ==========================================================================
Single product page, 2026-08-27
========================================================================== */
/* The add-to-cart form is a flex row of [qty][button]. Dropping the add-on
block in as a third flex item stretched the button to the block's height and
squeezed the row -- the form has to wrap, and the block has to claim a whole
row above the controls. */
.woocommerce div.product form.cart,
.elementor-add-to-cart form.cart,
.elementor-widget-woocommerce-product-add-to-cart form.cart {
display: flex; flex-wrap: wrap !important; align-items: center; gap: 12px;
}
.woocommerce div.product form.cart .lp-addons,
.elementor-add-to-cart form.cart .lp-addons,
.elementor-widget-woocommerce-product-add-to-cart form.cart .lp-addons {
flex: 1 0 100%; order: -1; margin: 0 0 4px;
}
/* A variable product does not lay out in form.cart at all: Woo prints the
quantity and the button inside .woocommerce-variation-add-to-cart, and
woocommerce_before_add_to_cart_button fires in there too. So the add-on
block becomes a flex item of THAT container, and wrapping the outer form
does nothing -- which is how the button ended up 94px wide and reading
"Add / to / cart" down the page. */
.woocommerce-variation-add-to-cart {
display: flex; flex-wrap: wrap !important; align-items: center; gap: 12px;
}
.woocommerce-variation-add-to-cart .lp-addons {
flex: 1 0 100%; order: -1; margin: 0 0 4px;
}
.woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto; margin: 0; }
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
flex: 1 1 auto; align-self: center;
min-height: 54px; padding: 0 30px;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--lp-head); font-weight: 700; font-size: 1rem;
letter-spacing: .01em; border-radius: 10px;
}
.woocommerce div.product form.cart .quantity,
.elementor-add-to-cart form.cart .quantity { flex: 0 0 auto; margin: 0; }
.elementor-add-to-cart form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button {
flex: 1 1 auto; align-self: center;
min-height: 54px; padding: 0 30px;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--lp-head); font-weight: 700; font-size: 1rem;
letter-spacing: .01em; border-radius: 10px;
}
/* Supply add-ons ------------------------------------------------------- */
.lp-addons {
padding: 4px 0 0; border: 0; background: none;
}
.lp-addons-head {
margin: 0 0 10px; font-family: var(--lp-head); font-weight: 700;
font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
color: var(--lp-muted);
}
.lp-addon {
display: flex; align-items: center; gap: 14px;
padding: 13px 16px; margin: 0 0 8px; cursor: pointer;
border: 1px solid var(--lp-line); border-radius: 12px; background: #fff;
transition: border-color .15s ease, background-color .15s ease;
}
.lp-addon:last-of-type { margin-bottom: 0; }
.lp-addon:hover { border-color: var(--lp-baby); background: #fbfdff; }
.lp-addon input {
flex: 0 0 auto; width: 19px; height: 19px; margin: 0;
accent-color: var(--lp-blue); cursor: pointer;
}
.lp-addon-body { flex: 1 1 auto; min-width: 0; }
.lp-addon-name {
display: block; font-family: var(--lp-head); font-weight: 600;
font-size: .95rem; line-height: 1.3; color: var(--lp-navy);
}
.lp-addon-note {
display: block; margin-top: 2px;
font-size: .82rem; line-height: 1.35; color: var(--lp-ink-soft);
}
.lp-addon-price {
flex: 0 0 auto; font-family: var(--lp-head); font-weight: 700;
font-size: .98rem; color: var(--lp-navy); white-space: nowrap;
}
/* Checked state is set from JS as well as :has(), because Chrome does not
reliably re-invalidate :has() on a control's checked change. */
.lp-addon.is-on {
border-color: var(--lp-blue); background: var(--lp-pale);
}
.lp-addon.is-on .lp-addon-price { color: var(--lp-blue); }
/* Stock pill on the product page --------------------------------------- */
.lp-pill--pdp {
position: static; top: auto; left: auto;
display: inline-flex; width: fit-content; margin: 0 0 14px;
font-size: .72rem; letter-spacing: .02em;
}
.lp-pill--pdp.lp-pill--out { background: var(--lp-line); color: var(--lp-slate); }
.lp-pill--pdp.lp-pill--out::before { background: var(--lp-muted); }
/* Dispatch promise ------------------------------------------------------ */
.lp-pdp-cutoff {
display: flex; align-items: center; gap: 10px;
margin: 18px 0 0; padding: 13px 16px;
border-left: 3px solid var(--lp-baby); border-radius: 0 10px 10px 0;
background: var(--lp-bg-alt);
font-size: .88rem; line-height: 1.45; color: var(--lp-slate);
}
.lp-pdp-cutoff svg { flex: 0 0 auto; color: var(--lp-blue); }
.lp-pdp-cutoff strong { color: var(--lp-navy); }
/* Specifications -------------------------------------------------------- */
.lp-pdp-specs {
margin: 22px 0 0; padding: 20px;
border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
background: #fff;
}
.lp-pdp-specs h3 {
margin: 0 0 16px; padding-bottom: 12px;
border-bottom: 1px solid var(--lp-line);
font-family: var(--lp-head); font-weight: 700; font-size: 1.02rem;
color: var(--lp-navy);
}
.lp-pdp-spec-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.lp-pdp-spec {
padding: 12px 14px; border-radius: 10px; background: var(--lp-bg-alt);
}
.lp-pdp-spec-k {
display: block; margin-bottom: 3px;
font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
color: var(--lp-muted);
}
.lp-pdp-spec-v {
display: block; font-family: var(--lp-head); font-weight: 600;
font-size: .93rem; line-height: 1.35; color: var(--lp-navy);
}
/* Research-use notice --------------------------------------------------- */
.lp-pdp-notice {
margin: 22px 0 0; padding: 16px 18px;
border-left: 3px solid var(--lp-navy); border-radius: 0 10px 10px 0;
background: var(--lp-bg-alt);
}
.lp-pdp-notice h3 {
margin: 0 0 7px; font-family: var(--lp-head); font-weight: 700;
font-size: .92rem; color: var(--lp-navy);
}
.lp-pdp-notice p {
margin: 0; font-size: .82rem; line-height: 1.55; color: var(--lp-ink-soft);
}
.lp-pdp-notice strong { color: var(--lp-slate); }
/* Gallery: the vials are white product shots, so on a white page they read as
an empty column. A tinted frame gives them something to sit on. */
.woocommerce div.product .woocommerce-product-gallery,
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery {
padding: 22px; border: 1px solid var(--lp-line);
border-radius: var(--lp-radius-lg);
background: linear-gradient(165deg, #fff 0%, var(--lp-pale) 100%);
}
.woocommerce div.product .woocommerce-product-gallery img { mix-blend-mode: multiply; }
/* Bulk tier table ------------------------------------------------------- */
.lp-bulk {
margin: 22px 0 0; padding: 18px 20px;
border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
background: #fff;
}
.lp-bulk-title {
display: block; margin: 0 0 12px;
font-family: var(--lp-head); font-weight: 700;
font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
color: var(--lp-muted);
}
.lp-bulk-list {
display: block; margin: 0; padding: 0; list-style: none;
border-top: 1px solid var(--lp-line);
}
.lp-bulk-list > * {
display: flex; align-items: baseline; gap: 12px;
padding: 11px 2px; border-bottom: 1px solid var(--lp-line);
}
.lp-bulk-qty {
flex: 0 0 auto; font-family: var(--lp-head); font-weight: 700;
font-size: .92rem; color: var(--lp-navy);
}
.lp-bulk-off {
flex: 1 1 auto; font-size: .8rem; color: var(--lp-ink-soft);
}
.lp-bulk-each {
flex: 0 0 auto; font-family: var(--lp-head); font-weight: 700;
font-size: .95rem; color: var(--lp-blue);
}
.lp-bulk-floor, .lp-bulk-note {
display: block; margin-top: 12px;
font-size: .8rem; line-height: 1.5; color: var(--lp-ink-soft);
}
.lp-bulk-floor strong { color: var(--lp-navy); }
@media (max-width: 560px) {
.lp-pdp-spec-grid { grid-template-columns: 1fr; }
.elementor-add-to-cart form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 0 100%; }
}
/* Research guide link ---------------------------------------------------
This markup shipped without any styling, so it rendered as loose inline
spans -- the book icon read as a stray checkbox and the title ran straight
into the blurb with no space. */
a.lp-guidelink {
display: flex; align-items: center; gap: 14px;
margin: 22px 0 0; padding: 15px 18px;
border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
background: #fff; text-decoration: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
a.lp-guidelink:hover {
border-color: var(--lp-baby); box-shadow: var(--lp-shadow);
}
.lp-guidelink-icon {
flex: 0 0 auto; display: grid; place-items: center;
width: 40px; height: 40px; border-radius: 10px;
background: var(--lp-pale); color: var(--lp-blue);
}
.lp-guidelink-body { flex: 1 1 auto; min-width: 0; }
.lp-guidelink-title {
display: block; font-family: var(--lp-head); font-weight: 600;
font-size: .95rem; line-height: 1.35; color: var(--lp-navy);
}
.lp-guidelink-blurb {
display: block; margin-top: 3px;
font-size: .82rem; line-height: 1.45; color: var(--lp-ink-soft);
}
.lp-guidelink-go {
flex: 0 0 auto; font-size: 1.2rem; line-height: 1; color: var(--lp-blue);
transition: transform .15s ease;
}
a.lp-guidelink:hover .lp-guidelink-go { transform: translateX(3px); }
@media (max-width: 560px) {
a.lp-guidelink { gap: 12px; padding: 13px 14px; }
.lp-guidelink-icon { width: 34px; height: 34px; }
}
/* Variation selector ---------------------------------------------------- */
.woocommerce div.product form.cart table.variations,
.elementor-add-to-cart form.cart table.variations {
width: 100%; margin: 0 0 16px; border: 0; background: none;
}
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
display: block; width: 100%; padding: 0; border: 0; text-align: left;
}
.woocommerce div.product form.cart table.variations th.label label {
display: block; margin: 0 0 6px;
font-family: var(--lp-head); font-weight: 700;
font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
color: var(--lp-muted);
}
.woocommerce div.product form.cart table.variations td.value select {
width: 100%; min-height: 52px; padding: 0 40px 0 16px;
border: 1px solid var(--lp-line); border-radius: 12px; background-color: #fff;
font-family: var(--lp-head); font-weight: 600; font-size: .95rem;
color: var(--lp-navy); cursor: pointer;
}
.woocommerce div.product form.cart table.variations td.value select:focus-visible {
outline: 2px solid var(--lp-blue); outline-offset: 1px;
}
.woocommerce div.product form.cart .reset_variations {
display: inline-block; margin-top: 8px;
font-size: .82rem; color: var(--lp-blue);
}
/* The per-variation price repeats the figure already shown at the top of the
column, so it only earns its space once a size has actually been picked. */
.woocommerce div.product .single_variation_wrap .woocommerce-variation-price {
display: block; margin: 0 0 14px;
}
.woocommerce div.product .single_variation_wrap .woocommerce-variation-price .price {
font-family: var(--lp-head); font-weight: 700; font-size: 1.5rem;
color: var(--lp-blue);
}
.woocommerce div.product .single_variation_wrap .woocommerce-variation-availability p {
margin: 0 0 10px; font-size: .85rem; color: var(--lp-ink-soft);
}
@media (max-width: 560px) {
.woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1 0 100%; }
}
/* Payment methods on the product page ----------------------------------- */
.lp-pdp-pay {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
margin: 10px 0 0; padding: 0 2px;
font-size: .84rem; color: var(--lp-ink-soft);
}
.lp-pdp-pay-label {
font-family: var(--lp-head); font-weight: 700;
font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
color: var(--lp-muted);
}
.lp-pdp-pay-methods { color: var(--lp-slate); }
.lp-pdp-pay-perk {
padding: 3px 9px; border-radius: 999px;
background: var(--lp-pale); color: var(--lp-blue-dk);
font-family: var(--lp-head); font-weight: 700; font-size: .72rem;
white-space: nowrap;
}
/* Product-page FAQ ------------------------------------------------------- */
.lp-pdp-faq { margin: 24px 0 0; }
.lp-pdp-faq h3 {
margin: 0 0 12px;
font-family: var(--lp-head); font-weight: 700; font-size: 1.02rem;
color: var(--lp-navy);
}
/* Buy card at the end of a research guide -------------------------------
The guides rank for the informational query and had no route to the
product, so this is both the internal link and the conversion path. */
.lp-guidebuy {
display: flex; align-items: center; gap: 22px;
margin: 34px 0; padding: 22px;
border: 1px solid var(--lp-line); border-radius: var(--lp-radius-lg);
background: linear-gradient(160deg, #fff 0%, var(--lp-pale) 100%);
}
.lp-guidebuy-media {
flex: 0 0 132px; align-self: stretch;
display: grid; place-items: center;
border-radius: var(--lp-radius); background: #fff;
border: 1px solid var(--lp-line); padding: 10px;
}
.lp-guidebuy-media img {
width: 100%; height: auto; display: block; mix-blend-mode: multiply;
}
.lp-guidebuy-body { flex: 1 1 auto; min-width: 0; }
.lp-guidebuy-eyebrow {
margin: 0 0 4px;
font-family: var(--lp-head); font-weight: 700;
font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
color: var(--lp-muted);
}
.lp-guidebuy-title { margin: 0 0 8px; font-size: 1.28rem; line-height: 1.25; }
.lp-guidebuy-title a { color: var(--lp-navy); text-decoration: none; }
.lp-guidebuy-title a:hover { color: var(--lp-blue); }
.lp-guidebuy-specs {
display: flex; flex-wrap: wrap; gap: 6px 18px;
margin: 0 0 10px; padding: 0; list-style: none;
}
.lp-guidebuy-specs li { font-size: .85rem; color: var(--lp-slate); }
.lp-guidebuy-specs span {
display: block; font-size: .64rem; letter-spacing: .09em;
text-transform: uppercase; color: var(--lp-muted);
}
.lp-guidebuy-price { margin: 0 0 6px; }
.lp-guidebuy-price .price {
font-family: var(--lp-head); font-weight: 700; font-size: 1.32rem;
color: var(--lp-blue);
}
.lp-guidebuy-note {
margin: 0 0 14px; font-size: .8rem; line-height: 1.45; color: var(--lp-ink-soft);
}
@media (max-width: 620px) {
.lp-guidebuy { flex-direction: column; align-items: stretch; gap: 16px; }
.lp-guidebuy-media { flex: 0 0 auto; max-width: 160px; margin: 0 auto; }
}
|