, so the flex container has to be that paragraph. Putting it on .ast-builder-html-element made the
a single
flex item and left the three spans running together. */
.ast-above-header-wrap .ast-grid-section-center { flex: 1 1 auto; }
.ast-above-header-wrap .ast-header-html-1,
.ast-above-header-wrap .ast-header-html,
.ast-above-header-wrap .ast-builder-html-element { width: 100%; display: block; }
.ast-above-header-wrap .ast-builder-html-element > p {
display: flex; align-items: center; justify-content: space-between;
gap: 24px; margin: 0; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto;
}
.lp-ann__i { font-size: 12px; line-height: 1.3; letter-spacing: 0.02em; color: #0B1B3A; white-space: nowrap; }
.lp-ann__i--del::before { content: "\2713"; margin-right: 7px; color: #74A82F; font-weight: 700; }
.lp-ann__i--mid { letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; font-size: 11px; color: #74A82F; }
.lp-ann__i--sa::before { content: "\2022"; margin-right: 7px; color: #74A82F; font-weight: 700; }
@media (max-width: 921px) {
.ast-above-header-wrap .ast-builder-html-element > p { justify-content: center; gap: 0; }
.lp-ann__i--mid, .lp-ann__i--sa { display: none; }
.lp-ann__i { font-size: 11px; }
}
/* ===== Stage 8: brand video ===== */
.lp-brandvid { text-align: center; line-height: 0; }
.lp-brandvid video { width: 100%; max-width: 438px; height: auto; display: inline-block; border-radius: 10px; background: #F4F6FB; }
@media (max-width: 600px) { .lp-brandvid video { max-width: 313px; } }
/* ===== Stage 9: checkout coupon box ===== */
.lp-coupon { margin: 0 0 18px; padding: 4px 0 0; }
/* An author rule of display:flex beats the browser [hidden] rule, so the
closed state has to be stated explicitly or the drawer never shuts. */
.lp-coupon__row { display: flex; gap: 8px; margin-top: 12px; }
.lp-coupon__row[hidden] { display: none !important; }
.lp-coupon__toggle,
.lp-coupon__toggle:hover,
.lp-coupon__toggle:focus {
display: inline-flex !important; align-items: center; gap: 8px;
background: none !important; border: 0 !important; box-shadow: none !important;
padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
color: #2B4ACB !important; font-size: 0.88rem !important; font-weight: 700 !important;
letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important;
line-height: 1.4 !important; cursor: pointer; width: auto !important; min-height: 0 !important;
}
.lp-coupon__toggle:hover { color: #74A82F !important; }
.lp-coupon__toggle::after {
content: ""; width: 7px; height: 7px; margin-top: -3px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); transition: transform 0.18s ease;
}
.lp-coupon.is-open .lp-coupon__toggle::after { transform: rotate(-135deg); margin-top: 2px; }
.lp-coupon__input {
flex: 1 1 auto; min-width: 0; margin: 0 !important;
padding: 11px 13px !important; font-size: 0.9rem !important; line-height: 1.3 !important;
height: auto !important; min-height: 0 !important;
border: 1px solid #D6DEEC !important; border-radius: 6px !important;
background: #FFFFFF !important; color: #0B1B3A !important;
}
.lp-coupon__apply,
.lp-coupon__apply:hover,
.lp-coupon__apply:focus {
flex: 0 0 auto; width: auto !important; margin: 0 !important;
padding: 11px 22px !important; font-size: 0.8rem !important; line-height: 1.2 !important;
height: auto !important; min-height: 0 !important; white-space: nowrap;
background-color: #8CC63F !important; border: 1px solid #8CC63F !important;
color: #0B1B3A !important; font-weight: 700 !important; letter-spacing: 0.04em !important;
text-transform: none !important; border-radius: 999px !important; cursor: pointer;
}
.lp-coupon__apply:hover { background-color: #74A82F !important; border-color: #74A82F !important; color: #FFFFFF !important; }
.lp-coupon__apply[disabled] { opacity: 0.55; cursor: default; }
.lp-coupon__list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-coupon__list li {
display: inline-flex; align-items: center; gap: 8px; margin: 0;
background: #EEF6E0; border: 1px solid #CFE9A0; border-radius: 999px; padding: 5px 8px 5px 12px;
font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #3F6E2A;
}
.lp-coupon__remove,
.lp-coupon__remove:hover {
background: none !important; border: 0 !important; box-shadow: none !important;
padding: 0 4px !important; margin: 0 !important; border-radius: 0 !important;
color: #54658A !important; font-size: 0.68rem !important; font-weight: 400 !important;
text-transform: none !important; letter-spacing: 0 !important; text-decoration: underline;
cursor: pointer; width: auto !important; min-height: 0 !important;
}
.lp-coupon__remove:hover { color: #A33 !important; }
.lp-coupon__msg { font-size: 0.8rem; line-height: 1.5; }
.lp-coupon__msg:not(:empty) { margin-top: 10px; }
.lp-coupon__msg .woocommerce-error,
.lp-coupon__msg .woocommerce-message {
margin: 0 !important; padding: 8px 12px !important; font-size: 0.8rem !important; list-style: none;
}
@media (max-width: 420px) {
.lp-coupon__row { flex-wrap: wrap; }
.lp-coupon__input { flex: 1 1 100%; }
.lp-coupon__apply { flex: 1 1 100%; text-align: center; }
}
/* ===== Stage 10: newsletter name field ===== */
/* The direct-child selector keeps the off-screen honeypot out of this. */
.lpb-news form > input[type="text"],
.lpb-news input[type="email"] {
padding: 11px 14px !important; font-size: 14px !important; line-height: 1.3 !important;
height: auto !important; min-height: 0 !important;
border: 1px solid #FFFFFF !important; border-radius: 6px !important;
background: #FFFFFF; color: #0B1B3A; margin: 0 !important;
}
.lpb-news form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 460px; margin: 0; }
.lpb-news form > input[type="text"] { flex: 1 1 130px; min-width: 0; }
.lpb-news input[type="email"] { flex: 2 1 180px; min-width: 0; }
.lpb-news button { flex: 0 0 auto; }
@media (max-width: 921px) {
.lpb-news form > input[type="text"],
.lpb-news input[type="email"] { padding: 10px 12px !important; font-size: 13px !important; }
.lpb-news form > input[type="text"] { flex: 1 1 100%; }
.lpb-news input[type="email"] { flex: 1 1 auto; }
}
@media (max-width: 380px) {
.lpb-news form > input[type="text"],
.lpb-news input[type="email"],
.lpb-news button { flex: 1 1 100%; }
}
/* --- Stage 11: shop archive header band, handsets only ------------------
Astra sets .ast-separate-container #primary { padding: 4em 0 } and below
993px only zeroes the left/right halves of that shorthand, so a 64px
padding-top survived and sat as dead grey between the collapsed filter
and the Store card. Desktop resolves to padding: 0 through Astra's own
min-width:993px rule, so everything below is mobile-only by construction.
---------------------------------------------------------------------- */
@media (max-width: 921px) {
.post-type-archive-product #primary,
.tax-product_cat #primary {
padding-top: 0 !important;
padding-bottom: 1.8em !important;
}
.post-type-archive-product #secondary,
.tax-product_cat #secondary { margin: 0 0 10px !important; }
/* The title panel and the product panel are separate white boxes that meet
with no margin, so they read as a single card. Trim the seam. */
.post-type-archive-product .ast-archive-description,
.tax-product_cat .ast-archive-description { padding: 16px 16px 0 !important; }
.post-type-archive-product .ast-archive-description .ast-archive-title,
.tax-product_cat .ast-archive-description .ast-archive-title {
margin-bottom: 0 !important;
font-size: 24px !important;
line-height: 1.2 !important;
}
.post-type-archive-product .ast-woocommerce-container,
.tax-product_cat .ast-woocommerce-container { padding-top: 12px !important; }
.woocommerce-products-header:empty { margin: 0 !important; padding: 0 !important; }
.post-type-archive-product .woocommerce-result-count,
.tax-product_cat .woocommerce-result-count { margin: 0 0 8px !important; font-size: 13px !important; }
.post-type-archive-product .woocommerce-ordering,
.tax-product_cat .woocommerce-ordering { margin: 0 0 14px !important; }
}
/* --- Stage 12: add-to-home-screen banner -------------------------------
Shown only from a visitor's second session, never on cart or checkout.
Modern Cart parks a fixed bubble at bottom 70px / z-index 9999, so the
bubble is hidden while the banner is up rather than left to overlap it.
---------------------------------------------------------------------- */
.lp-install {
position: fixed;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 10001;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 14px;
background: #FFFFFF;
border: 1px solid #D6DEEC;
border-radius: 10px;
box-shadow: 0 8px 26px rgba(11, 27, 58, 0.18);
animation: lp-install-in 0.22s ease-out both;
}
@keyframes lp-install-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.lp-install__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-install__copy strong { font-size: 13px; font-weight: 700; color: #0B1B3A; line-height: 1.3; }
.lp-install__copy span { font-size: 12px; color: #54658A; line-height: 1.35; }
.lp-install__row { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lp-install__go {
border: 0;
border-radius: 6px;
padding: 9px 16px;
background: #8CC63F;
color: #14300A;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
}
.lp-install__go:hover { background: #74A82F; }
.lp-install__no {
border: 0;
background: none;
padding: 9px 6px;
color: #54658A;
font-size: 12px;
cursor: pointer;
}
body.lp-install-open #moderncart-floating-cart { display: none !important; }
@media (max-width: 420px) {
.lp-install { flex-direction: column; align-items: stretch; gap: 10px; }
.lp-install__row { justify-content: flex-end; }
}
/* --- Stage 13: Where to Inject -----------------------------------------
Every rule is scoped to .lp-inject so nothing here can reach the shop or
any other page. Site cards use auto-fit so the three-up collapses to one
column on a handset without a second breakpoint.
---------------------------------------------------------------------- */
.lp-inject { color: #0B1B3A; }
.lp-inject h2 { font-size: 21px !important; line-height: 1.25 !important; margin: 2.2em 0 .6em !important; padding-bottom: .4em; border-bottom: 2px solid #D6DEEC; }
.lp-inject h2:first-of-type { margin-top: 1.4em !important; }
.lp-inject p { line-height: 1.65; }
.lp-inject .lp-lede { color: #54658A; margin-top: 0; }
.lp-inject .lp-small { font-size: 13px; color: #54658A; }
.lp-note { background: #F4F6FB; border-left: 4px solid #2B4ACB; border-radius: 0 6px 6px 0; padding: 14px 16px; font-size: 14px; line-height: 1.6; color: #12266B; }
.lp-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.lp-pair__item { background: #FFF; border: 1px solid #D6DEEC; border-radius: 8px; padding: 14px 16px; }
.lp-pair__item p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; }
.lp-tag { display: inline-block; padding: 4px 10px; border-radius: 3px; background: #12266B; color: #FFF; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lp-tag--alt { background: #54658A; }
.lp-sites { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 1.2em 0; }
.lp-site { margin: 0; background: #FFF; border: 1px solid #D6DEEC; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.lp-site img { display: block; width: 100%; height: auto; background: #F4F6FB; }
.lp-site figcaption { padding: 14px 16px 16px; position: relative; }
.lp-site figcaption strong { display: block; font-size: 15px; margin-bottom: 4px; padding-right: 34px; }
.lp-site figcaption span:not(.lp-site__n) { display: block; font-size: 13px; line-height: 1.55; color: #54658A; }
.lp-site__n { position: absolute; top: 12px; right: 14px; width: 24px; height: 24px; border-radius: 50%; background: #8CC63F; color: #14300A; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lp-rule { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 1em 0; }
.lp-rule__i { background: #EEF6E0; border: 1px solid #C9E29A; border-radius: 8px; padding: 12px 14px; }
.lp-rule__i span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4A7016; margin-bottom: 4px; }
.lp-rule__i p { margin: 0; font-size: 14px; line-height: 1.5; }
.lp-inject ul.lp-avoid, .lp-inject ul.lp-flag { list-style: none; margin: 1em 0; padding: 0; display: grid; gap: 8px; }
.lp-inject ul.lp-avoid li, .lp-inject ul.lp-flag li { position: relative; margin: 0; padding: 10px 14px 10px 40px; border-radius: 6px; font-size: 14px; line-height: 1.5; }
.lp-inject ul.lp-avoid li { background: #FDF2F2; border: 1px solid #F2CFCF; }
.lp-inject ul.lp-avoid li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 13px; height: 2px; background: #B3261E; transform: translateY(-50%); }
.lp-inject ul.lp-flag li { background: #FFF8E8; border: 1px solid #F0DCA8; }
.lp-inject ul.lp-flag li::before { content: "!"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: #9A5B00; color: #FFF; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lp-inject ol.lp-steps { list-style: none; margin: 1.2em 0; padding: 0; counter-reset: lpstep; display: grid; gap: 8px; }
.lp-inject ol.lp-steps li { counter-increment: lpstep; position: relative; margin: 0; padding: 12px 16px 12px 52px; background: #FFF; border: 1px solid #D6DEEC; border-radius: 8px; font-size: 14px; line-height: 1.55; color: #54658A; }
.lp-inject ol.lp-steps li strong { color: #0B1B3A; }
.lp-inject ol.lp-steps li::before { content: counter(lpstep); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: #2B4ACB; color: #FFF; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lp-alert { background: #FFF8E8; border: 1px solid #F0DCA8; border-left: 4px solid #9A5B00; border-radius: 0 8px 8px 0; padding: 14px 16px; }
.lp-alert strong { display: block; color: #6E4100; margin-bottom: 6px; }
.lp-alert p { margin: 0; font-size: 14px; line-height: 1.6; }
.lp-final { margin-top: 2.4em !important; padding-top: 1em; border-top: 1px solid #D6DEEC; font-size: 13px; font-style: italic; color: #54658A; }
@media (max-width: 544px) {
.lp-inject h2 { font-size: 19px !important; margin-top: 1.8em !important; }
.lp-sites { gap: 12px; }
}
/* --- Stage 13b: bullets inside site cards and steps, plus the tips grid -- */
.lp-inject .lp-site figcaption ul { list-style: none; margin: 6px 0 0; padding: 0; }
.lp-inject .lp-site figcaption ul li { position: relative; margin: 0 0 5px; padding-left: 14px; font-size: 13px; line-height: 1.5; color: #54658A; }
.lp-inject .lp-site figcaption ul li:last-child { margin-bottom: 0; }
.lp-inject .lp-site figcaption ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: #8CC63F; }
.lp-inject .lp-site figcaption ul li strong { display: inline; color: #0B1B3A; padding: 0; }
.lp-inject ol.lp-steps li ul { list-style: none; margin: 7px 0 0; padding: 0; }
.lp-inject ol.lp-steps li ul li { position: relative; margin: 0 0 5px; padding: 0 0 0 14px; background: none; border: 0; border-radius: 0; font-size: 13px; line-height: 1.55; }
.lp-inject ol.lp-steps li ul li:last-child { margin-bottom: 0; }
.lp-inject ol.lp-steps li ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #7FA6F2; counter-increment: none; }
.lp-inject ol.lp-steps li > strong { display: block; color: #0B1B3A; font-size: 14px; }
.lp-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 1.2em 0; }
.lp-tip { background: #FFF; border: 1px solid #D6DEEC; border-left: 3px solid #2B4ACB; border-radius: 0 8px 8px 0; padding: 12px 14px; }
.lp-tip span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #12266B; margin-bottom: 5px; }
.lp-tip p { margin: 0; font-size: 13px; line-height: 1.55; color: #54658A; }
/* --- Stage 14: page header for Where to Inject --------------------------
Astra keeps padding: 4em 0 on #primary below 993px (only the left and
right halves of the shorthand get zeroed), which left 64px of dead grey
above the card. Desktop already resolves to 0 via Astra's min-width rule.
Targeted two ways on purpose: the page id is exact but breaks if the page
is ever recreated, and :has() keeps working in that case. They are kept as
separate rules because one invalid selector would void a shared list.
---------------------------------------------------------------------- */
@media (max-width: 992px) {
.page-id-7885 #primary { padding-top: 0 !important; padding-bottom: 1.8em !important; }
}
@media (max-width: 992px) {
body:has(.lp-inject) #primary { padding-top: 0 !important; padding-bottom: 1.8em !important; }
}
.page-id-7885 .entry-header { text-align: center; margin-bottom: 0 !important; }
body:has(.lp-inject) .entry-header { text-align: center; margin-bottom: 0 !important; }
.page-id-7885 .entry-title { margin-bottom: 0 !important; letter-spacing: -0.01em; }
body:has(.lp-inject) .entry-title { margin-bottom: 0 !important; letter-spacing: -0.01em; }
/* Centred subtitle, with a short lime rule above it as the only ornament. */
.lp-inject .lp-kicker {
position: relative;
margin: 18px 0 22px !important;
padding-top: 16px;
text-align: center;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #54658A;
}
.lp-inject .lp-kicker::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 44px;
height: 3px;
border-radius: 2px;
background: #8CC63F;
}
/* The lede is now the first thing read, so it carries ink, not grey. */
.lp-inject .lp-lede {
margin: 0 0 16px !important;
font-size: 16px;
line-height: 1.6;
color: #0B1B3A;
}
/* Demoted: the full disclaimer still sits at the foot of the page, so this
one only has to carry the point, not the whole of it. */
p.lp-note {
margin: 0 0 8px !important;
padding: 10px 12px;
background: #F4F6FB;
border-left: 3px solid #7FA6F2;
border-radius: 0 5px 5px 0;
font-size: 12.5px;
line-height: 1.5;
color: #54658A;
}
p.lp-note strong { color: #12266B; }
@media (max-width: 544px) {
.page-id-7885 .entry-title, body:has(.lp-inject) .entry-title { font-size: 26px !important; }
.lp-inject .lp-kicker { font-size: 12px; margin: 16px 0 20px !important; }
.lp-inject .lp-lede { font-size: 15px; }
}
/* --- Stage 15: the two floating buttons ---------------------------------
Both ship from their plugins oversized and in their own brand colours,
and both sat on top of page content. Colours are set in each plugin's
own options where possible; this handles size, position and weight.
The cart bubble is hidden until it actually holds something, so the common
case is no floating furniture over the page at all.
---------------------------------------------------------------------- */
#moderncart-floating-cart {
height: 48px !important;
bottom: 18px !important;
right: 16px !important;
box-shadow: 0 4px 14px rgba(11, 27, 58, 0.22) !important;
}
#moderncart-floating-cart .moderncart-floating-cart-icon svg,
#moderncart-floating-cart .moderncart-floating-cart-icon img { width: 22px !important; height: 22px !important; }
/* Empty cart: no bubble. lp-cart-empty is set by the snippet in brand.php. */
#moderncart-floating-cart.lp-cart-empty { display: none !important; }
.moderncart-floating-cart-count {
font-size: 11px !important;
font-weight: 700 !important;
min-width: 18px !important;
height: 18px !important;
line-height: 18px !important;
}
/* Cookie re-consent: legally required, rarely wanted. Small and quiet. */
button.cookieadmin_re_consent {
height: 38px !important;
width: 38px !important;
bottom: 16px !important;
left: 16px !important;
background-color: #54658A !important;
opacity: .55;
box-shadow: 0 3px 10px rgba(11, 27, 58, 0.25) !important;
transition: opacity .18s ease;
}
button.cookieadmin_re_consent:hover,
button.cookieadmin_re_consent:focus-visible { opacity: 1; }
button.cookieadmin_re_consent img,
button.cookieadmin_re_consent svg { width: 20px !important; height: 20px !important; }
@media (max-width: 544px) {
#moderncart-floating-cart { height: 44px !important; bottom: 14px !important; right: 12px !important; }
button.cookieadmin_re_consent { height: 34px !important; width: 34px !important; bottom: 12px !important; left: 12px !important; }
}
/* --- Stage 16: ask about this product, phone field, returns page --------- */
.lp-ask {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 4px 0 14px;
font-size: 13px;
font-weight: 600;
color: #2B4ACB;
text-decoration: none;
border-bottom: 1px solid rgba(43, 74, 203, .35);
padding-bottom: 1px;
}
.lp-ask::before { content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; background: none; }
.lp-ask:hover { color: #12266B; border-bottom-color: #12266B; }
/* Named product carried over from a product page. */
.lp-about {
margin: 0 0 18px !important;
padding: 11px 14px;
background: #EEF6E0;
border: 1px solid #C9E29A;
border-radius: 6px;
font-size: 14px;
line-height: 1.5;
}
.lp-about span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #4A7016; margin-bottom: 2px; }
.lp-about a { color: #0B1B3A; font-weight: 600; }
/* Statutory-rights block on the returns page. */
.lp-note-block { background: #F4F6FB; border-left: 4px solid #2B4ACB; border-radius: 0 6px 6px 0; padding: 13px 16px; margin: 1em 0; }
.lp-note-block p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #54658A; }
/* --- Stage 17: peptide calculator page ---------------------------------
A positive checklist, as opposed to .lp-avoid which is the red do-not
list. Same shape so the two read as a pair, opposite signal.
---------------------------------------------------------------------- */
.lp-inject ul.lp-check { list-style: none; margin: 1em 0; padding: 0; display: grid; gap: 8px; }
.lp-inject ul.lp-check li { position: relative; margin: 0; padding: 10px 14px 10px 40px; border-radius: 6px; font-size: 14px; line-height: 1.5; background: #F7FBF0; border: 1px solid #C9E29A; }
.lp-inject ul.lp-check li::before { content: ""; position: absolute; left: 15px; top: 50%; width: 11px; height: 6px; border-left: 2px solid #4A7016; border-bottom: 2px solid #4A7016; transform: translateY(-70%) rotate(-45deg); }
/* The calculator sets its own type scale, so keep the page wrapper out. */
.lp-inject #lkp-calc { margin: 26px auto 30px; }
.lp-inject #lkp-calc p { line-height: 1.5; }
.lp-inject #lkp-calc label { margin: 0; }
/* --- Stage 18: global search overlay -----------------------------------
Sits above the install banner (10001) and the cart bubble (9999) so it is
never partly covered. Astra's own slide-out field is hidden, since the
icon now opens this instead and two search boxes would be confusing.
---------------------------------------------------------------------- */
.ast-search-menu-icon .search-form { display: none !important; }
.ast-search-icon { display: block; }
.astra-search-icon { cursor: pointer; }
.lp-search {
position: fixed;
inset: 0;
z-index: 10050;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 12vh 16px 16px;
background: rgba(11, 27, 58, .55);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
animation: lp-search-in .16s ease-out both;
}
.lp-search[hidden] { display: none !important; }
body.lp-search-open { overflow: hidden; }
@keyframes lp-search-in { from { opacity: 0 } to { opacity: 1 } }
.lp-search__card {
position: relative;
width: 100%;
max-width: 560px;
background: #FFFFFF;
border-radius: 12px;
padding: 22px 20px 18px;
box-shadow: 0 18px 50px rgba(11, 27, 58, .32);
}
.lp-search__label {
display: block;
margin: 0 0 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #54658A;
}
.lp-search__row { display: flex; gap: 8px; }
.lp-search__input {
flex: 1;
min-width: 0;
font-size: 16px;
padding: 12px 14px;
color: #0B1B3A;
background: #FFFFFF;
border: 1px solid #D6DEEC;
border-radius: 7px;
}
.lp-search__input:focus { outline: 2px solid #2B4ACB; outline-offset: 1px; border-color: #2B4ACB; }
.lp-search__go {
flex: none;
border: 0;
border-radius: 7px;
padding: 12px 20px;
background: #2B4ACB;
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
cursor: pointer;
}
.lp-search__go:hover { background: #12266B; }
.lp-search__hint { margin: 10px 0 0 !important; font-size: 12.5px; color: #54658A; }
.lp-search__close {
position: absolute;
top: 6px;
right: 10px;
border: 0;
background: none;
font-size: 26px;
line-height: 1;
color: #54658A;
cursor: pointer;
padding: 4px 8px;
}
.lp-search__close:hover { color: #0B1B3A; }
@media (max-width: 544px) {
.lp-search { padding-top: 8vh; }
.lp-search__card { padding: 18px 16px 16px; }
.lp-search__row { flex-direction: column; }
.lp-search__go { width: 100%; padding: 13px 20px; }
}
/* --- Stage 19: guided dropdowns on the calculator ------------------------
Each guided field is a select plus the original number input. The input
stays in the DOM because the calculations read it; it is only revealed
when Other is chosen, and the unit suffix hides with it so the row does
not read as two separate questions.
---------------------------------------------------------------------- */
#lkp-calc .lkp-guide { max-width: 148px; }
#lkp-calc .lkp-field > input[type=number] { display: none; }
#lkp-calc .lkp-field > .lkp-sfx { display: none; }
/* Fields with no dropdown (price) keep their input and suffix. */
#lkp-calc .lkp-field:not(:has(select[data-target])) > input[type=number],
#lkp-calc .lkp-field:not(:has(select[data-target])) > .lkp-sfx { display: block; }
#lkp-calc .lkp-field.is-other > input[type=number] { display: block; width: 92px; }
#lkp-calc .lkp-field.is-other > .lkp-sfx { display: block; }
#lkp-calc .lkp-field.is-other > select[data-target] { max-width: 104px; }
@media (max-width: 420px) {
#lkp-calc .lkp-guide { max-width: 128px; font-size: 14px; }
#lkp-calc .lkp-field.is-other > select[data-target] { max-width: 88px; }
#lkp-calc .lkp-field.is-other > input[type=number] { width: 74px; }
}
/* --- Stage 20: contact form density, handsets only ----------------------
The form ships at padding:14px 16px with gap:8px and margin-bottom:20px,
which is roughly 96px per field before the label. On a phone that put two
and a half fields on a screen. Everything below is inside a 544px query,
so tablet and desktop keep the roomier spacing.
The input font stays at 16px on purpose: iOS zooms the whole page when a
focused field is smaller than that, which is far worse than a tall box.
---------------------------------------------------------------------- */
@media (max-width: 544px) {
.lp-contact-form .lp-field { gap: 5px !important; margin-bottom: 12px !important; }
.lp-contact-form .lp-field > label { font-size: 14px !important; line-height: 1.3 !important; margin: 0 !important; }
.lp-contact-form .lp-field input,
.lp-contact-form .lp-field textarea {
padding: 10px 12px !important;
font-size: 16px !important;
line-height: 1.35 !important;
border-radius: 6px !important;
}
.lp-contact-form .lp-field textarea { min-height: 112px !important; }
.lp-contact-form button { width: 100%; margin-top: 2px !important; padding: 13px 20px !important; }
/* The trailing medical-advice note does not need body-copy spacing. */
.lp-contact-form > p { margin-top: .75rem !important; font-size: .72rem !important; line-height: 1.55 !important; }
}
/* Same Astra padding:4em 0 on #primary that the other pages hit: below 993px
only the left and right halves get zeroed, leaving 64px of dead grey above
the card. Targeted by id and by :has so it survives a page rebuild. */
@media (max-width: 992px) {
.page-id-152 #primary { padding-top: 0 !important; padding-bottom: 1.8em !important; }
}
@media (max-width: 992px) {
body:has(.lp-contact-form) #primary { padding-top: 0 !important; padding-bottom: 1.8em !important; }
}
/* --- Stage 21: calculator polish ----------------------------------------
Astra styles every button on the site in uppercase with letter-spacing,
and that was leaking into the tab strip. The calculator never asked for
it, and caps plus tracking made each tab wide enough to push the strip
off screen. Undoing it is what makes the rest of this fit.
---------------------------------------------------------------------- */
#lkp-calc .lkp-tabs button,
#lkp-calc .lkp-modes button {
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 500 !important;
border-radius: 999px;
}
#lkp-calc .lkp-modes button { border-radius: 0; }
/* A three-cell grid in two columns leaves a grey gap where the grid shows
through. Let the last one span the row instead. */
#lkp-calc .lkp-grid > .lkp-cell:nth-child(3):last-child { grid-column: 1 / -1; }
/* Currency and amount are one value, so they should read as one control. */
#lkp-calc #c_cur {
max-width: 58px;
min-width: 0;
text-align: center;
border-radius: 8px 0 0 8px;
border-right: 0;
padding-left: 6px;
padding-right: 6px;
}
#lkp-calc #c_price { border-radius: 0 8px 8px 0; }
#lkp-calc #c_cur + input { margin-left: -1px; }
@media (max-width: 540px) {
/* All four tabs visible at once beats a strip that scrolls off the edge. */
#lkp-calc .lkp-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
overflow: visible;
padding-bottom: 14px;
}
#lkp-calc .lkp-tabs button { width: 100%; text-align: center; font-size: 13px; padding: 10px 6px; }
#lkp-calc .lkp-stage { padding: 16px 14px 12px; }
#lkp-calc .lkp-big { line-height: .95; }
#lkp-calc .lkp-word { font-size: 15px; }
#lkp-calc .lkp-sub { font-size: 13px; }
#lkp-calc .lkp-row { padding: 11px 2px; gap: 10px; }
#lkp-calc .lkp-row label { font-size: 14px; }
#lkp-calc .lkp-hint { font-size: 12px; }
/* One width for every control so the right edge is a straight line. */
#lkp-calc .lkp-row select:not(#c_cur) { min-width: 124px; max-width: 124px; }
#lkp-calc .lkp-field { justify-content: flex-end; }
#lkp-calc #c_price { width: 100%; min-width: 0; }
#lkp-calc .lkp-field:has(#c_cur) { flex: 1; max-width: 182px; }
#lkp-calc .lkp-cell { padding: 11px 12px; }
#lkp-calc .lkp-v { font-size: 18px; }
#lkp-calc .lkp-k { font-size: 12px; line-height: 1.35; }
#lkp-calc .lkp-note, #lkp-calc .lkp-foot { font-size: 13px; }
/* Clear of the cookie button parked bottom-left. */
#lkp-calc .lkp-foot { padding-bottom: 8px; }
}
/* --- Stage 22: mobile spacing, sitewide --------------------------------- */
/* 1. The dead grey band above every card.
Astra sets .ast-separate-container #primary { padding: 4em 0 } and below
993px zeroes only the left and right halves of that shorthand, leaving
64px of empty ground above the content on every page. Fixed here once
instead of page by page; desktop resolves to 0 via Astra's own rule. */
@media (max-width: 992px) {
.ast-separate-container #primary { padding-top: 0 !important; padding-bottom: 1.8em !important; }
}
/* 2. The real cause of the white void in the blog cards.
.lpb-posts carries grid-auto-rows: 1fr for the two-column desktop layout.
The single-column breakpoint never reset it, so every card was stretched
to match the tallest one and short excerpts left a gap before the link. */
@media (max-width: 880px) {
.lpb-posts { grid-auto-rows: auto !important; }
.lpb-post { height: auto !important; }
}
@media (max-width: 544px) {
/* 3. Blog cards: 26px of body padding is a desktop measure. */
.lpb-posts { gap: 14px !important; }
.lpb-post__body { padding: 15px 16px 17px !important; gap: 7px !important; }
.lpb-post__art img,
.lpb-posts > *:first-child .lpb-post__art img { height: 150px !important; }
.lpb-post__title { font-size: 1.05rem !important; line-height: 1.25 !important; }
.lpb-posts > *:first-child .lpb-post__title { font-size: 1.12rem !important; }
.lpb-post__excerpt { font-size: .875rem !important; line-height: 1.55 !important; }
.lpb-post__date { font-size: .7rem !important; }
.lpb-post__more { padding-top: 6px !important; font-size: .85rem !important; }
/* 4. FAQ accordion: rows were 18px/22px padded on a 412px screen. */
.lpb-hl details { margin-bottom: 7px !important; }
.lpb-hl summary { padding: 13px 44px 13px 15px !important; font-size: .95rem !important; line-height: 1.35 !important; }
.lpb-hl summary::after { right: 18px !important; }
.lpb-hl .lpb-hl__a { padding: 0 15px 15px !important; font-size: .875rem !important; line-height: 1.6 !important; }
/* 5. A heading and the small link under it are one unit, not two blocks.
Elementor stacks them as separate child containers on a handset, which
is where the long drop between them came from. */
.elementor-element-2b018c,
.elementor-element-2b013f { padding: 0 !important; margin: 2px 0 0 !important; }
.elementor-element-2b018c p,
.elementor-element-2b013f p { margin: 0 !important; text-align: left !important; font-size: .9rem !important; }
.elementor-element-2b01a2,
.elementor-element-2b0155 { margin-top: 12px !important; }
}
/* --- Stage 23: page height, FAQ on handsets, blog header ---------------- */
/* 23a. Dead space between the last line of content and the footer.
Three boxes stack their bottom padding there: #primary, the .ast-container
inside it, and the article card itself. On a phone that was
28.8 + 16 + 20.8 = 65px of empty white. Trimmed, not removed. */
@media (max-width: 921px) {
.ast-separate-container #primary { padding-bottom: 1.1em !important; }
body.ast-separate-container .site-content > .ast-container {
padding-top: 1.1rem !important;
padding-bottom: 0.7rem !important;
}
}
@media (max-width: 600px) {
.ast-separate-container #primary { padding-bottom: 0.75em !important; }
body.ast-separate-container .site-content > .ast-container {
padding-top: 0.65rem !important;
padding-bottom: 0.4rem !important;
}
body.ast-separate-container .ast-article-single,
body.ast-separate-container .ast-article-post,
body.woocommerce.ast-separate-container .ast-woocommerce-container,
body.ast-separate-container .ast-archive-description { padding: 1.15em 1.05em !important; }
/* 23b. Vertical rhythm inside the article body. */
body.ast-separate-container .entry-header { margin-bottom: 0.6em !important; }
body .entry-title,
body h1.entry-title,
body .ast-archive-description .ast-archive-title { font-size: 1.65rem !important; line-height: 1.2 !important; }
body .entry-content p,
body .entry-content ul,
body .entry-content ol { margin-bottom: 0.85em !important; }
body .entry-content h2 { margin-top: 1.15em !important; margin-bottom: 0.4em !important; }
body .entry-content h3 { margin-top: 1em !important; margin-bottom: 0.3em !important; }
body .entry-content h2.wp-block-heading { margin: 22px 0 10px !important; padding-top: 12px !important; font-size: 1.25rem !important; }
body .entry-content li { margin-bottom: 0.3em !important; }
}
/* 23c. The FAQ page had no handset treatment at all: six filter pills at
desktop size, 15px/18px accordion rows and desktop body copy. The heading,
lead and pill row are centred here to match the other page tops; the
answers stay left aligned because centred paragraphs are hard to read. */
@media (max-width: 600px) {
.page-id-150 .entry-header,
.page-id-150 .entry-title { text-align: center !important; }
.lpb-faq-lead {
font-size: 0.925rem !important;
line-height: 1.6 !important;
text-align: center !important;
margin: 0 auto 14px !important;
}
.lpb-faq-nav {
justify-content: center !important;
gap: 6px !important;
margin: 0 0 18px !important;
}
.lpb-faq-nav a { padding: 6px 11px !important; font-size: 0.75rem !important; }
.wp-block-details { margin: 0 0 7px !important; }
.wp-block-details summary {
padding: 12px 40px 12px 14px !important;
font-size: 0.95rem !important;
line-height: 1.35 !important;
}
.wp-block-details summary::after { right: 16px !important; }
.wp-block-details > :not(summary) { padding-left: 14px !important; padding-right: 14px !important; }
.wp-block-details p { font-size: 0.875rem !important; line-height: 1.6 !important; margin: 0 0 10px !important; }
.wp-block-details > p:last-child { padding-bottom: 13px !important; }
.wp-block-details ul,
.wp-block-details ol { font-size: 0.875rem !important; line-height: 1.6 !important; }
}
/* 23d. Header band on the posts page. Astra renders no title at all for the
blog index, so lp_blog_header() prints one; this gives it the same
measure and colour as the archive headers elsewhere. */
.lp-blog-head .page-title { margin: 0 0 8px !important; }
.lp-blog-head__lead {
margin: 0 !important;
max-width: 68ch;
color: #54658A;
font-size: 1rem;
line-height: 1.65;
}
.lp-blog-head { margin-bottom: 1.2em !important; }
@media (max-width: 600px) {
.lp-blog-head { margin-bottom: 0.8em !important; text-align: center; }
.lp-blog-head .page-title { margin: 0 0 6px !important; }
.lp-blog-head__lead { font-size: 0.9rem; line-height: 1.6; margin: 0 auto !important; }
}
/* --- Stage 24: the invisible Learn dropdown, and the brands panel -------- */
/* 24a. Two rules were fighting and nobody won.
Astra's main.min.css paints every desktop dropdown white:
.main-header-menu .sub-menu { background: #fff }
while the header menu colour set in the Customizer paints every link,
top level and sub level alike, white too:
.ast-builder-menu-1 .main-header-menu .menu-item > .menu-link { color: #FFFFFF }
So the Learn panel opened correctly and rendered white text on white, and
only became readable on hover, where the colour flips to #7FA6F2. The panel
is given the header's own navy here instead, so the existing white links are
legible without touching the Customizer setting the top level relies on. */
.ast-desktop .ast-builder-menu-1 .sub-menu,
.ast-desktop .main-header-menu .sub-menu {
background-color: #12266B !important;
border-color: #2B4ACB !important;
box-shadow: 0 10px 28px rgba(11, 27, 58, 0.28);
border-radius: 0 0 4px 4px;
overflow: hidden;
}
.ast-desktop .ast-builder-menu-1 .sub-menu .menu-item > .menu-link,
.ast-desktop .main-header-menu .sub-menu .menu-item > .menu-link {
color: #FFFFFF !important;
border-bottom-color: rgba(255, 255, 255, 0.12) !important;
font-size: 0.88rem;
}
.ast-desktop .ast-builder-menu-1 .sub-menu .menu-item:last-child > .menu-link,
.ast-desktop .main-header-menu .sub-menu .menu-item:last-child > .menu-link {
border-bottom-width: 0 !important;
}
.ast-desktop .ast-builder-menu-1 .sub-menu .menu-item > .menu-link:hover,
.ast-desktop .ast-builder-menu-1 .sub-menu .menu-item:hover > .menu-link,
.ast-desktop .ast-builder-menu-1 .sub-menu .current-menu-item > .menu-link,
.ast-desktop .main-header-menu .sub-menu .menu-item > .menu-link:hover,
.ast-desktop .main-header-menu .sub-menu .current-menu-item > .menu-link {
color: var(--lp-lime) !important;
background-color: rgba(255, 255, 255, 0.07) !important;
}
/* The lime underline in Stage 1 is a top level device. Keep it off the panel. */
.ast-desktop .main-header-menu .sub-menu .menu-link::after { content: none !important; }
/* 24b. Brands panel. It reuses the Categories widget markup so it inherits the
existing box styling; only the current-brand state is new. */
.widget_product_brands .product-brands { list-style: none; margin: 0; padding: 0; }
.widget_product_brands .product-brands li { margin: 0; padding: 0; }
.widget_product_brands .current-brand > a { font-weight: 700; color: var(--lp-lime-d) !important; }
.widget_product_brands .brand-item--all > a { font-size: 0.85em; }
/* --- Stage 25: desktop spacing, shop header, featured card -------------- */
/* 25a. The grey band above every page on desktop.
Astra sets .ast-separate-container #primary { padding: 4em 0 }, which is
64px above the first card, on top of the 38px the container already adds.
Stage 22 zeroed it below 993px only, so desktop kept the full 4em. */
@media (min-width: 993px) {
.ast-separate-container #primary { padding-bottom: 2em; }
}
/* 25b. Shop header. It was a single word on a white card with nothing under it.
lp_shop_archive_lead() supplies the sentence; this gives the pair a shape. */
.post-type-archive-product .ast-archive-description,
.tax-product_cat .ast-archive-description,
.tax-product_brand .ast-archive-description {
border-left: 4px solid var(--lp-lime);
}
/* WooCommerce renders