À propos de nous
* ================================================================
LUMIVIE — CSS Shopify Personnalisé
----------------------------------------------------------------
COMMENT UTILISER :
1. Dans Shopify > Boutique en ligne > Thèmes > Personnaliser
2. Cliquez sur "CSS additionnel" (en bas à gauche)
3. Collez TOUT ce fichier
4. Pour changer couleurs/polices : modifiez uniquement la section
"VARIABLES — MODIFIEZ ICI" ci-dessous
================================================================ */
/* ================================================================
✏️ VARIABLES — MODIFIEZ ICI (couleurs, polices, arrondis)
================================================================ */
:root {
/* --- Couleurs principales --- */
--lv-color-primary: #8B6914; /* Or chaud — boutons, accents */
--lv-color-primary-light: #C9A96E; /* Or clair — hover, dégradés */
--lv-color-primary-dark: #5C4209; /* Or foncé — texte sur clair */
/* --- Couleurs de fond --- */
--lv-bg-body: #FDFAF5; /* Crème ivoire — fond général */
--lv-bg-section: #F5F0E8; /* Beige doux — sections alternées */
--lv-bg-dark: #1C1A17; /* Brun très foncé — footer, CTA */
--lv-bg-card: #FFFFFF; /* Blanc — cartes produits */
/* --- Couleurs texte --- */
--lv-text-primary: #1C1A17; /* Presque noir — titres */
--lv-text-secondary: #5A5240; /* Brun moyen — corps de texte */
--lv-text-muted: #9C9080; /* Gris beige — sous-titres */
--lv-text-light: #FDFAF5; /* Crème — texte sur fond sombre */
/* --- Couleur accentuation produit --- */
--lv-accent-belt: #C9662D; /* Terracotta — ceinture chauffante */
--lv-accent-helmet: #6B5B9E; /* Violet profond — casque infrarouge */
/* --- Typographie --- */
--lv-font-title: 'Cormorant Garamond', Georgia, serif; /* Élégant */
--lv-font-body: 'Inter', system-ui, sans-serif; /* Lisible */
--lv-font-size-base: 16px;
/* --- Arrondis --- */
--lv-radius-sm: 8px;
--lv-radius-md: 16px;
--lv-radius-lg: 24px;
--lv-radius-pill: 999px;
/* --- Ombres --- */
--lv-shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
--lv-shadow-md: 0 8px 32px rgba(0,0,0,0.10);
--lv-shadow-lg: 0 20px 60px rgba(0,0,0,0.14);
/* --- Transitions --- */
--lv-transition: 0.3s ease;
/* --- Conteneur --- */
--lv-container-width: 1200px;
--lv-container-padding: 0 24px;
}
/* ================================================================
BASE & RESET
================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--lv-font-body);
font-size: var(--lv-font-size-base);
background-color: var(--lv-bg-body);
color: var(--lv-text-primary);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
font-family: var(--lv-font-title);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h1 em, h2 em { font-style: italic; color: var(--lv-color-primary); }
p { color: var(--lv-text-secondary); line-height: 1.75; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
/* ================================================================
CONTENEUR
================================================================ */
.lv-container {
max-width: var(--lv-container-width);
margin: 0 auto;
padding: var(--lv-container-padding);
}
/* ================================================================
BARRE D'ANNONCE
================================================================ */
.lv-announcement-bar {
background: var(--lv-color-primary);
color: #fff;
text-align: center;
padding: 10px 20px;
font-size: 0.83rem;
font-weight: 500;
letter-spacing: 0.02em;
}
/* ================================================================
HEADER / NAVIGATION
================================================================ */
.lv-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(253,250,245,0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(139,105,20,0.12);
transition: box-shadow var(--lv-transition);
}
.lv-header--scrolled { box-shadow: var(--lv-shadow-md); }
.lv-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
gap: 24px;
}
.lv-logo {
font-family: var(--lv-font-title);
font-size: 1.6rem;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--lv-text-primary);
text-transform: uppercase;
}
.lv-logo--light { color: var(--lv-text-light); }
.lv-header__nav,
.lv-header__actions { display: flex; align-items: center; gap: 28px; }
.lv-nav__link {
font-size: 0.875rem;
font-weight: 500;
color: var(--lv-text-secondary);
transition: color var(--lv-transition);
}
.lv-nav__link:hover { color: var(--lv-color-primary); }
/* ================================================================
BOUTONS
================================================================ */
.lv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 28px;
border-radius: var(--lv-radius-pill);
font-family: var(--lv-font-body);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
border: 2px solid transparent;
transition: all var(--lv-transition);
}
.lv-btn--primary {
background: var(--lv-color-primary);
color: #fff;
border-color: var(--lv-color-primary);
}
.lv-btn--primary:hover {
background: var(--lv-color-primary-dark);
border-color: var(--lv-color-primary-dark);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(139,105,20,0.35);
}
.lv-btn--ghost {
background: transparent;
color: var(--lv-text-primary);
border-color: rgba(139,105,20,0.3);
}
.lv-btn--ghost:hover {
border-color: var(--lv-color-primary);
color: var(--lv-color-primary);
}
.lv-btn--outline {
background: transparent;
color: var(--lv-color-primary);
border-color: var(--lv-color-primary);
}
.lv-btn--outline:hover {
background: var(--lv-color-primary);
color: #fff;
}
.lv-btn--white {
background: #fff;
color: var(--lv-color-primary-dark);
border-color: #fff;
}
.lv-btn--white:hover {
background: var(--lv-bg-section);
transform: translateY(-1px);
}
.lv-btn--sm { padding: 8px 20px; font-size: 0.82rem; }
.lv-btn--lg { padding: 16px 36px; font-size: 1rem; }
.lv-btn--full { width: 100%; }
/* ================================================================
TAG / LABEL
================================================================ */
.lv-tag {
display: inline-block;
padding: 6px 16px;
background: rgba(139,105,20,0.10);
color: var(--lv-color-primary-dark);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: var(--lv-radius-pill);
margin-bottom: 16px;
}
.lv-tag--light {
background: rgba(255,255,255,0.18);
color: rgba(255,255,255,0.9);
}
/* ================================================================
HERO
================================================================ */
.lv-hero {
position: relative;
min-height: 88vh;
display: flex;
align-items: center;
overflow: hidden;
padding: 80px 0;
}
.lv-hero__bg {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 60% at 80% 50%,
rgba(201,169,110,0.18) 0%,
rgba(253,250,245,0) 70%);
}
.lv-hero__content {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.lv-hero__text { display: flex; flex-direction: column; gap: 28px; }
.lv-hero__desc {
font-size: 1.05rem;
max-width: 480px;
}
.lv-hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.lv-hero__trust {
display: flex;
align-items: center;
gap: 20px;
padding-top: 8px;
}
.lv-trust__item { display: flex; flex-direction: column; gap: 2px; }
.lv-trust__item strong { font-size: 0.95rem; color: var(--lv-text-primary); }
.lv-trust__item span { font-size: 0.78rem; color: var(--lv-text-muted); }
.lv-trust__divider {
width: 1px;
height: 32px;
background: rgba(139,105,20,0.2);
}
.lv-hero__img-wrapper {
position: relative;
border-radius: var(--lv-radius-lg);
overflow: hidden;
box-shadow: var(--lv-shadow-lg);
aspect-ratio: 4/5;
}
.lv-hero__badge {
position: absolute;
bottom: 20px;
right: 20px;
background: var(--lv-color-primary);
color: #fff;
border-radius: var(--lv-radius-md);
padding: 12px 18px;
text-align: center;
font-weight: 700;
}
.lv-hero__badge strong { display: block; font-size: 1.4rem; }
.lv-hero__badge span { font-size: 0.75rem; }
/* ================================================================
BANDE DE CONFIANCE
================================================================ */
.lv-trust-bar {
background: var(--lv-bg-dark);
padding: 28px 0;
}
.lv-trust-bar__inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.lv-trust-bar__item {
display: flex;
align-items: center;
gap: 14px;
color: var(--lv-text-light);
}
.lv-trust-bar__item svg { opacity: 0.7; flex-shrink: 0; }
.lv-trust-bar__item strong { display: block; font-size: 0.9rem; }
.lv-trust-bar__item span { display: block; font-size: 0.78rem; opacity: 0.6; }
/* ================================================================
SECTION HEADER (titre de section centré)
================================================================ */
.lv-section-header {
text-align: center;
margin-bottom: 60px;
}
.lv-section-header p {
max-width: 520px;
margin: 16px auto 0;
font-size: 1.05rem;
}
/* ================================================================
PRODUITS
================================================================ */
.lv-products {
padding: 100px 0;
background: var(--lv-bg-body);
}
.lv-product-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
margin-bottom: 80px;
}
.lv-product-showcase--reverse { direction: rtl; }
.lv-product-showcase--reverse > * { direction: ltr; }
.lv-product-showcase__image { position: relative; }
.lv-product-badge {
position: absolute;
top: 20px;
left: 20px;
padding: 8px 18px;
border-radius: var(--lv-radius-pill);
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.lv-product-badge--bestseller { background: var(--lv-accent-belt); color: #fff; }
.lv-product-badge--new { background: var(--lv-accent-helmet); color: #fff; }
.lv-product-showcase__info {
display: flex;
flex-direction: column;
gap: 20px;
}
.lv-product__subtitle {
font-size: 1rem;
font-style: italic;
color: var(--lv-text-muted);
}
.lv-product__stars { color: var(--lv-color-primary); font-size: 1rem; }
.lv-product__stars span { color: var(--lv-text-muted); font-size: 0.85rem; margin-left: 6px; }
.lv-product__benefits { display: flex; flex-direction: column; gap: 16px; }
.lv-benefit {
display: flex;
gap: 16px;
align-items: flex-start;
}
.lv-benefit__icon {
font-size: 1.4rem;
flex-shrink: 0;
margin-top: 2px;
}
.lv-benefit strong { display: block; color: var(--lv-text-primary); font-size: 0.95rem; margin-bottom: 4px; }
.lv-benefit p { font-size: 0.875rem; margin: 0; }
.lv-product__pricing {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.lv-price--old {
font-size: 1rem;
color: var(--lv-text-muted);
text-decoration: line-through;
}
.lv-price--current {
font-size: 2rem;
font-weight: 700;
color: var(--lv-color-primary-dark);
font-family: var(--lv-font-title);
}
.lv-price__saving {
background: rgba(139,105,20,0.12);
color: var(--lv-color-primary-dark);
padding: 4px 12px;
border-radius: var(--lv-radius-pill);
font-size: 0.8rem;
font-weight: 600;
}
.lv-price--cta {
font-size: 2.2rem;
font-weight: 700;
color: #fff;
font-family: var(--lv-font-title);
}
.lv-price--light { color: rgba(255,255,255,0.6); }
.lv-price.custom { font-size: 1.6rem; font-family: var(--lv-font-title); }
.lv-product__guarantee {
font-size: 0.82rem;
color: var(--lv-text-muted);
text-align: center;
}
.lv-separator {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(139,105,20,0.2), transparent);
margin: 40px 0 80px;
}
/* ================================================================
COMMENT ÇA MARCHE
================================================================ */
.lv-how {
padding: 100px 0;
background: var(--lv-bg-section);
}
.lv-how__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.lv-how__card {
background: var(--lv-bg-card);
border-radius: var(--lv-radius-lg);
padding: 40px 32px;
position: relative;
box-shadow: var(--lv-shadow-sm);
transition: box-shadow var(--lv-transition), transform var(--lv-transition);
}
.lv-how__card:hover {
box-shadow: var(--lv-shadow-md);
transform: translateY(-4px);
}
.lv-how__step {
position: absolute;
top: 28px;
right: 28px;
font-size: 2.5rem;
font-family: var(--lv-font-title);
font-weight: 700;
color: rgba(139,105,20,0.12);
line-height: 1;
}
.lv-how__icon { font-size: 2rem; margin-bottom: 16px; }
.lv-how__card h3 { margin-bottom: 12px; }
/* ================================================================
AVANT / APRÈS
================================================================ */
.lv-results {
padding: 100px 0;
background: var(--lv-bg-body);
}
.lv-results__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.lv-result__card {
background: var(--lv-bg-card);
border-radius: var(--lv-radius-lg);
overflow: hidden;
box-shadow: var(--lv-shadow-sm);
transition: box-shadow var(--lv-transition), transform var(--lv-transition);
}
.lv-result__card:hover { box-shadow: var(--lv-shadow-md); transform: translateY(-4px); }
.lv-result__images {
display: grid;
grid-template-columns: 1fr 1fr;
height: 200px;
}
.lv-result__img {
position: relative;
display: flex;
align-items: flex-end;
padding: 10px;
}
.lv-result__img span {
background: rgba(0,0,0,0.5);
color: #fff;
font-size: 0.72rem;
font-weight: 600;
padding: 3px 10px;
border-radius: var(--lv-radius-pill);
}
.lv-result__img--before { background: #e8e0d4; }
.lv-result__img--after { background: linear-gradient(135deg, #d4c5a3, #c9a96e); }
.lv-result__info { padding: 20px 24px 24px; }
.lv-result__info strong { display: block; margin-bottom: 6px; }
.lv-result__info p { font-size: 0.875rem; margin-bottom: 12px; }
.lv-result__tag {
font-size: 0.75rem;
font-weight: 600;
color: var(--lv-color-primary-dark);
background: rgba(139,105,20,0.10);
padding: 4px 12px;
border-radius: var(--lv-radius-pill);
}
/* ================================================================
TÉMOIGNAGES
================================================================ */
.lv-testimonials {
padding: 100px 0;
background: var(--lv-bg-section);
}
.lv-testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
align-items: start;
}
.lv-testimonial {
background: var(--lv-bg-card);
border-radius: var(--lv-radius-lg);
padding: 32px;
box-shadow: var(--lv-shadow-sm);
transition: box-shadow var(--lv-transition), transform var(--lv-transition);
}
.lv-testimonial:hover { box-shadow: var(--lv-shadow-md); transform: translateY(-4px); }
.lv-testimonial--featured {
background: var(--lv-color-primary);
color: #fff;
transform: scale(1.03);
box-shadow: var(--lv-shadow-lg);
}
.lv-testimonial--featured p,
.lv-testimonial--featured span { color: rgba(255,255,255,0.85); }
.lv-testimonial--featured strong { color: #fff; }
.lv-testimonial__stars { color: #F59E0B; margin-bottom: 16px; font-size: 1rem; }
.lv-testimonial p { font-size: 0.9rem; line-height: 1.7; margin-bottom: 20px; }
.lv-testimonial__author { display: flex; align-items: center; gap: 12px; }
.lv-testimonial__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(139,105,20,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
color: var(--lv-color-primary-dark);
flex-shrink: 0;
}
.lv-testimonial--featured .lv-testimonial__avatar {
background: rgba(255,255,255,0.2);
color: #fff;
}
.lv-testimonial__author strong { display: block; font-size: 0.9rem; }
.lv-testimonial__author span { font-size: 0.78rem; }
/* ================================================================
FAQ
================================================================ */
.lv-faq {
padding: 100px 0;
background: var(--lv-bg-body);
}
.lv-faq__inner { max-width: 760px; margin: 0 auto; }
.lv-faq__inner .lv-section-header { text-align: left; }
.lv-faq__list { display: flex; flex-direction: column; gap: 12px; }
.lv-faq__item {
background: var(--lv-bg-card);
border-radius: var(--lv-radius-md);
border: 1px solid rgba(139,105,20,0.12);
overflow: hidden;
transition: border-color var(--lv-transition);
}
.lv-faq__item[open] { border-color: var(--lv-color-primary-light); }
.lv-faq__item summary {
padding: 20px 24px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--lv-text-primary);
}
.lv-faq__item summary::-webkit-details-marker { display: none; }
.lv-faq__item summary::after {
content: '+';
font-size: 1.4rem;
font-weight: 300;
color: var(--lv-color-primary);
flex-shrink: 0;
transition: transform var(--lv-transition);
}
.lv-faq__item[open] summary::after { transform: rotate(45deg); }
.lv-faq__item p {
padding: 0 24px 20px;
font-size: 0.9rem;
line-height: 1.75;
}
/* ================================================================
CTA / OFFRE URGENCE
================================================================ */
.lv-cta {
padding: 80px 0;
background: var(--lv-bg-section);
}
.lv-cta__card {
background: linear-gradient(135deg, var(--lv-bg-dark) 0%, #2D2510 100%);
border-radius: var(--lv-radius-lg);
padding: 72px 60px;
text-align: center;
color: var(--lv-text-light);
position: relative;
overflow: hidden;
}
.lv-cta__card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(201,169,110,0.2) 0%, transparent 60%);
pointer-events: none;
}
.lv-cta__card h2 { color: #fff; margin: 16px 0; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.lv-cta__card p { color: rgba(255,255,255,0.7); max-width: 500px; margin: 0 auto 28px; }
.lv-countdown {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 24px 0;
}
.lv-countdown__unit {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--lv-radius-sm);
padding: 12px 20px;
font-size: 2rem;
font-weight: 700;
font-family: var(--lv-font-title);
color: var(--lv-color-primary-light);
min-width: 70px;
text-align: center;
}
.lv-countdown__unit span { display: block; }
.lv-countdown__sep { font-size: 2rem; color: var(--lv-color-primary-light); }
.lv-cta__pricing {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 20px 0 28px;
}
.lv-cta__note {
margin-top: 16px;
font-size: 0.82rem;
color: rgba(255,255,255,0.5);
}
/* ================================================================
FOOTER
================================================================ */
.lv-footer {
background: var(--lv-bg-dark);
color: var(--lv-text-light);
padding: 80px 0 32px;
}
.lv-footer__top {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 60px;
margin-bottom: 60px;
}
.lv-footer__brand p {
color: rgba(255,255,255,0.5);
font-size: 0.9rem;
margin: 12px 0 20px;
}
.lv-footer__badges { display: flex; gap: 10px; flex-wrap: wrap; }
.lv-badge-pill {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.7);
padding: 6px 14px;
border-radius: var(--lv-radius-pill);
font-size: 0.78rem;
}
.lv-footer__links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.lv-footer__col { display: flex; flex-direction: column; gap: 10px; }
.lv-footer__col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); margin-bottom: 4px; font-family: var(--lv-font-body); }
.lv-footer__col a { font-size: 0.9rem; color: rgba(255,255,255,0.65); transition: color var(--lv-transition); }
.lv-footer__col a:hover { color: var(--lv-color-primary-light); }
.lv-footer__bottom {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 28px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.lv-footer__bottom p { font-size: 0.82rem; color: rgba(255,255,255,0.35); }
.lv-footer__legal { display: flex; gap: 20px; }
.lv-footer__legal a { font-size: 0.82rem; color: rgba(255,255,255,0.35); transition: color var(--lv-transition); }
.lv-footer__legal a:hover { color: rgba(255,255,255,0.6); }
/* ================================================================
PLACEHOLDERS (prévisualisation — à remplacer par vraies images)
================================================================ */
.lv-img-placeholder {
width: 100%;
aspect-ratio: 1;
border-radius: var(--lv-radius-lg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 0.85rem;
color: rgba(255,255,255,0.8);
text-align: center;
}
.lv-img-placeholder--warm { background: linear-gradient(135deg, #C9662D 0%, #E8A876 100%); }
.lv-img-placeholder--purple { background: linear-gradient(135deg, #5B4B9E 0%, #9B8FD4 100%); }
.lv-hero__img-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #D4C5A3 0%, #C9A96E 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: rgba(255,255,255,0.8);
font-size: 0.85rem;
text-align: center;
}
.lv-placeholder__icon { font-size: 2.5rem; }
.lv-img-placeholder span, .lv-hero__img-placeholder span { font-size: 0.75rem; opacity: 0.6; }
/* ================================================================
ANIMATIONS (apparition au scroll)
================================================================ */
.lv-reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.lv-visible {
opacity: 1;
transform: translateY(0);
}
/* ================================================================
RESPONSIVE — TABLETTE (max 1024px)
================================================================ */
@media (max-width: 1024px) {
.lv-hero__content { grid-template-columns: 1fr; }
.lv-hero__image { display: none; }
.lv-hero { min-height: auto; padding: 60px 0; }
.lv-trust-bar__inner { grid-template-columns: repeat(2, 1fr); }
.lv-how__grid { grid-template-columns: repeat(2, 1fr); }
.lv-footer__top { grid-template-columns: 1fr; gap: 40px; }
}
/* ================================================================
RESPONSIVE — MOBILE (max 768px)
================================================================ */
@media (max-width: 768px) {
h1 { font-size: 2.2rem; }
h2 { font-size: 1.7rem; }
.lv-header__nav { display: none; }
.lv-header__actions .lv-nav__link { display: none; }
.lv-hero__ctas { flex-direction: column; }
.lv-hero__trust { flex-wrap: wrap; gap: 12px; }
.lv-product-showcase,
.lv-product-showcase--reverse {
grid-template-columns: 1fr;
direction: ltr;
gap: 40px;
}
.lv-how__grid { grid-template-columns: 1fr; }
.lv-results__grid { grid-template-columns: 1fr; }
.lv-testimonials__grid { grid-template-columns: 1fr; }
.lv-testimonial--featured { transform: none; }
.lv-trust-bar__inner { grid-template-columns: 1fr 1fr; gap: 16px; }
.lv-cta__card { padding: 40px 24px; }
.lv-footer__links { grid-template-columns: 1fr 1fr; }
.lv-footer__bottom { flex-direction: column; text-align: center; }
}