/* ============================================================
Broadya · Beauty v1 (preview-only) — real-photo page v4
Scope: only applies when .
============================================================ */
/* ---------- page reset (keep theme vars untouched) ---------- */
.beauty-v1 { color: var(--color-primary, #1A2B4A); }
.beauty-v1 h1, .beauty-v1 h2, .beauty-v1 h3, .beauty-v1 h4 {
color: var(--color-primary, #1A2B4A);
font-family: inherit;
}
.beauty-v1 p { color: var(--color-primary, #1A2B4A); }
/* footer lives on dark bg — restore readable colors (match home page) */
.beauty-v1 .site-footer { color: #D7DCE5; }
.beauty-v1 .site-footer h4 { color: #fff; }
.beauty-v1 .site-footer p,
.beauty-v1 .site-footer .footer-brand + p { color: #D7DCE5; }
.beauty-v1 .site-footer .footer-brand { color: #fff; }
.beauty-v1 .eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: .18em;
color: var(--color-accent, #B22222);
margin-bottom: 14px;
text-transform: uppercase;
}
.beauty-v1 .eyebrow-blue { color: #2C4A7A; }
.beauty-v1 .eyebrow-on-dark { color: #CD5C5C; }
/* ============================================================
1. STICKY TOP CTA
============================================================ */
.beauty-v1 .bh-sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(17,24,39,.96);
color: #fff;
padding: 10px 0;
transform: translateY(-100%);
transition: transform .25s ease;
box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.beauty-v1 .bh-sticky.visible { transform: translateY(0); }
/* when compact sticky CTA is visible, swap out the full nav to avoid double bar overlap */
body.beauty-v1:has(.bh-sticky.visible) .site-header { display: none; }
.beauty-v1 .bh-sticky-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.beauty-v1 .bh-sticky-title {
font-size: 14px;
font-weight: 600;
color: rgba(255,255,255,.85);
}
.beauty-v1 .bh-sticky-btn {
background: #fff;
color: var(--color-primary, #1A2B4A);
padding: 8px 18px;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: background .2s;
}
.beauty-v1 .bh-sticky-btn:hover { background: var(--color-accent, #B22222); color: #fff; }
/* ============================================================
2. HERO — light blue/white (NOT strong gradient — theme aligned)
============================================================ */
.beauty-v1 .bh-hero {
background:
radial-gradient(900px 520px at 92% -12%, rgba(178,34,34,.18), transparent 60%),
radial-gradient(760px 520px at 4% 120%, rgba(44,74,122,.45), transparent 60%),
linear-gradient(135deg, #1A2B4A 0%, #0F1A2E 100%);
padding: 96px 0 84px;
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.beauty-v1 .bh-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #1A2B4A 0%, #2C4A7A 50%, #1A2B4A 100%);
z-index: 2;
}
.beauty-v1 .bh-hero .container { position: relative; z-index: 2; }
.beauty-v1 .bh-hero-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 56px;
align-items: center;
}
.beauty-v1 .bh-hero-text { max-width: 620px; }
/* FIX #3: product hero eyebrow had no .eyebrow class -> inherited dark gray on dark hero.
Style the first hero text line as an on-dark eyebrow (amber, uppercase — clearly visible). */
.beauty-v1 .bh-hero-text > .elementor-element:first-child {
color: #FBBF24 !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
margin-bottom: 14px !important;
}
.beauty-v1 .bh-hero-fig {
margin: 0;
position: relative;
border-radius: 16px;
background: #ffffff;
padding: 14px;
box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .55);
}
.beauty-v1 .bh-hero-fig img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
}
.beauty-v1 .bh-hero .btn-ghost {
color: #fff;
border-color: rgba(255,255,255,.55);
background: transparent;
}
.beauty-v1 .bh-hero .btn-ghost:hover {
background: rgba(255,255,255,.12);
border-color: #fff;
}
.beauty-v1 .bh-hero h1 {
font-size: 52px;
line-height: 1.05;
font-weight: 800;
letter-spacing: -.025em;
margin: 0 0 18px;
color: #fff;
}
.beauty-v1 .bh-accent-block { color: var(--color-accent, #B22222); }
.beauty-v1 .bh-hero-lead {
font-size: 18px;
line-height: 1.7;
color: #D7DCE5;
max-width: 56ch;
margin: 0 0 24px;
}
.beauty-v1 .bh-pills {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.beauty-v1 .bh-pills li {
font-size: 13px;
font-weight: 600;
color: var(--color-primary, #1A2B4A);
background: #fff;
border: 1px solid var(--color-border, #EEF1F6);
border-radius: 999px;
padding: 8px 14px;
}
.beauty-v1 .bh-hero-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0 0 18px;
}
/* PET product template: left-aligned copy and transparent product cutout */
.beauty-v1 .bh-hero-grid { column-gap: clamp(40px, 6vw, 86px); padding: 0 !important; }
.beauty-v1 .bh-hero { min-height: 460px; padding: 34px 0; }
.beauty-v1 .bh-hero-text { align-items: flex-start; text-align: left; padding: 14px 0; gap: 8px !important; }
.beauty-v1 .bh-hero-text .eyebrow { justify-content: flex-start; text-align: left; }
.beauty-v1 .bh-hero-text h1 { max-width: 650px; font-size: clamp(40px, 3vw, 48px); line-height: 1.04; letter-spacing: -.035em; text-align: left; margin: 8px 0 12px; }
.beauty-v1 .bh-hero-lead { max-width: 590px; font-size: 18px; line-height: 1.65; text-align: left; margin: 0 0 22px; }
.beauty-v1 .bh-pills { justify-content: flex-start; max-width: 610px; margin-bottom: 16px; }
.beauty-v1 .bh-pills > .elementor-element { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; line-height: 1.5; }
.beauty-v1 .bh-pills > .elementor-element::before { content: '✓'; color: #F59E0B; font-weight: 800; }
.beauty-v1 .bh-hero-trust { text-align: left; }
.beauty-v1 .bh-hero-fig { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
.beauty-v1 .bh-hero-fig img { width: 100%; height: 340px; object-fit: contain; }
.beauty-v1 .bh-struct-fig { background: #fff; border: 1px solid #E6EAF0; border-radius: 18px; padding: 24px; display: flex; align-items: center; justify-content: center; }
.beauty-v1 .bh-struct-fig .elementor-widget-image { width: 100%; }
.beauty-v1 .bh-struct-fig img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) {
.beauty-v1 .bh-hero { min-height: 0 !important; padding: 24px 0 32px !important; }
.beauty-v1 .bh-hero-grid { gap: 18px !important; }
.beauty-v1 .bh-hero-text { padding: 0 !important; gap: 4px !important; }
.beauty-v1 .bh-hero-text h1 { font-size: 32px !important; margin: 0 0 8px !important; }
.beauty-v1 .bh-hero-lead { font-size: 16px !important; line-height: 1.55 !important; margin: 0 0 14px !important; }
.beauty-v1 .bh-hero-fig { padding-bottom: 16px !important; }
.beauty-v1 .bh-hero .bh-hero-fig img { width: 78% !important; max-width: 78% !important; height: auto !important; margin: 0 auto !important; }
}
.beauty-v1 .bh-hero-trust {
font-size: 13px;
color: #D7DCE5;
}
.beauty-v1 .bh-hero-trust .dot { color: #16A34A; font-size: 9px; vertical-align: middle; margin-right: 4px; }
.beauty-v1 .bh-hero .eyebrow-blue { color: #FBBF24; }
.beauty-v1 .bh-spec-chip {
position: absolute;
bottom: 18px;
left: 18px;
right: 18px;
background: linear-gradient(135deg, #1A2B4A 0%, #2C4A7A 100%);
color: #fff;
text-align: center;
padding: 12px 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
}
/* ============================================================
3. SECTION HEAD (shared)
============================================================ */
.beauty-v1 .bh-head {
text-align: center;
max-width: 760px;
margin: 0 auto 28px;
/* eyebrow 标签已删，Elementor 容器默认 10px padding 是死空间，归零 */
padding-top: 0;
}
.beauty-v1 .bh-head-left { text-align: left; margin-left: 0; margin-right: 0; }
.beauty-v1 .bh-head h2 {
font-size: 36px;
line-height: 1.18;
font-weight: 800;
letter-spacing: -.02em;
margin: 0 0 12px;
}
.beauty-v1 .bh-sub {
font-size: 16px;
line-height: 1.7;
color: #2D3748;
max-width: 64ch;
margin: 0 auto;
}
.beauty-v1 .bh-head-left .bh-sub { margin-left: 0; margin-right: 0; }
/* ============================================================
4. APPLICATION SECTION (pulled forward)
============================================================ */
.beauty-v1 .bh-app {
background: #fff;
padding: 56px 0;
}
.beauty-v1 .bh-scenarios {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
.beauty-v1 .bh-scenario {
background: #fff;
border: 1px solid var(--color-border, #EEF1F6);
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .2s ease, box-shadow .2s ease;
}
.beauty-v1 .bh-scenario:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px -16px rgba(17,24,39,.22);
}
.beauty-v1 .bh-scenario-media {
position: relative;
aspect-ratio: 16 / 10;
background: #0F1A2E;
overflow: hidden;
}
.beauty-v1 .bh-scenario-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* branded placeholder for scenarios without a photo yet */
.beauty-v1 .bh-scenario-media.bh-ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background: linear-gradient(135deg, #1A2B4A 0%, #2C4A7A 100%);
color: #fff;
}
.beauty-v1 .bh-ph svg { width: 46px; height: 46px; opacity: .92; }
.beauty-v1 .bh-ph-label {
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
padding: 4px 14px;
border: 1px solid rgba(255,255,255,.4);
border-radius: 999px;
}
.beauty-v1 .bh-scenario-tag {
position: absolute;
top: 12px;
left: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
background: rgba(17,24,39,.8);
color: #fff;
}
.beauty-v1 .bh-scenario-tag--ph {
background: rgba(255,255,255,.16);
border: 1px solid rgba(255,255,255,.45);
}
.beauty-v1 .bh-scenario-body {
padding: 20px 20px 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.beauty-v1 .bh-scenario-num {
font-size: 12px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-accent, #B22222);
}
.beauty-v1 .bh-scenario-body h3 {
margin: 0;
font-size: 17px;
color: var(--color-primary, #1A2B4A);
}
.beauty-v1 .bh-scenario-body p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--color-muted, #5B6B86);
}
/* ============================================================
5. STRUCTURE SECTION (real exploded photo + key benefit list)
============================================================ */
.beauty-v1 .bh-structure {
background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
padding: 56px 0;
border-top: 1px solid var(--color-border, #EEF1F6);
border-bottom: 1px solid var(--color-border, #EEF1F6);
}
.beauty-v1 .bh-struct-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 48px;
align-items: center;
}
.beauty-v1 .bh-struct-fig {
margin: 0;
border-radius: 20px;
overflow: hidden;
background: #fff;
box-shadow: 0 16px 40px -12px rgba(26,43,74,.18);
border: 1px solid var(--color-border, #EEF1F6);
}
.beauty-v1 .bh-struct-fig img { width: 100%; height: auto; display: block; }
.beauty-v1 .bh-struct-points {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 16px;
}
.beauty-v1 .bh-struct-points li {
display: flex;
gap: 16px;
padding: 18px 20px;
background: #fff;
border-radius: 12px;
border: 1px solid var(--color-border, #EEF1F6);
font-size: 15px;
line-height: 1.55;
}
.beauty-v1 .bh-struct-points li b { font-weight: 700; color: var(--color-primary, #1A2B4A); }
.beauty-v1 .bh-num {
display: inline-block;
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--color-primary, #1A2B4A);
color: #fff;
font-size: 14px;
font-weight: 800;
text-align: center;
line-height: 36px;
}
/* ============================================================
6. PRODUCT SERIES (6 real photos)
============================================================ */
.beauty-v1 .bh-series {
background: #fff;
padding: 56px 0;
}
.beauty-v1 .bh-series-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.beauty-v1 .bh-series-card {
background: #fff;
border: 1px solid var(--color-border, #EEF1F6);
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .2s, box-shadow .2s;
}
.beauty-v1 .bh-series-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px -10px rgba(17,24,39,.2);
}
.beauty-v1 .bh-series-card img {
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
background: #F5F7FA;
}
.beauty-v1 .bh-series-card h3 {
font-size: 17px;
font-weight: 700;
margin: 18px 20px 8px;
}
.beauty-v1 .bh-series-card p {
font-size: 14px;
line-height: 1.6;
color: #2D3748;
margin: 0 20px 16px;
flex-grow: 1;
}
.beauty-v1 .bh-series-card .btn { margin: 0 20px 20px; align-self: flex-start; }
.beauty-v1 .bh-series-card--accent {
border: 2px solid var(--color-accent, #B22222);
background: linear-gradient(180deg, #FFF8F8 0%, #FFFFFF 100%);
}
.beauty-v1 .bh-series-badge {
position: absolute;
top: 12px;
right: 12px;
background: var(--color-accent, #B22222);
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
}
.beauty-v1 .bh-series-card--accent { position: relative; }
/* ============================================================
7. HOW TO CHOOSE (interactive tab)
============================================================ */
.beauty-v1 .bh-guide {
background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
padding: 56px 0;
}
.beauty-v1 .bh-guide-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 24px;
border-bottom: 1px solid var(--color-border, #EEF1F6);
padding-bottom: 16px;
}
.beauty-v1 .bh-tab {
background: #fff;
border: 1px solid var(--color-border, #EEF1F6);
color: var(--color-primary, #1A2B4A);
font-size: 14px;
font-weight: 600;
padding: 10px 18px;
border-radius: 999px;
cursor: pointer;
transition: background .15s, border .15s, color .15s;
}
.beauty-v1 .bh-tab:hover { border-color: #2C4A7A; color: #2C4A7A; }
.beauty-v1 .bh-tab.active {
background: var(--color-primary, #1A2B4A);
border-color: var(--color-primary, #1A2B4A);
color: #fff;
}
.beauty-v1 .bh-guide-table, .beauty-v1 .bh-specs-table, .beauty-v1 .bh-bonds-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #fff;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--color-border, #EEF1F6);
}
.beauty-v1 .bh-guide-table th, .beauty-v1 .bh-specs-table th, .beauty-v1 .bh-bonds-table th {
background: var(--color-primary, #1A2B4A);
color: #fff;
font-size: 13px;
font-weight: 700;
text-align: left;
padding: 14px 18px;
}
.beauty-v1 .bh-guide-table td, .beauty-v1 .bh-specs-table td, .beauty-v1 .bh-bonds-table td {
padding: 14px 18px;
font-size: 14.5px;
color: var(--color-primary, #1A2B4A);
border-top: 1px solid var(--color-border, #EEF1F6);
}
.beauty-v1 .bh-guide-table tbody tr:nth-child(odd) td,
.beauty-v1 .bh-specs-table tbody tr:nth-child(odd) td,
.beauty-v1 .bh-bonds-table tbody tr:nth-child(odd) td { background: #F5F7FA; }
.beauty-v1 .bh-guide-table tbody tr:hover td,
.beauty-v1 .bh-specs-table tbody tr:hover td,
.beauty-v1 .bh-bonds-table tbody tr:hover td { background: var(--color-bg-blue, #E8F1FA); }
/* ============================================================
8. CTA BAND — DEEP NAVY (theme-aligned, NO big red block)
============================================================ */
.beauty-v1 .bh-cta-band {
background:
linear-gradient(135deg, #1A2B4A 0%, #2C4A7A 100%);
padding: 64px 0;
color: #fff;
position: relative;
overflow: hidden;
}
.beauty-v1 .bh-cta-band::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 50%, rgba(255,255,255,.08) 0%, transparent 30%),
radial-gradient(circle at 80% 30%, rgba(255,255,255,.06) 0%, transparent 25%);
pointer-events: none;
}
.beauty-v1 .bh-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
position: relative;
z-index: 1;
}
.beauty-v1 .bh-cta-text { max-width: 64ch; }
.beauty-v1 .bh-cta-text h2 {
font-size: 30px;
font-weight: 800;
letter-spacing: -.02em;
margin: 8px 0 10px;
color: #fff;
}
.beauty-v1 .bh-cta-text p {
font-size: 15px;
color: rgba(255,255,255,.85);
margin: 0;
}
.beauty-v1 .btn-primary {
background: var(--color-accent, #B22222);
color: #fff;
font-weight: 700;
}
.beauty-v1 .btn-primary:hover { background: var(--color-accent-bright, #B22222); }
.beauty-v1 .btn-ghost {
background: transparent;
color: var(--color-primary, #1A2B4A);
border: 1.5px solid var(--color-border, #EEF1F6);
}
.beauty-v1 .bh-cta-band .btn-ghost {
border: 1.5px solid rgba(255,255,255,.4);
color: #fff;
}
.beauty-v1 .btn-lg { padding: 16px 32px; font-size: 16px; }
.beauty-v1 .btn-sm { padding: 9px 18px; font-size: 13px; }
/* ============================================================
9. SUPPLY FORMATS — three real photos
============================================================ */
.beauty-v1 .bh-formats {
background: #fff;
padding: 56px 0;
}
.beauty-v1 .bh-formats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.beauty-v1 .bh-fmt-card {
background: #fff;
border: 1px solid var(--color-border, #EEF1F6);
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .2s, box-shadow .2s;
}
.beauty-v1 .bh-fmt-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px -10px rgba(17,24,39,.2);
}
.beauty-v1 .bh-fmt-card img {
width: 100%;
height: 220px;
object-fit: cover;
background: #F5F7FA;
}
.beauty-v1 .bh-fmt-card .eyebrow { margin: 22px 24px 4px; }
.beauty-v1 .bh-fmt-card h3 {
font-size: 22px;
font-weight: 800;
margin: 0 24px 8px;
}
.beauty-v1 .bh-fmt-card p {
font-size: 14.5px;
line-height: 1.6;
color: #2D3748;
margin: 0 24px 18px;
}
.beauty-v1 .bh-fmt-list {
list-style: none;
padding: 0 24px;
margin: 0 0 22px;
display: grid;
gap: 8px;
}
.beauty-v1 .bh-fmt-list li {
font-size: 14px;
color: var(--color-primary, #1A2B4A);
padding-left: 18px;
position: relative;
}
.beauty-v1 .bh-fmt-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: #16A34A;
font-weight: 800;
}
.beauty-v1 .bh-fmt-card .btn { margin: auto 24px 22px; align-self: flex-start; }
/* ============================================================
10. SPECS — expandable details
============================================================ */
.beauty-v1 .bh-specs, .beauty-v1 .bh-bonds {
background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
padding: 56px 0;
}
.beauty-v1 .bh-bonds { background: #fff; }
.beauty-v1 .bh-specs details summary, .beauty-v1 .bh-bonds details summary {
cursor: pointer;
font-size: 13px;
font-weight: 700;
color: #2C4A7A;
list-style: none;
}
.beauty-v1 .bh-specs details summary::after, .beauty-v1 .bh-bonds details summary::after {
content: ' ⓘ';
font-size: 13px;
}
/* ============================================================
11. TRUST — real cert photo + stats
============================================================ */
.beauty-v1 .bh-trust {
background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
padding: 56px 0;
border-top: 1px solid var(--color-border, #EEF1F6);
}
.beauty-v1 .bh-trust-fig {
margin: 0 0 36px;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--color-border, #EEF1F6);
box-shadow: 0 12px 30px -10px rgba(26,43,74,.15);
}
.beauty-v1 .bh-trust-fig img { width: 100%; height: auto; display: block; }
.beauty-v1 .bh-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
background: #fff;
border: 1px solid var(--color-border, #EEF1F6);
border-radius: 16px;
padding: 24px;
}
.beauty-v1 .bh-stat {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 12px 8px;
border-right: 1px solid var(--color-border, #EEF1F6);
}
.beauty-v1 .bh-stat:last-child { border-right: none; }
.beauty-v1 .bh-stat b {
font-size: 32px;
font-weight: 800;
color: var(--color-accent, #B22222);
letter-spacing: -.02em;
line-height: 1;
margin-bottom: 6px;
}
.beauty-v1 .bh-stat span {
font-size: 13px;
color: #2D3748;
}
/* ============================================================
12. RELATED PRODUCTS
============================================================ */
.beauty-v1 .bh-rel {
background: #fff;
padding: 56px 0;
}
.beauty-v1 .bh-rel-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.beauty-v1 .bh-rel-card {
display: block;
background: #fff;
border: 1px solid var(--color-border, #EEF1F6);
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform .2s, box-shadow .2s;
}
.beauty-v1 .bh-rel-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px -8px rgba(17,24,39,.2);
}
.beauty-v1 .bh-rel-card img {
width: 100%;
height: 140px;
object-fit: cover;
background: #F5F7FA;
}
.beauty-v1 .bh-rel-card h3 {
font-size: 15px;
font-weight: 700;
margin: 14px 16px 4px;
}
.beauty-v1 .bh-rel-card p {
font-size: 12.5px;
color: #2D3748;
margin: 0 16px 14px;
}
.beauty-v1 .bh-rel-card h3 a { color: inherit; text-decoration: none; }
.beauty-v1 .bh-rel-card .btn { margin: 0 16px 16px; align-self: flex-start; }
/* ============================================================
13. QUOTE FORM
============================================================ */
.beauty-v1 .bh-quote {
/* 交替原则：与 .section-alt 同色实底（#EEF1F6），上方 rel 为白底 → 白/灰硬交替；
background-color 不触发 Elementor 背景图懒加载，e-no-lazyload 豁免类可保留以防后续加渐变 */
background: #EEF1F6;
padding: 56px 0 72px;
}
.beauty-v1 .bh-guarantee-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 22px;
margin: 0 0 32px;
font-size: 14px;
font-weight: 600;
color: var(--color-primary, #1A2B4A);
}
.beauty-v1 .bh-guarantee-strip span {
background: #fff;
border: 1px solid var(--color-border, #EEF1F6);
border-radius: 999px;
padding: 10px 18px;
}
.beauty-v1 .bh-form-more summary {
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: #2C4A7A;
list-style: none;
margin: 14px 0 6px;
}
.beauty-v1 .bh-form-more summary::-webkit-details-marker { display: none; }
.beauty-v1 .bh-form-more summary::before { content: '+ '; font-weight: 800; }
.beauty-v1 .bh-form-more[open] summary::before { content: '− '; }
.beauty-v1 .bh-form-trust {
margin: 14px 0 0;
font-size: 11.5px;
letter-spacing: .08em;
color: #6B7A8F;
text-align: center;
}
.beauty-v1 .btn-block { width: 100%; margin-top: 6px; }
.beauty-v1 .bh-info-tag {
margin: 18px 0 0;
text-align: center;
font-size: 11.5px;
letter-spacing: .08em;
color: #6B7A8F;
font-weight: 600;
}
/* ---- quote form fields (flat structure) ---- */
.beauty-v1 .contact-wrap .form-card label {
display: flex;
flex-direction: column;
gap: 7px;
font-size: 14px;
font-weight: 700;
color: var(--color-primary, #1A2B4A);
margin: 0 0 16px;
}
.beauty-v1 .contact-wrap .form-card input,
.beauty-v1 .contact-wrap .form-card select,
.beauty-v1 .contact-wrap .form-card textarea {
font: inherit;
padding: 12px 14px;
border: 1.5px solid var(--color-border, #EEF1F6);
border-radius: var(--radius-sm, 10px);
background: #fff;
color: var(--color-text, #1A2B4A);
transition: var(--t, .2s);
width: 100%;
box-sizing: border-box;
}
.beauty-v1 .contact-wrap .form-card input:focus,
.beauty-v1 .contact-wrap .form-card select:focus,
.beauty-v1 .contact-wrap .form-card textarea:focus {
outline: none;
border-color: var(--color-accent-bright, #B22222);
box-shadow: 0 0 0 3px rgba(178, 34, 34, .14);
}
.beauty-v1 .contact-wrap .form-card textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.beauty-v1 .contact-wrap .form-card .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 0 0 16px;
}
.beauty-v1 .contact-wrap .form-card .form-row label { margin-bottom: 0; }
.beauty-v1 .contact-wrap .info-ico { color: var(--color-accent-bright, #B22222); font-size: 20px; }
/* ============================================================
14. CHAT BUBBLE
============================================================ */
.beauty-v1 .bh-chat {
position: fixed !important;
right: 20px !important;
bottom: 20px !important;
left: auto !important;
top: auto !important;
width: auto !important;
max-width: 280px;
z-index: 60 !important;
display: inline-flex !important;
background: var(--color-accent, #B22222);
color: #fff;
border-radius: 999px;
padding: 10px 16px 10px 12px;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 10px 24px -6px rgba(139,26,26,.5);
transition: transform .2s;
}
.beauty-v1 .bh-chat:hover { transform: translateY(-2px); color: #fff; }
/* ============================================================
14b. ALTERNATING BACKGROUND (section-alt)
============================================================ */
.beauty-v1 .section-alt { background: var(--color-bg-alt, #EEF1F6); }
/* ============================================================
15. RESPONSIVE
============================================================ */
@media (max-width: 960px) {
.beauty-v1 .bh-hero { padding: 64px 0 56px; }
.beauty-v1 .bh-hero-grid,
.beauty-v1 .bh-struct-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.beauty-v1 .bh-scenarios { grid-template-columns: repeat(2, 1fr); }
.beauty-v1 .bh-hero h1 { font-size: 38px; }
.beauty-v1 .bh-head h2 { font-size: 28px; }
.beauty-v1 .bh-series-grid,
.beauty-v1 .bh-formats-grid { grid-template-columns: repeat(2, 1fr); }
.beauty-v1 .bh-stats { grid-template-columns: repeat(2, 1fr); }
.beauty-v1 .bh-stat:nth-child(2) { border-right: none; }
.beauty-v1 .bh-rel-grid { grid-template-columns: repeat(2, 1fr); }
.beauty-v1 .bh-cta-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 560px) {
.beauty-v1 .bh-hero h1 { font-size: 30px; }
.beauty-v1 .bh-head h2 { font-size: 24px; }
.beauty-v1 .bh-series-grid,
.beauty-v1 .bh-formats-grid { grid-template-columns: 1fr; }
.beauty-v1 .bh-scenarios { grid-template-columns: 1fr; }
.beauty-v1 .bh-rel-grid { grid-template-columns: 1fr; }
/* stats section container shrinks to viewport width on mobile */
body.beauty-v1 .elementor-20,
body.beauty-v1 .e-con:has(> .container .bh-stats) > .container.e-con-full,
body.beauty-v1 .e-con:has(> .container .bh-stats) > .container {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
body.beauty-v1 .e-con:has(> .container .bh-stats) > .container {
padding-left: 16px !important;
padding-right: 16px !important;
}
.beauty-v1 .bh-stats {
grid-template-columns: 1fr !important;
gap: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
.beauty-v1 .bh-stat {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
align-items: center !important;
border-bottom: 1px solid var(--color-border, #EEF1F6) !important;
min-height: auto !important;
padding: 6px 0 !important;
min-width: 0 !important;
overflow: hidden !important;
word-break: break-word !important;
text-align: left !important;
}
.beauty-v1 .bh-stat:last-child { border-bottom: none; }
.beauty-v1 .bh-stat .elementor-widget-text-editor { margin: 0 !important; width: auto !important; }
.beauty-v1 .bh-stat .elementor-widget-text-editor:first-child {
font-size: 20px !important;
font-weight: 700 !important;
color: var(--color-accent, #B22222) !important;
flex: 0 0 auto !important;
}
.beauty-v1 .bh-stat .elementor-widget-text-editor:last-child {
font-size: 12px !important;
line-height: 1.4 !important;
color: #4a5568 !important;
flex: 1 1 auto !important;
}
}
/* ============================================================
15. CARD UNIFORMITY — 每个卡片网格内高度严格统一
依据浏览器实测：bh-scenario 6 卡文本区 4~5 行(106~132px)导致两行
卡片高度 479/453 不齐；按钮因 flex 子项是 widget 容器、p 的
flex-grow 不生效而无法贴底。
============================================================ */
/* 1) 应用卡：6 张卡正文区预留统一高度（按最长 5 行 ≈132px），保证每行等高 */
.beauty-v1 .bh-scenario-body .elementor-widget-text-editor {
min-height: 132px;
}
/* 2) 按钮贴底：family / delivery / related 卡的 CTA 统一沉底对齐。
Elementor 按钮类名在 widget 容器上（.elementor-widget-button），
此前 .bh-*-card .btn 的 flex-grow/auto 对 无效——这才是按钮
高度不齐的根因。 */
.beauty-v1 .bh-series-card > .elementor-widget-button,
.beauty-v1 .bh-fmt-card > .elementor-widget-button,
.beauty-v1 .bh-rel-card > .elementor-widget-button {
margin-top: auto;
}
/* 相关卡底部规格行：弱化处理，与应用描述拉开层次 */
.beauty-v1 .bh-rel-card .bh-rel-spec p {
color: #9AA4B2;
font-size: 12px;
margin: 0 16px 12px;
letter-spacing: .01em;
}
/* ============================================================
16. RELATED CARD COPY — 描述 / Applications / 编号列表排版
============================================================ */
.beauty-v1 .bh-rel-card .bh-rel-desc {
margin: 0 16px 10px;
font-size: 12.5px;
line-height: 1.55;
color: #2D3748;
}
.beauty-v1 .bh-rel-card .bh-rel-apps-title {
margin: 0 16px 4px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--color-accent, #B22222);
}
.beauty-v1 .bh-rel-card ol.bh-rel-apps {
margin: 0 16px 14px;
padding-left: 18px;
font-size: 12px;
line-height: 1.5;
color: #4A5568;
}
.beauty-v1 .bh-rel-card ol.bh-rel-apps li { margin-bottom: 2px; }
.beauty-v1 .bh-rel-card ol.bh-rel-apps li::marker {
color: var(--color-accent, #B22222);
font-weight: 700;
}
/* ============================================================
17. MOBILE FULL-WIDTH STACKED CARD LAYOUT
2026-09-09: one card per row on mobile, image on top,
text below, full-width images without overflow.
Cards height follows content — no forced 100vh.
============================================================ */
@media (max-width: 767px) {
/* prevent any horizontal scrollbar from oversized children */
.beauty-v1 { overflow-x: hidden; }
.beauty-v1 .elementor-20 {
width: 100% !important;
max-width: 100vw !important;
display: block !important;
overflow-x: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
.beauty-v1 img, .beauty-v1 video { max-width: 100%; height: auto; }
/* force every card grid to a single column */
.beauty-v1 .bh-scenarios,
.beauty-v1 .bh-series-grid,
.beauty-v1 .bh-formats-grid,
.beauty-v1 .bh-rel-grid,
.beauty-v1 .bh-struct-grid {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
/* make every grid child full width */
.beauty-v1 .bh-scenarios > *,
.beauty-v1 .bh-series-grid > *,
.beauty-v1 .bh-formats-grid > *,
.beauty-v1 .bh-rel-grid > *,
.beauty-v1 .bh-struct-grid > * {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
/* card = full-width row, vertical flex, image top / text bottom */
.beauty-v1 .bh-scenario,
.beauty-v1 .bh-series-card,
.beauty-v1 .bh-fmt-card,
.beauty-v1 .bh-rel-card,
.beauty-v1 .bh-struct-fig {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
max-width: 100vw !important;
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
border-bottom: 1px solid #EEF1F6 !important;
}
.beauty-v1 .bh-scenario:last-child,
.beauty-v1 .bh-series-grid > *:last-child,
.beauty-v1 .bh-formats-grid > *:last-child,
.beauty-v1 .bh-rel-grid > *:last-child,
.beauty-v1 .bh-struct-grid > *:last-child { border-bottom: none !important; }
/* images: full width, natural height, no clipping, no vertical stretching */
.beauty-v1 .bh-scenario img,
.beauty-v1 .bh-series-card img,
.beauty-v1 .bh-fmt-card img,
.beauty-v1 .bh-rel-card img,
.beauty-v1 .bh-struct-fig img,
.beauty-v1 .bh-hero-fig img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 auto;
object-fit: contain !important;
}
/* image container: full width, hug the image, no forced height/centering */
.beauty-v1 .bh-scenario-media,
.beauty-v1 .bh-series-card > .elementor-widget-image,
.beauty-v1 .bh-fmt-card > .elementor-widget-image,
.beauty-v1 .bh-rel-card > .elementor-widget-image,
.beauty-v1 .bh-struct-fig .elementor-widget-image {
flex: 0 0 auto !important;
display: block !important;
width: 100% !important;
background: #F5F7FA !important;
overflow: hidden;
}
/* hero image container: keep the deep-blue brand background so the
transparent PNG blends correctly — do NOT apply the light gray here. */
.beauty-v1 .bh-hero-fig .elementor-widget-image {
background: transparent !important;
flex: 0 0 auto !important;
display: block !important;
width: 100% !important;
overflow: hidden;
}
/* body / text sits below the image with compact padding */
.beauty-v1 .bh-scenario-body,
.beauty-v1 .bh-series-card > .elementor-widget:not(.elementor-widget-image),
.beauty-v1 .bh-fmt-card > .elementor-widget:not(.elementor-widget-image),
.beauty-v1 .bh-rel-card > .elementor-widget:not(.elementor-widget-image) {
flex: 0 0 auto !important;
padding: 8px 16px 12px !important;
}
/* tighten gaps between image, title, paragraph, list and button */
.beauty-v1 .bh-scenario-media,
.beauty-v1 .bh-series-card > .elementor-widget-image,
.beauty-v1 .bh-fmt-card > .elementor-widget-image,
.beauty-v1 .bh-rel-card > .elementor-widget-image,
.beauty-v1 .bh-struct-fig .elementor-widget-image {
margin-bottom: 0 !important;
}
.beauty-v1 .bh-scenario-body h3,
.beauty-v1 .bh-scenario-body h4,
.beauty-v1 .bh-series-card > .elementor-widget:not(.elementor-widget-image) h3,
.beauty-v1 .bh-series-card > .elementor-widget:not(.elementor-widget-image) h4,
.beauty-v1 .bh-fmt-card > .elementor-widget:not(.elementor-widget-image) h3,
.beauty-v1 .bh-fmt-card > .elementor-widget:not(.elementor-widget-image) h4,
.beauty-v1 .bh-rel-card > .elementor-widget:not(.elementor-widget-image) h3,
.beauty-v1 .bh-rel-card > .elementor-widget:not(.elementor-widget-image) h4 {
margin: 0 0 6px !important;
line-height: 1.3;
}
.beauty-v1 .bh-scenario-body p,
.beauty-v1 .bh-series-card > .elementor-widget:not(.elementor-widget-image) p,
.beauty-v1 .bh-fmt-card > .elementor-widget:not(.elementor-widget-image) p,
.beauty-v1 .bh-rel-card > .elementor-widget:not(.elementor-widget-image) p {
margin: 0 0 8px !important;
line-height: 1.55;
}
.beauty-v1 .bh-scenario-body ol,
.beauty-v1 .bh-scenario-body ul,
.beauty-v1 .bh-series-card > .elementor-widget:not(.elementor-widget-image) ol,
.beauty-v1 .bh-series-card > .elementor-widget:not(.elementor-widget-image) ul,
.beauty-v1 .bh-fmt-card > .elementor-widget:not(.elementor-widget-image) ol,
.beauty-v1 .bh-fmt-card > .elementor-widget:not(.elementor-widget-image) ul,
.beauty-v1 .bh-rel-card > .elementor-widget:not(.elementor-widget-image) ol,
.beauty-v1 .bh-rel-card > .elementor-widget:not(.elementor-widget-image) ul {
margin: 0 0 8px !important;
padding-left: 18px !important;
}
.beauty-v1 .bh-scenario-body .elementor-button,
.beauty-v1 .bh-series-card > .elementor-widget:not(.elementor-widget-image) .elementor-button,
.beauty-v1 .bh-fmt-card > .elementor-widget:not(.elementor-widget-image) .elementor-button,
.beauty-v1 .bh-rel-card > .elementor-widget:not(.elementor-widget-image) .elementor-button {
margin-top: 2px !important;
}
.beauty-v1 .bh-rel-card > .elementor-widget:not(.elementor-widget-image):last-child {
padding-bottom: 12px !important;
}
/* related product cards are anchors — keep them block-level columns */
.beauty-v1 a.bh-rel-card,
.beauty-v1 .bh-rel-card {
display: flex !important;
flex-direction: column !important;
text-decoration: none !important;
}
/* spec tables: keep native table layout, scroll horizontally on mobile */
.beauty-v1 .bh-specs .table-wrap,
.beauty-v1 .bh-bonds .table-wrap,
.beauty-v1 .bh-guide .table-wrap {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
padding: 0 !important;
}
.beauty-v1 .bh-specs-table,
.beauty-v1 .bh-bonds-table,
.beauty-v1 .bh-guide-table {
min-width: 640px !important;
width: 100% !important;
table-layout: auto;
}
.beauty-v1 .bh-specs-table th,
.beauty-v1 .bh-specs-table td,
.beauty-v1 .bh-bonds-table th,
.beauty-v1 .bh-bonds-table td,
.beauty-v1 .bh-guide-table th,
.beauty-v1 .bh-guide-table td {
padding: 12px 14px !important;
white-space: nowrap;
}
/* tighten section head and section padding on mobile */
.beauty-v1 .bh-specs,
.beauty-v1 .bh-bonds,
.beauty-v1 .bh-quote,
.beauty-v1 .bh-app,
.beauty-v1 .bh-series,
.beauty-v1 .bh-formats,
.beauty-v1 .bh-rel,
.beauty-v1 .bh-trust,
.beauty-v1 .bh-guide,
.beauty-v1 .bh-struct {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.beauty-v1 .bh-head {
margin-bottom: 16px !important;
max-width: 100% !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
.beauty-v1 .bh-head h2 { font-size: 26px; }
.beauty-v1 .bh-sub {
max-width: 100% !important;
font-size: 15px;
line-height: 1.55;
}
/* quote form: force full width, kill nested container side margins */
.beauty-v1 .bh-quote .container,
.beauty-v1 .bh-quote .contact-wrap,
.beauty-v1 .bh-quote .contact-layout,
.beauty-v1 .bh-quote .form-card {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box;
}
.beauty-v1 .bh-quote .form-card {
padding: 16px !important;
}
.beauty-v1 .bh-quote .wpcf7-form,
.beauty-v1 .bh-quote .cta-form,
.beauty-v1 .bh-quote .form-grid,
.beauty-v1 .bh-quote .field,
.beauty-v1 .bh-quote .field-full {
width: 100% !important;
max-width: 100% !important;
}
/* How to Select step cards are an inline grid; force 1 column on mobile
so each step is a full-width card */
.beauty-v1 .bh-guide .elementor-widget-text-editor > div[style*="grid"] {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.beauty-v1 .bh-guide .elementor-widget-text-editor > div[style*="grid"] > div {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
/* remove extra margins that can push content off-screen */
.beauty-v1 .bh-scenario,
.beauty-v1 .bh-series-card,
.beauty-v1 .bh-fmt-card,
.beauty-v1 .bh-rel-card { margin: 0 !important; }
}
/* helper: keep the CTA sentence from sticking to the bold prefix */
.selection-cta strong { margin-right: 0.35em; }
/* hide the floating "Chat with us" widget on product pages */
.bh-chat { display: none !important; }
/* GEO: "Last updated" stamp injected under H1 */
.beauty-v1 .bh-last-updated {
font-size: 13px;
color: #6b7280;
margin: 4px 0 14px;
letter-spacing: 0.01em;
}
.beauty-v1 .bh-last-updated::before {
content: "· ";
color: #c2c8d0;
}