) et togglé
par script.js via .active. N'avait aucun style — le fond ne
s'assombrissait jamais. On l'ajoute ici (palette premium).
================================================================ */
.overlay {
position: fixed;
inset: 0;
background: rgba(21, 17, 14, 0);
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: background 0.45s ease, backdrop-filter 0.45s ease, opacity 0.45s ease;
}
.overlay.active {
background: rgba(21, 17, 14, 0.75);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
opacity: 1;
pointer-events: all;
}
/* ================================================================
CONTENEUR PRINCIPAL
================================================================ */
.cart-drawer {
position: fixed;
top: 0;
right: -500px;
width: 430px;
max-width: 100vw;
height: 100%;
height: 100dvh;
background: #faf6f0;
box-shadow:
-1px 0 0 rgba(201,150,62,0.25),
-8px 0 60px rgba(13,0,26,0.35),
-40px 0 120px rgba(13,0,26,0.18);
transition: right 0.50s cubic-bezier(0.4,0,0.2,1);
z-index: 10000;
display: flex;
flex-direction: column;
overflow: hidden;
}
.cart-drawer.active { right: 0; }
.cart-drawer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--bbw-gold) 30%,
var(--bbw-gold-light) 50%,
var(--bbw-gold) 70%,
transparent 100%);
z-index: 100;
}
.cart-drawer::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 1px; height: 100%;
background: linear-gradient(180deg,
transparent 0%,
rgba(184,146,90,0.35) 20%,
rgba(184,146,90,0.50) 50%,
rgba(184,146,90,0.35) 80%,
transparent 100%);
z-index: 100;
}
/* ================================================================
HEADER — INCHANGÉ
================================================================ */
.drawer-header {
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 22px 18px;
background: linear-gradient(135deg, #0d0d0d 0%, #1a0812 60%, #0d0d0d 100%) !important;
position: relative;
z-index: 2;
overflow: hidden;
}
.drawer-header::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(ellipse at 15% 0%,
rgba(184,146,90,0.08) 0%,
transparent 55%);
pointer-events: none;
z-index: 1;
}
.drawer-header__title-group {
display: flex;
align-items: center;
gap: 10px;
position: relative;
z-index: 2;
}
.cart-drawer .drawer-header .bbw-globe-badge {
width: 72px;
height: 72px;
flex-shrink: 0;
}
.cart-drawer .drawer-header .bbw-globe-badge__svg { width: 100%; height: 100%; overflow: visible; }
.cart-drawer .drawer-header .bbw-globe-badge__core { transform-origin: 24px 24px; animation: bbwGlobeSpin 6s linear infinite; }
.cart-drawer .drawer-header .bbw-globe-badge__orbit { transform-origin: 24px 24px; animation: bbwGlobeSpin 8s linear infinite; }
.cart-drawer .drawer-header .bbw-globe-badge__text {
font-size: 5px;
font-weight: 700;
letter-spacing: 0.5px;
fill: var(--bbw-gold-light, #e8bc6a);
text-transform: uppercase;
}
@keyframes bbwGlobeSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.cart-drawer .drawer-header .bbw-globe-badge__core,
.cart-drawer .drawer-header .bbw-globe-badge__orbit { animation: none; }
}
@media (max-width: 480px) {
.cart-drawer .drawer-header .bbw-globe-badge { width: 54px; height: 54px; }
}
@keyframes headerLightPass {
0% { left: -100%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: 160%; opacity: 0; }
}
/* Seul accent animé conservé sur tout le drawer : le liseré or du header */
.drawer-header::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(184,146,90,0.30) 20%,
rgba(184,146,90,0.75) 50%,
rgba(184,146,90,0.30) 80%,
transparent 100%);
animation: headerBorderShimmer 5s ease-in-out infinite;
}
@keyframes headerBorderShimmer {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.9; }
}
.drawer-header h3::before {
content: none;
}
@keyframes headerHalo {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
.drawer-header h3 {
font-family: var(--font-display, 'Fraunces', Georgia, serif);
font-size: 1.28rem;
font-weight: 600;
color: #F6EFE5 !important;
margin: 0;
letter-spacing: 0.18em;
text-transform: uppercase;
position: relative;
z-index: 2;
text-shadow: none;
}
.drawer-header h3::after {
content: '';
position: absolute;
bottom: -5px; left: 0;
width: 70%;
height: 1px;
background: linear-gradient(90deg,
rgba(201,150,62,0.80),
rgba(201,150,62,0));
}
.drawer-header__actions {
display: flex;
align-items: center;
gap: 8px;
position: relative;
z-index: 2;
}
.cart-drawer__share-btn {
display: none;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid rgba(201,150,62,0.28);
border-radius: 50%;
background: rgba(201,150,62,0.08);
color: rgba(232,188,106,0.75);
cursor: pointer;
font-size: 0.95rem;
transition: all 0.25s ease;
}
.cart-drawer__share-btn:hover {
color: #fff;
border-color: rgba(201,150,62,0.55);
background: rgba(201,150,62,0.15);
box-shadow: 0 0 16px rgba(201,150,62,0.25);
}
.close-drawer {
background: rgba(201,150,62,0.08);
border: 1px solid rgba(201,150,62,0.28);
cursor: pointer;
color: rgba(232,188,106,0.60);
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
transition: all 0.30s cubic-bezier(0.4,0,0.2,1);
line-height: 1;
font-size: 1rem;
position: relative;
overflow: hidden;
z-index: 2;
}
.close-drawer::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center,
rgba(201,150,62,0.20) 0%,
transparent 70%);
opacity: 0;
transition: opacity 0.30s;
}
.close-drawer:hover::before { opacity: 1; }
.close-drawer:hover {
color: #fff;
border-color: rgba(201,150,62,0.55);
transform: rotate(90deg);
box-shadow:
0 0 20px rgba(201,150,62,0.35),
0 0 8px rgba(201,150,62,0.20) inset;
background: rgba(201,150,62,0.15);
}
/* ================================================================
BODY — ✦ RETOUCHE
================================================================ */
.cart-drawer__body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(201,150,62,0.30) transparent;
box-sizing: border-box;
background: #faf6f0;
}
.cart-drawer__body::-webkit-scrollbar { width: 3px; }
.cart-drawer__body::-webkit-scrollbar-track { background: transparent; }
.cart-drawer__body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg,
rgba(201,150,62,0.50),
rgba(201,150,62,0.35));
border-radius: 4px;
}
/* ================================================================
FOOTER — ✦ RETOUCHE
================================================================ */
.cart-drawer__footer {
flex-shrink: 0;
padding: 14px 20px 22px;
background: #fffdf9;
z-index: 2;
position: relative;
border-top: 1px solid rgba(201,150,62,0.14);
box-shadow: 0 -4px 24px rgba(201,150,62,0.07);
}
.cart-drawer__footer::before {
content: '';
position: absolute;
top: 0; left: 15px; right: 15px;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(201,150,62,0.55),
rgba(232,188,106,0.85),
rgba(201,150,62,0.55),
transparent);
}
.subtotal {
font-family: 'DM Sans', sans-serif;
font-weight: 600;
font-size: 0.74rem;
color: #a08878;
margin: 0 0 12px;
display: flex;
justify-content: space-between;
align-items: center;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.subtotal strong,
.subtotal .subtotal-amount {
color: #1e1a1c;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.35rem;
font-weight: 700;
letter-spacing: 0.02em;
}
/* Bandeau informatif — la reduction par quantite (settings.promos[]) sera
appliquee au checkout, jamais soustraite du total affiche ici, pour ne
jamais montrer un chiffre different de celui reellement facture. */
.cart-checkout-note {
display: flex;
align-items: center;
gap: 8px;
background: var(--bbw-gold-pale, rgba(184,146,90,0.12));
border: 1px solid var(--bbw-gold-border, rgba(184,146,90,0.28));
border-radius: 4px;
padding: 9px 12px;
margin: 0 0 12px;
font-family: var(--font-body, 'DM Sans', sans-serif);
font-size: 0.72rem;
font-weight: 600;
color: #7a5a28;
letter-spacing: 0.01em;
}
.cart-checkout-note i {
color: var(--bbw-gold, #B8925A);
font-size: 12px;
flex-shrink: 0;
}
.checkout {
display: block;
width: 100%;
padding: 16px;
background: linear-gradient(135deg,
var(--bbw-black) 0%,
#221c16 50%,
var(--bbw-black) 100%);
color: var(--bbw-gold-light);
border: 1px solid var(--bbw-gold-border-hi);
border-radius: 3px;
cursor: pointer;
font-family: var(--font-body, 'DM Sans', sans-serif);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
box-shadow:
0 6px 22px rgba(21,17,14,0.22),
0 1px 0 rgba(255,255,255,0.06) inset;
text-align: center;
position: relative;
overflow: hidden;
}
.checkout::before {
content: none;
}
@keyframes btnShimmer {
0% { left: -60%; }
100% { left: 160%; }
}
.checkout:hover {
background: linear-gradient(135deg, #221c16 0%, #2c251d 50%, #221c16 100%);
border-color: var(--bbw-gold);
color: #f3d9a6;
transform: translateY(-2px);
box-shadow:
0 10px 30px rgba(21,17,14,0.30),
0 0 0 1px var(--bbw-gold-border) inset;
}
.checkout:active { transform: translateY(0); }
/* ================================================================
CART ITEMS — ✦ RETOUCHE
================================================================ */
.cart-items {
padding: 14px 18px 6px;
}
.cart-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 12px;
border-bottom: 1px solid rgba(201,150,62,0.14);
border-radius: 4px;
transition: background 0.25s, box-shadow 0.25s;
margin-bottom: 2px;
}
.cart-item:hover {
background: rgba(255, 252, 245, 0.92);
box-shadow: 0 4px 24px rgba(201,150,62,0.14);
}
.cart-item:last-child { border-bottom: none; }
.cart-item img {
width: 78px; height: 78px;
object-fit: cover;
border-radius: 3px;
cursor: pointer;
flex-shrink: 0;
border: 1px solid rgba(201,150,62,0.30);
box-shadow:
0 4px 14px rgba(0,0,0,0.10),
0 0 0 3px rgba(201,150,62,0.07);
transition: all 0.30s ease;
}
.cart-item img:hover {
border-color: rgba(201,150,62,0.65);
box-shadow:
0 6px 22px rgba(0,0,0,0.14),
0 0 0 4px rgba(201,150,62,0.14);
transform: scale(1.04);
}
.cart-item h4 {
font-family: 'DM Sans', sans-serif;
font-size: 0.87rem;
font-weight: 600;
color: #1e1a1c;
cursor: pointer;
line-height: 1.45;
margin: 0 0 3px;
flex: 1;
transition: color 0.22s;
}
.cart-item h4:hover { color: #c9963e; }
.cart-item p {
font-size: 1.0rem;
color: #1e1a1c;
font-weight: 700;
margin: 0 0 2px;
font-family: 'Cormorant Garamond', Georgia, serif;
letter-spacing: 0.02em;
}
.item-variant {
font-size: 0.74rem;
color: #b09898;
font-weight: 400;
margin: 2px 0 0;
letter-spacing: 0.03em;
}
.quantity-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.quantity {
display: flex;
align-items: center;
gap: 2px;
background: rgba(253, 248, 238, 0.95);
border: 1px solid rgba(201,150,62,0.32);
border-radius: 4px;
padding: 2px 4px;
backdrop-filter: blur(4px);
}
.quantity button {
background: none;
color: #1e1a1c;
border: none;
width: 28px; height: 28px;
border-radius: 3px;
cursor: pointer;
font-weight: 700;
font-size: 1.05rem;
display: flex; align-items: center; justify-content: center;
transition: all 0.20s;
flex-shrink: 0;
}
.quantity button:hover {
background: #1e1a1c;
color: #e8bc6a;
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
transform: scale(1.05);
}
.quantity span {
font-size: 0.86rem;
font-weight: 700;
min-width: 22px;
text-align: center;
color: #1e1a1c;
font-family: 'DM Sans', sans-serif;
}
.remove-item {
background: none;
border: none;
color: #c8b4b4;
cursor: pointer;
font-size: 0.80rem;
padding: 5px 7px;
border-radius: 7px;
transition: all 0.22s;
flex-shrink: 0;
display: flex; align-items: center;
}
.remove-item:hover {
color: #1e1a1c;
background: rgba(0,0,0,0.06);
transform: scale(1.12);
}
/* ================================================================
EMPTY CART — ✦ RETOUCHE COMPLÈTE
================================================================ */
.empty-cart {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 56px 28px 48px;
min-height: 380px;
text-align: center;
position: relative;
overflow: hidden;
background: linear-gradient(160deg, #fdf8f0 0%, #faf3e8 50%, #fdf6ee 100%);
}
.empty-cart::before {
content: '';
position: absolute;
top: 32%; left: 50%;
transform: translate(-50%, -50%);
width: 280px; height: 280px;
background: radial-gradient(circle,
rgba(201,150,62,0.18) 0%,
rgba(232,188,106,0.08) 40%,
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.empty-cart::after {
content: '';
position: absolute;
top: 35%; left: 55%;
transform: translate(-50%, -50%);
width: 200px; height: 200px;
background: radial-gradient(circle,
rgba(245,208,128,0.12) 0%,
transparent 65%);
border-radius: 50%;
pointer-events: none;
}
@keyframes emptyHalo {
0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}
.empty-cart__icon-wrap {
position: relative;
width: 104px; height: 104px;
margin-bottom: 30px;
flex-shrink: 0;
z-index: 2;
}
.empty-cart__icon-wrap::before {
content: '';
position: absolute;
inset: -10px;
border-radius: 50%;
border: 1.5px solid transparent;
border-top-color: rgba(184,146,90,0.55);
border-right-color: rgba(184,146,90,0.16);
animation: rotateSlow 16s linear infinite;
pointer-events: none;
}
.empty-cart__icon-wrap::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid transparent;
border-bottom-color: rgba(184,146,90,0.30);
border-left-color: rgba(184,146,90,0.10);
animation: rotateSlow 22s linear infinite reverse;
pointer-events: none;
}
@keyframes rotateSlow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.empty-cart__icon-bg {
width: 100%; height: 100%;
background: linear-gradient(145deg,
rgba(255,255,255,0.98) 0%,
rgba(255,250,240,0.95) 60%,
rgba(252,244,230,0.98) 100%);
border-radius: 50%;
border: 1.5px solid rgba(201,150,62,0.35);
display: flex; align-items: center; justify-content: center;
box-shadow:
0 0 0 6px rgba(201,150,62,0.08),
0 12px 40px rgba(30,26,28,0.10),
0 4px 18px rgba(201,150,62,0.08),
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 0 24px rgba(201,150,62,0.10);
position: relative;
overflow: hidden;
}
.empty-cart__icon-bg::before {
content: '';
position: absolute;
top: -30%; left: -30%;
width: 70%; height: 70%;
background: radial-gradient(ellipse,
rgba(255,255,255,0.80) 0%,
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.empty-cart__icon {
font-size: 2.8rem;
line-height: 1;
filter: drop-shadow(0 3px 8px rgba(201,150,62,0.28));
animation: iconFloat 4s ease-in-out infinite;
position: relative;
z-index: 1;
}
@keyframes iconFloat {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-6px) rotate(2deg); }
}
.empty-cart__badge {
position: absolute;
top: -2px; right: -2px;
width: 24px; height: 24px;
background: linear-gradient(135deg, #1e1a1c, #2a2a2a);
border: 2px solid rgba(201,150,62,0.60);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.65rem;
font-weight: 800;
color: #e8bc6a;
font-family: 'DM Sans', sans-serif;
box-shadow:
0 2px 10px rgba(0,0,0,0.35),
0 0 0 3px rgba(201,150,62,0.14);
}
@keyframes badgePop {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.10); }
}
.empty-cart h3 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.60rem;
font-weight: 700;
color: #2a1f1a;
margin: 0 0 8px;
letter-spacing: 0.04em;
line-height: 1.25;
position: relative;
z-index: 2;
}
.empty-cart h3 span { color: #c9963e; }
.empty-cart__divider {
width: 60px; height: 1px;
background: linear-gradient(90deg,
transparent,
#c9963e,
#e8bc6a,
#c9963e,
transparent);
margin: 8px auto 16px;
position: relative;
z-index: 2;
}
@keyframes dividerGlow {
0%, 100% { opacity: 0.55; width: 48px; }
50% { opacity: 1; width: 76px; }
}
.empty-cart p {
font-family: 'DM Sans', sans-serif;
color: #a89090;
margin: 0 0 32px;
font-size: 0.84rem;
line-height: 1.65;
max-width: 230px;
position: relative;
z-index: 2;
}
.empty-cart .cta,
.empty-cart__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 36px;
background: linear-gradient(135deg,
#0d0d0d 0%,
#1a1a1a 50%,
#0d0d0d 100%);
background-size: 200% 100%;
color: var(--bbw-gold-light);
border: 1px solid var(--bbw-gold-border-hi);
border-radius: 3px;
cursor: pointer;
font-family: var(--font-body, 'DM Sans', sans-serif);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
position: relative;
overflow: hidden;
z-index: 2;
box-shadow:
0 6px 22px rgba(21,17,14,0.20),
0 1px 0 rgba(255,255,255,0.06) inset;
}
@keyframes ctaPulse {
0%, 100% { box-shadow: 0 4px 24px rgba(201,150,62,0.20), 0 1px 0 rgba(255,255,255,0.06) inset; }
50% { box-shadow: 0 6px 36px rgba(201,150,62,0.40), 0 0 45px rgba(201,150,62,0.12), 0 1px 0 rgba(255,255,255,0.06) inset; }
}
.empty-cart .cta::before,
.empty-cart__cta::before {
content: none;
}
@keyframes ctaShimmer {
0% { left: -75%; }
100% { left: 150%; }
}
.empty-cart .cta:hover,
.empty-cart__cta:hover {
background: linear-gradient(135deg, #221c16 0%, #2c251d 50%, #221c16 100%);
border-color: var(--bbw-gold);
color: #f3d9a6;
transform: translateY(-2px);
box-shadow:
0 10px 30px rgba(21,17,14,0.30),
0 0 0 1px var(--bbw-gold-border) inset;
}
.empty-cart .cta:active,
.empty-cart__cta:active { transform: translateY(-1px); }
.empty-cart .cta span,
.empty-cart__cta span { position: relative; z-index: 1; }
.empty-cart .cta-arrow {
font-size: 1.0rem;
position: relative; z-index: 1;
transition: transform 0.30s ease;
}
.empty-cart .cta:hover .cta-arrow,
.empty-cart__cta:hover .cta-arrow { transform: translateX(5px); }
/* ================================================================
COUNTDOWN — ✦ RETOUCHE
================================================================ */
.cart-drawer__countdown {
background: linear-gradient(100deg, #fdf8f0 0%, #faf4ea 60%, #fdf8f0 100%);
border-bottom: 1px solid rgba(201,150,62,0.12);
padding: 10px 22px;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
position: relative;
overflow: hidden;
}
.cart-drawer__countdown::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(201,150,62,0.30),
rgba(201,150,62,0.55),
rgba(201,150,62,0.30),
transparent);
}
.cart-drawer__countdown::after {
content: none;
}
@keyframes cdShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.cart-drawer__countdown-text {
color: #9e7060;
font-size: 0.70rem;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
font-family: 'DM Sans', sans-serif;
position: relative; z-index: 1;
}
.cart-drawer__countdown-time {
color: #1e1a1c;
font-size: 1.08rem;
font-weight: 700;
font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
letter-spacing: 0.10em;
background: rgba(255, 252, 245, 0.95);
border: 1px solid var(--bbw-gold-border);
padding: 4px 16px;
border-radius: 3px;
min-width: 78px;
text-align: center;
position: relative; z-index: 1;
box-shadow:
0 2px 10px rgba(184,146,90,0.14),
inset 0 1px 0 rgba(255,255,255,0.90);
}
@keyframes timePulse {
0%, 100% { box-shadow: 0 2px 12px rgba(201,150,62,0.14), inset 0 1px 0 rgba(255,255,255,0.90); }
50% { box-shadow: 0 2px 22px rgba(201,150,62,0.30), inset 0 1px 0 rgba(255,255,255,0.90); }
}
/* ================================================================
PROGRESS BAR — ✦ RETOUCHE
================================================================ */
.cart-drawer__progress-container {
padding: 12px 18px 10px;
background: linear-gradient(180deg, #fdf8f0, #faf6f0);
border-bottom: 1px solid rgba(201,150,62,0.10);
}
.cart-drawer__progress-message {
display: block;
font-size: 0.74rem;
font-weight: 600;
color: #7a5060;
margin-bottom: 9px;
text-align: center;
letter-spacing: 0.03em;
font-family: 'DM Sans', sans-serif;
}
.cart-drawer__progress-message strong { color: #1e1a1c; }
.cart-drawer__progress-bar {
width: 100%;
height: 8px;
background: rgba(201,150,62,0.12);
border-radius: 20px;
position: relative;
overflow: visible;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}
.cart-drawer__progress-fill {
height: 100%;
background: linear-gradient(90deg,
#1e1a1c 0%,
#2a2a2a 60%,
#c9963e 100%);
border-radius: 20px;
width: 0%;
transition: width 0.65s cubic-bezier(0.34,1.56,0.64,1);
position: relative;
box-shadow:
0 0 14px rgba(201,150,62,0.35),
0 0 5px rgba(201,150,62,0.45);
}
.cart-drawer__progress-fill::before {
content: none;
}
@keyframes barShimmer {
0% { background-position: -60px 0; }
100% { background-position: 300px 0; }
}
.cart-drawer__progress-fill::after {
content: '';
position: absolute;
right: -2px; top: 50%;
transform: translateY(-50%);
width: 14px; height: 14px;
background: radial-gradient(circle, var(--bbw-gold), var(--bbw-black));
border-radius: 50%;
border: 2px solid #fff;
box-shadow:
0 0 0 3px rgba(184,146,90,0.18),
0 0 8px rgba(184,146,90,0.35);
}
@keyframes progPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(201,150,62,0.22), 0 0 10px rgba(201,150,62,0.42); }
50% { box-shadow: 0 0 0 6px rgba(201,150,62,0.09), 0 0 20px rgba(201,150,62,0.60); }
}
.cart-drawer__progress-truck {
position: absolute;
right: 0; top: 50%;
transform: translateY(-50%);
display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px;
background: linear-gradient(135deg, #1e1a1c, #2a2a2a);
border-radius: 50%;
box-shadow: 0 2px 12px rgba(201,150,62,0.35);
border: 2px solid rgba(201,150,62,0.50);
}
.cart-drawer__progress-truck svg {
width: 13px; height: 13px;
color: #e8bc6a;
display: block;
}
/* ================================================================
PROMO MESSAGE — ✦ RETOUCHE
================================================================ */
.cart-promo-message {
padding: 9px 18px;
text-align: center;
background: linear-gradient(135deg,
rgba(201,150,62,0.07) 0%,
rgba(255,252,245,0.90) 50%,
rgba(201,150,62,0.04) 100%);
border-bottom: 1px solid rgba(201,150,62,0.12);
position: relative;
}
.cart-promo-message::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, #c9963e, #e8bc6a);
border-radius: 0 2px 2px 0;
box-shadow: 1px 0 10px rgba(201,150,62,0.35);
}
.promo-text { font-size: 0.78rem; font-weight: 500; color: #7a5568; line-height: 1.55; font-family: 'DM Sans', sans-serif; }
.promo-text.initial { color: #a09090; }
.promo-text.progress { color: #1e1a1c; font-weight: 600; }
.promo-text.complete { color: #22a06b; font-weight: 700; }
.promo-number { color: #1e1a1c; font-weight: 800; font-size: 1.05em; }
.promo-text.complete .promo-number { color: #22a06b; }
/* ================================================================
GENDER FREE-GIFT PICKER
→ Barre collapsible affichée uniquement quand promo_buy_quantity
est atteint ; permet de choisir quel(s) cadeau(x) gratuit(s)
(homme/femme) recevoir.
================================================================ */
.cart-gender-picker {
display: none;
border-bottom: 1px solid rgba(201,150,62,0.18);
overflow: hidden;
}
.cart-gender-picker.is-visible { display: block; }
.cart-gender-picker__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 18px;
cursor: pointer;
user-select: none;
background: linear-gradient(135deg,
rgba(201,150,62,0.12) 0%,
rgba(255,252,245,0.95) 50%,
rgba(201,150,62,0.08) 100%);
}
.cart-gender-picker__title {
font-size: 1.05rem;
font-weight: 800;
color: #1e1a1c;
font-family: 'DM Sans', sans-serif;
letter-spacing: 0.015em;
line-height: 1.3;
}
.cart-gender-picker__title .promo-number {
background: linear-gradient(90deg, var(--bbw-gold, #B8925A) 0%, var(--bbw-gold-vivid, #CBA45C) 50%, var(--bbw-gold, #B8925A) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 900;
font-size: 1.15em;
}
@media (max-width: 640px) {
.cart-gender-picker__title { font-size: 0.94rem; }
}
.cart-gender-picker__chevron {
flex-shrink: 0;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(201,150,62,0.12);
color: #c9963e;
font-size: 0.7rem;
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.25s ease;
}
.cart-gender-picker.is-open .cart-gender-picker__chevron {
transform: rotate(180deg);
background: rgba(201,150,62,0.22);
}
.cart-gender-picker__panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
background: linear-gradient(155deg, #211a15 0%, #171310 55%, #0d0a07 100%);
}
.cart-gender-picker.is-open .cart-gender-picker__panel {
max-height: 150px;
}
.cart-gender-picker__panel-inner {
padding: 12px 18px 16px;
}
.cart-gender-picker__question {
font-size: 0.76rem;
font-weight: 700;
color: var(--bbw-gold-light, #e8bc6a);
margin: 0 0 10px;
font-family: 'DM Sans', sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.cart-gender-picker__options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.cart-gender-option {
display: flex;
align-items: center;
gap: 9px;
cursor: pointer;
}
.gender-swatch {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2.5px solid rgba(184,146,90,0.45);
box-shadow: 0 3px 10px rgba(0,0,0,0.35);
overflow: hidden;
transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s ease, border-color 0.25s ease;
position: relative;
}
.gender-swatch img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cart-gender-option.active .gender-swatch {
border-color: #e8bc6a;
border-width: 3px;
box-shadow: 0 0 0 4px rgba(232,188,106,0.22);
transform: scale(1.08);
}
.cart-gender-option__label {
font-size: 0.78rem;
font-weight: 600;
color: #f2ece2;
font-family: 'DM Sans', sans-serif;
}
.cart-gender-option.active .cart-gender-option__label {
color: #e8bc6a;
font-weight: 800;
}
/* Variante cart.html — bloc plus haut, boules un peu plus grandes */
.cp-gender-picker.cart-gender-picker.is-open .cart-gender-picker__panel {
max-height: 200px;
}
.cp-gender-picker .gender-swatch {
width: 48px;
height: 48px;
}
.cp-gender-picker .cart-gender-picker__panel-inner { padding: 16px 20px 20px; }
/* ================================================================
BANNER SLIDER — ✦ RETOUCHE COULEURS
================================================================ */
.cart-drawer__paul-banner {
position: relative;
height: 100px;
overflow: hidden;
width: 100%;
}
.cart-drawer__paul-banner::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 55px;
background: linear-gradient(to top,
rgba(250, 246, 240, 0.70),
transparent);
z-index: 3;
pointer-events: none;
}
.cart-drawer__paul-banner .paul-banner-slide {
position: absolute; inset: 0;
opacity: 0; transition: opacity 1.4s ease-in-out; z-index: 1;
}
.cart-drawer__paul-banner .paul-banner-slide.active { opacity: 1; z-index: 2; }
.cart-drawer__paul-banner .paul-banner-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-drawer__paul-banner .paul-banner-title {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) translateY(8px);
color: #fff;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.05rem; font-weight: 700;
text-align: center; width: 88%;
background: rgba(30, 15, 8, 0.65);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(201,150,62,0.35);
padding: 6px 14px; border-radius: 4px;
text-shadow: 0 2px 8px rgba(0,0,0,0.45);
line-height: 1.3; margin: 0; opacity: 0;
transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
z-index: 4;
box-shadow:
0 4px 20px rgba(0,0,0,0.22),
0 0 0 1px rgba(201,150,62,0.12);
}
.cart-drawer__paul-banner .paul-banner-slide.active .paul-banner-title {
opacity: 1;
transform: translate(-50%, -50%) translateY(0);
}
.cart-drawer__paul-banner .paul-banner-indicators {
position: absolute;
bottom: 7px; left: 50%;
transform: translateX(-50%);
display: flex; gap: 5px; z-index: 5;
}
.cart-drawer__paul-banner .paul-banner-indicator {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.40);
cursor: pointer; transition: all 0.30s;
}
.cart-drawer__paul-banner .paul-banner-indicator.active {
background: #c9963e;
transform: scale(1.45);
box-shadow: 0 0 10px rgba(201,150,62,0.75);
}
.paul-banner-video-overlay {
position: absolute;
inset: 0;
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 10px;
pointer-events: none;
}
.paul-banner-video-overlay .paul-banner-indicators {
pointer-events: all;
}
.paul-banner-video-texts {
position: relative;
width: 92%;
text-align: center;
margin-bottom: 4px;
}
.paul-banner-video-text {
position: absolute;
bottom: 0;
left: 0; right: 0;
color: #fff;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.05rem;
font-weight: 700;
text-align: center;
background: rgba(30, 15, 8, 0.65);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(201, 150, 62, 0.35);
padding: 6px 14px;
border-radius: 4px;
text-shadow: 0 2px 8px rgba(0,0,0,0.45);
line-height: 1.3;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.8s ease, transform 0.8s ease;
pointer-events: none;
}
.paul-banner-video-text.active {
opacity: 1;
transform: translateY(0);
position: relative;
}
.paul-banner-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 2;
filter: brightness(0.88) saturate(1.05);
}
.cart-drawer__paul-banner.paul-banner--video-mode {
height: 140px;
background: #0d0a08;
}
.cart-drawer__paul-banner {
height: 130px;
}
#cp-paul-banner {
height: 180px;
}
#cp-paul-banner.paul-banner--video-mode {
height: 200px;
background: #0d0a08;
}
#cp-paul-banner {
margin-top: -20px !important;
margin-bottom: -10px !important;
}
#cp-paul-banner .paul-banner-title {
font-size: 1.15rem;
padding: 8px 20px;
}
#cp-paul-banner .paul-banner-video-text.active {
font-size: 1.15rem;
padding: 8px 20px;
}
#cp-paul-banner .paul-banner-indicators {
bottom: 6px;
}
/* ================================================================
PROMO CODE SLIDER — inchangé
================================================================ */
.cart-drawer__promo-slider-container {
margin: 12px 14px 6px;
}
.cart-drawer__promo-slider {
background: linear-gradient(135deg, var(--bbw-black) 0%, #1c1510 55%, #14100c 100%);
border: 1px solid var(--bbw-gold-border);
border-radius: 4px;
padding: 14px 16px 12px;
position: relative;
overflow: hidden;
box-shadow:
0 6px 28px rgba(21,17,14,0.28),
inset 0 1px 0 rgba(255,255,255,0.05);
}
.cart-drawer__promo-slider::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
var(--bbw-gold) 30%,
var(--bbw-gold-light) 50%,
var(--bbw-gold) 70%,
transparent);
}
.cart-drawer__promo-slider::after {
content: none;
}
@keyframes promoLightPass {
0% { left: -100%; opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { left: 150%; opacity: 0; }
}
.cart-drawer__promo-slide { display: none; opacity: 0; transition: opacity 0.5s; }
.cart-drawer__promo-slide.active { display: block; opacity: 1; }
.cart-drawer__promo-title {
margin: 0 0 4px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.05rem; font-weight: 700;
color: #e8bc6a;
letter-spacing: 0.04em;
text-shadow: 0 0 16px rgba(201,150,62,0.40);
}
.cart-drawer__promo-text {
margin: 0 0 11px;
font-size: 0.74rem;
color: rgba(255,255,255,0.45);
line-height: 1.50;
font-family: 'DM Sans', sans-serif;
}
.cart-drawer__promo-text strong { color: rgba(255,255,255,0.78); font-weight: 600; }
.cart-drawer__promo-code-row { display: flex; align-items: center; gap: 10px; }
.cart-drawer__promo-code {
font-size: 1.12rem; font-weight: 700;
font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
color: #e8bc6a;
background: rgba(201,150,62,0.10);
border: 1px solid rgba(201,150,62,0.32);
padding: 6px 14px;
border-radius: 3px;
letter-spacing: 0.14em;
flex: 1; text-align: center;
transition: all 0.25s;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
text-shadow: 0 0 18px rgba(201,150,62,0.50);
}
.cart-drawer__promo-code:hover {
background: rgba(201,150,62,0.18);
box-shadow: 0 0 24px rgba(201,150,62,0.26), inset 0 1px 0 rgba(255,255,255,0.05);
}
.cart-drawer__promo-copy-btn {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.12);
width: 36px; height: 36px;
border-radius: 3px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0;
transition: all 0.25s;
}
.cart-drawer__promo-copy-btn:hover {
background: rgba(201,150,62,0.24);
border-color: rgba(201,150,62,0.55);
transform: scale(1.08);
box-shadow: 0 0 18px rgba(201,150,62,0.30);
}
.cart-drawer__promo-copy-btn svg { width: 14px; height: 14px; stroke: rgba(255,255,255,0.55); fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.22s; }
.cart-drawer__promo-copy-btn:hover svg { stroke: #e8bc6a; }
.cart-drawer__promo-copy-btn.copied svg { stroke: #22a06b; }
.cart-drawer__promo-indicators { display: flex; justify-content: center; gap: 7px; margin-top: 11px; }
.cart-drawer__promo-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
cursor: pointer; transition: all 0.28s;
}
.cart-drawer__promo-dot.active {
background: #c9963e !important;
transform: scale(1.40);
box-shadow: 0 0 12px rgba(201,150,62,0.65);
}
/* ================================================================
REVIEWS CAROUSEL — ✦ RETOUCHE
================================================================ */
.reviews-carousel {
margin: 10px 12px;
overflow: hidden;
position: relative;
height: 130px;
border-top: 1px solid rgba(201,150,62,0.10);
box-sizing: border-box;
}
.review-item {
display: none; align-items: center;
position: absolute; width: 100%; opacity: 0;
transition: opacity 0.5s;
}
.review-item.active { display: flex; opacity: 1; }
.review-item-inner {
background: #fffdf9;
border: 1px solid rgba(201,150,62,0.18);
border-radius: 4px;
padding: 12px 14px 10px;
width: 100%;
box-sizing: border-box;
box-shadow:
0 4px 20px rgba(201,150,62,0.07),
0 1px 0 rgba(255,255,255,0.95) inset;
position: relative;
overflow: hidden;
}
.review-item-inner::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: linear-gradient(180deg, #c9963e, rgba(201,150,62,0));
border-radius: 16px 0 0 16px;
}
.review-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; width: 100%; box-sizing: border-box; }
.review-avatar {
width: 46px !important; height: 46px !important;
border-radius: 50%; object-fit: cover; flex-shrink: 0;
border: 1.5px solid rgba(201,150,62,0.32);
box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
.review-meta { flex: 1; min-width: 0; overflow: hidden; }
.review-meta h4 { font-size: 0.80rem; font-weight: 700; margin: 0 0 2px; color: #1e1a1c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'DM Sans', sans-serif; }
.review-stars { color: #c9963e; font-size: 0.88rem; letter-spacing: 1px; line-height: 1; }
.verified-badge {
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: #f0f4ff;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(66,133,244,0.15);
border: 1px solid rgba(66,133,244,0.15);
}
.verified-badge svg { display: block; }
.verified-badge i { font-size: 0.80rem; }
.review-text { font-size: 0.76rem; color: #6a4a50; font-style: italic; margin: 0 0 5px; line-height: 1.50; word-break: break-word; font-family: 'DM Sans', sans-serif; }
.review-date { font-size: 0.66rem; color: #c0a8a8; display: block; letter-spacing: 0.04em; }
/* ================================================================
MARQUEE — inchangé
================================================================ */
.cart-marquee {
overflow: hidden;
background: linear-gradient(90deg, #0d0d0d 0%, #1a0812 50%, #0d0d0d 100%);
padding: 8px 0;
position: relative;
border-top: 1px solid rgba(201,150,62,0.20);
border-bottom: 1px solid rgba(201,150,62,0.20);
}
.cart-marquee::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(184,146,90,0.35),
rgba(184,146,90,0.55),
rgba(184,146,90,0.35),
transparent);
}
.cart-marquee::after {
content: none;
}
.cart-marquee .marquee-content {
display: flex; gap: 2px;
white-space: nowrap;
animation: marquee 48s linear infinite;
}
.cart-marquee:hover .marquee-content {
animation-play-state: paused;
}
.cart-marquee .marquee-content span {
color: rgba(203, 164, 92, 0.85);
font-size: 0.72rem; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
flex-shrink: 0;
font-family: var(--font-body, 'Inter', sans-serif);
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ================================================================
PAYMENT ICONS — ✦ RETOUCHE
================================================================ */
.payment-icons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px 15px !important;
padding: 10px 16px 14px;
border-top: 1px solid rgba(201,150,62,0.10);
background: rgba(253, 248, 240, 0.80);
}
.payment-icons i {
font-size: 1.55rem;
color: #000000 !important;
transition: all 0.25s;
}
.payment-icons i:hover {
color: #c9963e;
filter: grayscale(0) opacity(1);
transform: translateY(-2px);
}
/* ================================================================
CART EXTRA
================================================================ */
.cart-extra { display: none; }
.cart-extra.active { display: block; }
/* ================================================================
FREE BADGE — définition unique canonique plus bas (~ligne 5680,
avec var(--bbw-gold) + hover). Ce bloc redondant est retiré pour
éviter la double déclaration.
================================================================ */
/* ================================================================
RESPONSIVE
================================================================ */
@media (max-width: 480px) {
.cart-drawer { width: 100%; right: -100%; }
.cart-drawer__paul-banner { height: 110px; }
.cart-drawer__paul-banner .paul-banner-title { font-size: 0.86rem; }
.cart-drawer__countdown-time { font-size: 0.96rem; }
.cart-item img { width: 66px; height: 66px; }
.empty-cart { padding: 44px 22px 38px; min-height: 300px; }
.empty-cart__icon-wrap { width: 86px; height: 86px; }
.empty-cart h3 { font-size: 1.32rem; }
.checkout { font-size: 0.74rem; padding: 14px; }
.payment-icons { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; padding-bottom: 6px; }
.payment-icons::-webkit-scrollbar { display: none; }
.payment-icons i { flex: 0 0 auto; }
}
/* ════════════════════════════════════════
WISHLIST MODAL — BBW4LIFE Ultra Premium
Beauty Has No Sizes
════════════════════════════════════════ */
.wishlist-modal {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
display: none;
align-items: center;
justify-content: center;
z-index: 19990;
}
.wishlist-modal.active { display: flex; }
.wishlist-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(8, 3, 12, 0.72);
backdrop-filter: blur(14px) saturate(1.4);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.modal-content {
background: #F6EFE5;
border-radius: 6px;
max-width: 460px;
width: 95%;
max-height: 88vh;
text-align: left;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
z-index: 2;
border: 1px solid var(--bbw-gold-border);
box-shadow:
0 40px 100px rgba(21, 17, 14, 0.42),
0 0 0 1px rgba(184, 146, 90, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.60);
transform: scale(0.90) translateY(24px);
opacity: 0;
transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.32s ease;
}
.wishlist-modal.active .modal-content {
transform: scale(1) translateY(0);
opacity: 1;
}
.wishlist-modal-shimmer {
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--bbw-gold) 30%,
var(--bbw-gold-light) 50%,
var(--bbw-gold) 70%,
transparent 100%
);
border-radius: 6px 6px 0 0;
z-index: 3;
}
@keyframes wl-modal-shimmer {
0% { background-position: -300% 0; }
100% { background-position: 300% 0; }
}
.modal-content::before {
content: '';
position: absolute;
top: -40px; left: 50%;
transform: translateX(-50%);
width: 280px; height: 80px;
background: radial-gradient(ellipse, rgba(201,150,62,0.18) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 22px 16px;
border-bottom: 1px solid rgba(201, 150, 62, 0.12);
flex-shrink: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.70) 0%, transparent 100%);
position: relative;
z-index: 1;
}
.wishlist-header-left {
display: flex;
align-items: center;
gap: 14px;
}
.wishlist-icon-wrap {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(184,146,90,0.20), rgba(110,36,57,0.22));
border: 1px solid var(--bbw-gold-border);
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 4px 16px rgba(21,17,14,0.28),
inset 0 1px 0 rgba(255,255,255,0.10);
flex-shrink: 0;
}
@keyframes wl-icon-pulse {
0%, 100% {
box-shadow: 0 4px 16px rgba(192,56,94,0.20), inset 0 1px 0 rgba(255,255,255,0.90);
}
50% {
box-shadow: 0 4px 28px rgba(192,56,94,0.42), 0 0 0 4px rgba(192,56,94,0.08), inset 0 1px 0 rgba(255,255,255,0.90);
}
}
.drawer-header h3 {
font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
font-size: 22px;
font-weight: 700;
color: #1a0a12;
margin: 0 0 3px;
letter-spacing: -0.3px;
line-height: 1;
}
.wishlist-subtitle {
font-family: var(--font-body, 'DM Sans', sans-serif);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--bbw-gold);
}
.close-modal {
width: 36px; height: 36px;
border-radius: 3px;
background: rgba(201, 150, 62, 0.10);
border: 1px solid var(--bbw-gold-border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--bbw-gold-light);
transition: all 0.30s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
.close-modal:hover {
background: var(--bbw-rose);
border-color: var(--bbw-rose-light);
color: #fff;
box-shadow: 0 4px 16px rgba(110, 36, 57, 0.42);
transform: rotate(90deg) scale(1.08);
}
.wishlist-bar-row {
display: flex;
gap: 5px;
padding: 14px 22px 0;
flex-shrink: 0;
}
.wishlist-bar {
flex: 1;
height: 2.5px;
background: rgba(201, 150, 62, 0.10);
border-radius: 4px;
overflow: hidden;
}
.wishlist-bar-fill {
height: 100%;
width: 0;
border-radius: 4px;
background: linear-gradient(90deg,
var(--bbw-gold),
var(--bbw-gold-light)
);
animation: wl-bar-grow 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wishlist-bar:nth-child(1) .wishlist-bar-fill { animation-delay: 0.08s; }
.wishlist-bar:nth-child(2) .wishlist-bar-fill { animation-delay: 0.24s; }
.wishlist-bar:nth-child(3) .wishlist-bar-fill { animation-delay: 0.40s; }
@keyframes wl-bar-grow { to { width: 100%; } }
.wishlist-items {
flex: 1;
overflow-y: auto;
padding: 14px 20px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.wishlist-items::-webkit-scrollbar { display: none; }
.wishlist-items .wishlist-item {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px 12px 16px;
border-radius: 4px;
border: 1px solid rgba(184, 146, 90, 0.16);
background: #fffdf9;
margin-bottom: 10px;
transition: all 0.30s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 2px 10px rgba(21, 17, 14, 0.05);
}
.wishlist-item::before {
content: '';
position: absolute;
left: 0; top: 8px; bottom: 8px;
width: 2px;
border-radius: 0 2px 2px 0;
background: linear-gradient(to bottom, var(--bbw-gold), var(--bbw-rose));
}
.wishlist-item::after {
content: '';
position: absolute;
top: 0; left: -80%;
width: 50%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(201,150,62,0.07), transparent);
transform: skewX(-15deg);
transition: none;
pointer-events: none;
}
.wishlist-item:hover::after {
left: 140%;
transition: left 0.55s ease;
}
.wishlist-item:last-child { margin-bottom: 0; }
.wishlist-item:hover {
border-color: rgba(184, 146, 90, 0.32);
box-shadow:
0 6px 20px rgba(21, 17, 14, 0.10),
0 0 0 1px rgba(184, 146, 90, 0.12);
transform: translateX(3px);
background: #ffffff;
}
.wishlist-item img {
width: 60px; height: 60px;
object-fit: cover;
border-radius: 3px;
border: 1px solid rgba(184, 146, 90, 0.20);
flex-shrink: 0;
transition: all 0.32s ease;
box-shadow: 0 4px 12px rgba(21,17,14,0.10);
}
.wishlist-item:hover img {
transform: scale(1.04);
box-shadow: 0 6px 16px rgba(21, 17, 14, 0.14);
border-color: rgba(184, 146, 90, 0.40);
}
.wishlist-item h4 {
flex-grow: 1;
font-family: var(--font-body, 'DM Sans', sans-serif);
font-size: 13px;
font-weight: 700;
color: #1a0a12;
margin: 0 0 5px;
line-height: 1.35;
}
.wishlist-item p {
margin: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.wishlist-item .current-price {
font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
font-size: 18px !important;
font-weight: 700 !important;
color: var(--bbw-rose) !important;
-webkit-text-fill-color: var(--bbw-rose) !important;
line-height: 1;
}
.wishlist-item .compare-price {
font-family: var(--font-body, 'DM Sans', sans-serif);
font-size: 11px !important;
color: rgba(21, 17, 14, 0.38) !important;
text-decoration: line-through;
font-weight: 400 !important;
}
.remove-wishlist {
background: rgba(184, 146, 90, 0.08);
border: 1px solid rgba(184, 146, 90, 0.20);
color: #8a6a2e;
cursor: pointer;
width: 32px; height: 32px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
margin-left: 6px;
}
.remove-wishlist:hover {
background: var(--bbw-rose);
color: #fff;
border-color: var(--bbw-rose-light);
box-shadow: 0 4px 12px rgba(110, 36, 57, 0.38);
transform: scale(1.08);
}
.wishlist-footer {
padding: 14px 20px 16px;
border-top: 1px solid rgba(184, 146, 90, 0.16);
flex-shrink: 0;
background: linear-gradient(180deg, transparent 0%, rgba(184,146,90,0.05) 100%);
}
.add-all-to-cart {
width: 100%;
padding: 15px 20px;
background: linear-gradient(135deg, var(--bbw-black) 0%, #221c16 50%, var(--bbw-black) 100%);
color: var(--bbw-gold-light);
border: 1px solid var(--bbw-gold-border-hi) !important;
cursor: pointer;
border-radius: 3px;
font-family: var(--font-body, 'DM Sans', sans-serif);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: all 0.32s ease;
box-shadow: 0 6px 22px rgba(21, 17, 14, 0.22);
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
position: relative;
overflow: hidden;
}
@keyframes wl-cta-glow {
0%, 100% { box-shadow: 0 6px 24px rgba(192,56,94,0.40), 0 0 0 1px rgba(201,150,62,0.15) inset; }
50% { box-shadow: 0 8px 36px rgba(192,56,94,0.60), 0 0 0 1px rgba(201,150,62,0.20) inset; }
}
.add-all-to-cart::before {
content: none;
}
@keyframes wl-btn-sweep {
0% { left: -100%; }
40% { left: 140%; }
100% { left: 140%; }
}
.add-all-to-cart svg,
.add-all-to-cart span {
position: relative;
z-index: 1;
color: var(--bbw-gold-light) !important;
}
.add-all-to-cart:hover {
background: linear-gradient(135deg, #221c16 0%, #2c251d 50%, #221c16 100%);
border-color: var(--bbw-gold) !important;
box-shadow:
0 10px 30px rgba(21, 17, 14, 0.30),
0 0 0 1px var(--bbw-gold-border) inset;
transform: translateY(-2px);
}
.add-all-to-cart:hover svg,
.add-all-to-cart:hover span { color: #f3d9a6 !important; }
.add-all-to-cart:active {
transform: translateY(0);
}
.cart-icon.added { animation: wl-bounce 0.5s; }
@keyframes wl-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* ── Fly to cart — vol de l'image produit vers l'icône panier ── */
.fly-to-cart {
position: fixed;
width: 56px;
height: 56px;
border-radius: 12px;
overflow: hidden;
z-index: 99999;
pointer-events: none;
box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 0 2px rgba(184,146,90,0.35);
transform: translate(-50%, -50%) scale(1);
opacity: 1;
background: #fff;
}
.fly-to-cart img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fly-to-cart__qty {
position: absolute;
bottom: 2px;
right: 2px;
background: var(--bbw-black, #15110E);
color: var(--bbw-gold, #B8925A);
font-size: 10px;
font-weight: 800;
line-height: 1;
padding: 3px 5px;
border-radius: 6px;
}
.fly-to-cart--go {
animation: fly-to-cart-arc 0.65s cubic-bezier(0.45, 0, 0.2, 1) forwards;
}
@keyframes fly-to-cart-arc {
0% {
transform: translate(-50%, -50%) scale(1) rotate(0deg);
opacity: 1;
}
35% {
transform:
translate(calc(-50% + (var(--fly-dx) * 0.35)), calc(-50% + (var(--fly-dy) * 0.35) - 90px))
scale(0.7)
rotate(-8deg);
opacity: 1;
}
75% {
transform:
translate(calc(-50% + (var(--fly-dx) * 0.8)), calc(-50% + (var(--fly-dy) * 0.8) - 20px))
scale(0.35)
rotate(6deg);
opacity: 1;
}
100% {
transform: translate(calc(-50% + var(--fly-dx)), calc(-50% + var(--fly-dy))) scale(0.1) rotate(0deg);
opacity: 0.2;
}
}
.wishlist-share-footer {
padding: 12px 20px 16px;
border-top: 1px solid rgba(184, 146, 90, 0.12);
flex-shrink: 0;
text-align: center;
background: transparent;
}
.wishlist-share-label {
font-family: var(--font-body, 'DM Sans', sans-serif);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--bbw-gold);
margin-bottom: 12px;
display: block;
}
.wishlist-share-icons {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.wishlist-share-btn {
width: 38px; height: 38px;
border-radius: 50%;
border: 1.5px solid rgba(201, 150, 62, 0.18);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.30s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
font-size: 14px;
position: relative;
overflow: hidden;
background: rgba(255,255,255,0.85);
box-shadow: 0 2px 8px rgba(30,10,20,0.08);
}
.wishlist-share-btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
opacity: 0;
transition: opacity 0.28s;
}
.wishlist-share-btn:hover::before { opacity: 1; }
.wishlist-share-btn:hover {
transform: translateY(-4px) scale(1.10);
box-shadow: 0 8px 22px rgba(30,10,20,0.18);
border-color: transparent;
}
.wishlist-share-btn--copy { color: var(--bbw-gold, #B8925A); }
.wishlist-share-btn--copy::before { background: var(--bbw-gold, #B8925A); }
.wishlist-share-btn--copy:hover { color: #fff; }
.wishlist-share-btn--fb { color: #1877f2; }
.wishlist-share-btn--fb::before { background: #1877f2; }
.wishlist-share-btn--fb:hover { color: #fff; }
.wishlist-share-btn--ig { color: #e1306c; }
.wishlist-share-btn--ig::before { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); }
.wishlist-share-btn--ig:hover { color: #fff; }
.wishlist-share-btn--tw { color: #000; }
.wishlist-share-btn--tw::before { background: #000; }
.wishlist-share-btn--tw:hover { color: #fff; }
.wishlist-share-btn--wa { color: #25d366; }
.wishlist-share-btn--wa::before { background: #25d366; }
.wishlist-share-btn--wa:hover { color: #fff; }
.wishlist-share-btn--pi { color: #e60023; }
.wishlist-share-btn--pi::before { background: #e60023; }
.wishlist-share-btn--pi:hover { color: #fff; }
/* Panneau de partage natif du téléphone — masqué par défaut, révélé en JS
uniquement si navigator.share est disponible (cf. script.js
initWishlistShare), même logique que .cp-share-btn--native (cart.css). */
.wishlist-share-btn--native { display: none; color: var(--bbw-plum, #6E2439); }
.wishlist-share-btn--native::before { background: var(--bbw-plum, #6E2439); }
.wishlist-share-btn--native:hover { color: #fff; }
.wishlist-share-btn i {
position: relative;
z-index: 1;
font-size: 14px;
}
@media (max-width: 768px) {
.modal-content {
border-radius: 6px;
max-height: 85vh;
}
.wishlist-items {
padding: 12px 12px;
}
.wishlist-items .wishlist-item {
padding: 10px 10px 10px 14px;
gap: 10px;
border-radius: 4px;
}
.wishlist-item img {
width: 52px;
height: 52px;
}
.remove-wishlist {
width: 30px;
height: 30px;
margin-left: 4px;
}
.add-all-to-cart {
padding: 13px 18px;
font-size: 13.5px;
}
}
@media (prefers-reduced-motion: reduce) {
.wishlist-modal-shimmer,
.wishlist-bar-fill,
.add-all-to-cart::before,
.add-all-to-cart,
.wishlist-icon-wrap {
animation: none !important;
transition: none !important;
}
.wishlist-bar-fill { width: 100%; }
}
/* ================================================================
BBW4LIFE — WISHLIST MINI ICONS (Cart, Drawer Extra, Product Grid)
================================================================ */
.bbw-mini-wish {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: rgba(255,255,255,0.92);
border: 1px solid #e4b722;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: all 0.25s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.bbw-mini-wish:hover {
border-color: #c9963e;
background: #fff;
transform: scale(1.12);
box-shadow: 0 4px 14px rgba(192,56,94,0.22);
}
.bbw-mini-wish svg {
width: 14px;
height: 14px;
flex-shrink: 0;
transition: all 0.22s ease;
}
.bbw-mini-wish .bbw-mw-empty {
display: block;
}
.bbw-mini-wish .bbw-mw-filled {
display: none;
}
.bbw-mini-wish.bbw-mw-active {
background: #fff0f3;
border-color: #e4b722;
box-shadow: 0 2px 12px rgba(192,56,94,0.25);
}
.bbw-mini-wish.bbw-mw-active .bbw-mw-empty { display: none; }
.bbw-mini-wish.bbw-mw-active .bbw-mw-filled { display: block; }
.cart-item-img-wrap,
.cp-item-img-wrap {
position: relative;
flex-shrink: 0;
}
.cart-item-img-wrap .bbw-mini-wish,
.cp-item-img-wrap .bbw-mini-wish {
bottom: 4px;
right: 4px;
left: auto;
transform: none;
width: 24px;
height: 24px;
}
.cart-item-img-wrap .bbw-mini-wish:hover,
.cp-item-img-wrap .bbw-mini-wish:hover {
transform: scale(1.14);
}
.cart-item-img-wrap .bbw-mini-wish.bbw-mw-active,
.cp-item-img-wrap .bbw-mini-wish.bbw-mw-active {
transform: scale(1.0);
}
.cart-item-img-wrap .bbw-mini-wish svg,
.cp-item-img-wrap .bbw-mini-wish svg {
width: 12px;
height: 12px;
}
.bd-product-item__media .bbw-mini-wish {
bottom: 3px;
right: 3px;
width: 20px;
height: 20px;
}
.bd-product-item__media .bbw-mini-wish svg {
width: 10px;
height: 10px;
}
.p2-upsell-img-wrap .bbw-mini-wish {
bottom: 2px;
right: 2px;
width: 18px;
height: 18px;
}
.p2-upsell-img-wrap .bbw-mini-wish svg {
width: 9px;
height: 9px;
}
.drawer-extra-card__img-wrap,
.cp-extra-card__img-wrap {
position: relative;
}
.drawer-extra-card__img-wrap .bbw-mini-wish,
.cp-extra-card__img-wrap .bbw-mini-wish {
bottom: 6px;
left: 6px;
top: auto;
right: auto;
width: 28px;
height: 28px;
}
.drawer-extra-card__img-wrap .bbw-mini-wish svg,
.cp-extra-card__img-wrap .bbw-mini-wish svg {
width: 13px;
height: 13px;
}
.rv-card__img-wrap {
position: relative;
}
.rv-card__img-wrap .bbw-mini-wish {
bottom: 6px;
right: 6px;
top: auto;
left: auto;
width: 28px;
height: 28px;
}
.rv-card__img-wrap .bbw-mini-wish svg {
width: 13px;
height: 13px;
}
.col-rv-card {
position: relative;
}
.col-rv-card > .bbw-mini-wish {
top: 8px;
left: 8px;
bottom: auto;
right: auto;
width: 28px;
height: 28px;
}
.col-rv-card > .bbw-mini-wish svg {
width: 13px;
height: 13px;
}
.col-fbt-card {
position: relative;
}
.col-fbt-card > .bbw-mini-wish {
top: 8px;
left: 8px;
bottom: auto;
right: auto;
width: 28px;
height: 28px;
}
.col-fbt-card > .bbw-mini-wish svg {
width: 13px;
height: 13px;
}
@media (max-width: 768px) {
.bbw-mini-wish {
width: 22px !important;
height: 22px !important;
}
.bbw-mini-wish svg {
width: 14px !important;
height: 14px !important;
}
}
/* ════════════════════════════════════════
BBW4LIFE — WATERMARK IMAGE OVERLAY
════════════════════════════════════════ */
.bbw-watermark {
position: absolute;
bottom: 12%;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-display, 'Cormorant Garamond', serif);
font-size: clamp(20px, 5.5vw, 40px);
font-weight: 900;
letter-spacing: 0.12em;
color: rgba(80, 60, 60, 0.32);
white-space: nowrap;
pointer-events: none;
user-select: none;
z-index: 5;
line-height: 1;
}
.col-card__media .bbw-watermark,
.rv-card__img-wrap .bbw-watermark {
font-size: clamp(15px, 4vw, 25px);
}
.cart-item-img-wrap .bbw-watermark,
.cp-item-img-wrap .bbw-watermark,
.drawer-extra-card__img-wrap .bbw-watermark,
.cp-extra-card__img-wrap .bbw-watermark {
font-size: 8px;
bottom: 6%;
max-width: 88%;
overflow: hidden;
text-overflow: ellipsis;
}
.bd-product-item__media .bbw-watermark {
font-size: 7px;
bottom: 6%;
max-width: 88%;
overflow: hidden;
text-overflow: ellipsis;
}
.p2-upsell-img-wrap .bbw-watermark {
font-size: 6px;
bottom: 6%;
max-width: 88%;
overflow: hidden;
text-overflow: ellipsis;
}
#main-image-slider .bbw-watermark {
font-size: clamp(24px, 4.5vw, 46px);
bottom: 10%;
z-index: 5;
}
.col-rv-card {
overflow: hidden;
position: relative;
}
.col-rv-card .bbw-watermark {
font-size: clamp(11px, 3vw, 18px);
bottom: 30%;
}
.col-fbt-card {
overflow: hidden;
position: relative;
}
.col-fbt-card .bbw-watermark {
font-size: clamp(11px, 3vw, 18px);
bottom: 30%;
}
.mini-media-slider .bbw-watermark {
font-size: clamp(11px, 3vw, 18px);
bottom: 8%;
}
.col-qv-media .bbw-watermark {
font-size: clamp(16px, 4vw, 28px);
}
.cf-pc-img-wrap .bbw-watermark {
font-size: clamp(9px, 2.5vw, 13px);
bottom: 8%;
}
.modal-zoom-container .bbw-watermark {
font-size: clamp(24px, 6vw, 46px);
top: 70%;
bottom: auto;
z-index: 3;
}
@media (max-width: 768px) {
.bbw-watermark {
font-size: clamp(14px, 4.5vw, 22px);
}
#main-image-slider .bbw-watermark {
font-size: clamp(18px, 5.5vw, 30px);
}
.col-rv-card .bbw-watermark,
.col-fbt-card .bbw-watermark {
font-size: clamp(12px, 3.5vw, 16px);
bottom: 40%;
}
.mini-media-slider .bbw-watermark {
font-size: clamp(10px, 3vw, 14px);
bottom: 8%;
}
.col-qv-media .bbw-watermark {
font-size: clamp(13px, 4vw, 20px);
}
.cf-pc-img-wrap .bbw-watermark {
font-size: clamp(8px, 2.5vw, 11px);
bottom: 8%;
}
}
@media (max-width: 768px) {
.cart-item-img-wrap .bbw-watermark,
.cp-item-img-wrap .bbw-watermark,
.drawer-extra-card__img-wrap .bbw-watermark,
.cp-extra-card__img-wrap .bbw-watermark {
font-size: 7px;
bottom: 9%;
}
}
/* ================================================================
BBW4LIFE — MINI LIKE/DISLIKE SUR CARTES PRODUIT
Même palette que #product-like-widget (page produit) — icônes rondes
sans compteur texte, coin bas-gauche pour ne jamais chevaucher les
icônes déjà présentes sur les cartes (wishlist/quick-view en haut-
droite, badges en haut-gauche, watermark centré en bas).
cf. initMiniLikeDislike dans script.js.
================================================================ */
.bbw-mini-like-widget {
position: absolute;
bottom: 8px;
left: 8px;
z-index: 6;
display: flex;
flex-direction: row;
gap: 6px;
}
.bbw-mini-like-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.bbw-mini-like-count {
font-size: 0.6rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.02em;
color: #15110E;
text-shadow: none;
}
.imq-card .bbw-mini-like-count {
color: #fdfaf5;
text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.bbw-mini-like-btn {
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(21,17,14,0.55);
border: 1px solid rgba(255,255,255,0.30);
display: flex;
align-items: center;
justify-content: center;
color: #fdfaf5;
cursor: pointer;
padding: 0;
box-shadow: 0 4px 14px rgba(0,0,0,0.22);
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.bbw-mini-like-btn:hover {
transform: scale(1.08);
}
.bbw-mini-like-btn--like.active {
background: var(--bbw-gold);
border-color: var(--bbw-gold);
color: #15110E;
}
.bbw-mini-like-btn--dislike.active {
background: #dc2626;
border-color: #dc2626;
color: #fdfaf5;
}
@media (max-width: 768px) {
.bbw-mini-like-widget { bottom: 6px; left: 6px; gap: 4px; }
.bbw-mini-like-btn { width: 18px; height: 18px; }
.bbw-mini-like-btn svg { width: 10px; height: 10px; }
.bbw-mini-like-count { font-size: 0.52rem; }
}
/* Cartes compactes (mini-slider, recently viewed, FBT, panier, wishlist) :
icônes encore plus réduites pour rester proportionnées et responsive. */
.rv-card__img-wrap .bbw-mini-like-widget,
.col-rv-card .bbw-mini-like-widget,
.col-fbt-card .bbw-mini-like-widget,
.cart-item-img-wrap .bbw-mini-like-widget,
.cp-item-img-wrap .bbw-mini-like-widget,
.wishlist-item .bbw-mini-like-widget,
.imq-card .bbw-mini-like-widget {
bottom: 4px;
left: 4px;
gap: 3px;
}
/* mini-product-slider / cart extra : wishlist deja en bas-gauche,
like/dislike passe a droite pour ne pas se superposer. */
.mini-media-slider .bbw-mini-like-widget,
.drawer-extra-card__img-wrap .bbw-mini-like-widget,
.cp-extra-card__img-wrap .bbw-mini-like-widget {
bottom: 4px;
left: auto;
right: 4px;
gap: 3px;
}
.mini-media-slider .bbw-mini-like-col,
.rv-card__img-wrap .bbw-mini-like-col,
.col-rv-card .bbw-mini-like-col,
.col-fbt-card .bbw-mini-like-col,
.cart-item-img-wrap .bbw-mini-like-col,
.cp-item-img-wrap .bbw-mini-like-col,
.drawer-extra-card__img-wrap .bbw-mini-like-col,
.cp-extra-card__img-wrap .bbw-mini-like-col,
.wishlist-item .bbw-mini-like-col,
.imq-card .bbw-mini-like-col {
gap: 1px;
}
.mini-media-slider .bbw-mini-like-count,
.rv-card__img-wrap .bbw-mini-like-count,
.col-rv-card .bbw-mini-like-count,
.col-fbt-card .bbw-mini-like-count,
.cart-item-img-wrap .bbw-mini-like-count,
.cp-item-img-wrap .bbw-mini-like-count,
.drawer-extra-card__img-wrap .bbw-mini-like-count,
.cp-extra-card__img-wrap .bbw-mini-like-count,
.wishlist-item .bbw-mini-like-count,
.imq-card .bbw-mini-like-count {
font-size: 0.46rem;
}
.mini-media-slider .bbw-mini-like-btn,
.rv-card__img-wrap .bbw-mini-like-btn,
.col-rv-card .bbw-mini-like-btn,
.col-fbt-card .bbw-mini-like-btn,
.cart-item-img-wrap .bbw-mini-like-btn,
.cp-item-img-wrap .bbw-mini-like-btn,
.drawer-extra-card__img-wrap .bbw-mini-like-btn,
.cp-extra-card__img-wrap .bbw-mini-like-btn,
.wishlist-item .bbw-mini-like-btn,
.imq-card .bbw-mini-like-btn {
width: 16px;
height: 16px;
}
.mini-media-slider .bbw-mini-like-btn svg,
.rv-card__img-wrap .bbw-mini-like-btn svg,
.col-rv-card .bbw-mini-like-btn svg,
.col-fbt-card .bbw-mini-like-btn svg,
.cart-item-img-wrap .bbw-mini-like-btn svg,
.cp-item-img-wrap .bbw-mini-like-btn svg,
.drawer-extra-card__img-wrap .bbw-mini-like-btn svg,
.cp-extra-card__img-wrap .bbw-mini-like-btn svg,
.wishlist-item .bbw-mini-like-btn svg,
.imq-card .bbw-mini-like-btn svg {
width: 9px;
height: 9px;
}
/* Bundle deal (home) / upsell panier : wishlist en bas-droite (cf.
plus haut), like/dislike en bas-gauche — formats les plus compacts
du site vu la petite taille des vignettes (72px / 62px). */
.bd-product-item__media .bbw-mini-like-widget {
bottom: 3px;
left: 3px;
gap: 2px;
}
.bd-product-item__media .bbw-mini-like-col {
gap: 1px;
}
.bd-product-item__media .bbw-mini-like-count {
font-size: 0.42rem;
}
.bd-product-item__media .bbw-mini-like-btn {
width: 14px;
height: 14px;
}
.bd-product-item__media .bbw-mini-like-btn svg {
width: 8px;
height: 8px;
}
.p2-upsell-img-wrap .bbw-mini-like-widget {
bottom: 2px;
left: 2px;
gap: 2px;
}
.p2-upsell-img-wrap .bbw-mini-like-col {
gap: 1px;
}
.p2-upsell-img-wrap .bbw-mini-like-count {
font-size: 0.4rem;
}
.p2-upsell-img-wrap .bbw-mini-like-btn {
width: 13px;
height: 13px;
}
.p2-upsell-img-wrap .bbw-mini-like-btn svg {
width: 7px;
height: 7px;
}
/* ================================================================
BBW4LIFE — CARD PRELOAD LOGO
Logo affiché en fond de chaque card produit tant que son image réelle
n'a pas fini de charger (cf. initCardPreloadLogo dans script.js).
================================================================ */
.bbw-card-preload-logo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
padding: 18%;
box-sizing: border-box;
background: var(--bbw-preload-bg, rgba(184,146,90,0.07));
z-index: 1;
pointer-events: none;
opacity: 1;
transition: opacity 0.35s ease;
}
.bbw-card-preload-logo.is-loaded {
opacity: 0;
}
.bbw-card-preload-logo--circular {
border-radius: 50%;
padding: 26%;
}
/* Wrapper généré dynamiquement autour d'une
isolée (ex: .bd-product-item,
image + texte côte à côte) — reprend exactement la taille/le radius de
l'image pour ne pas perturber le layout flex existant. */
.bbw-preload-img-wrap {
position: relative;
display: inline-block;
overflow: hidden;
flex-shrink: 0;
}
.bd-product-item .bbw-preload-img-wrap {
width: 72px !important;
height: 72px !important;
border-radius: 2px !important;
border: 1px solid var(--bbw-gold-border) !important;
}
.bd-product-item .bbw-preload-img-wrap img {
width: 100% !important;
height: 100% !important;
border: none !important;
}
/* Footer — "New Gems To Discover" : même principe, l'image occupe
toute la place dans son lien (.bbw-footer__newin-link). */
.bbw-footer__newin-link .bbw-preload-img-wrap {
width: 100%;
height: 100%;
display: block;
border-radius: 10px;
}
.bbw-footer__newin-link .bbw-preload-img-wrap img {
width: 100% !important;
height: 100% !important;
}
/* ================================================================
PAUL INDICATOR & POPUP — Ultra Premium BBW4LIFE Edition
================================================================ */
@keyframes paulPulse {
0%, 100% {
transform: scale(1);
box-shadow:
0 4px 14px rgba(21,17,14,0.40),
0 0 16px rgba(184,146,90,0.25);
}
50% {
transform: scale(1.05);
box-shadow:
0 6px 22px rgba(21,17,14,0.45),
0 0 26px rgba(184,146,90,0.40);
}
}
@keyframes shimmerBar {
0% { transform: translateX(-100%); }
100% { transform: translateX(220%); }
}
@keyframes borderGlow {
0%, 100% { opacity: 0.45; }
50% { opacity: 1; }
}
@keyframes popupSlideIn {
from { opacity: 0; transform: scale(0.88) translateY(24px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes particleDrift {
0% { transform: translateY(0px) rotate(0deg); opacity: 0.5; }
50% { transform: translateY(-14px) rotate(180deg); opacity: 1; }
100% { transform: translateY(0px) rotate(360deg); opacity: 0.5; }
}
@keyframes accentSlide {
0% { width: 0%; opacity: 0; }
100% { width: 60%; opacity: 1; }
}
@keyframes pulseRing {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.65); opacity: 0; }
}
@keyframes popupFade {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
@keyframes toastIn {
from { opacity: 0; transform: translateX(-50%) translateY(10px); }
to { opacity: 1; transform: translateX(-50%) translateY(-10px); }
}
/* ================================================================
WIDGETS DOCK — regroupe chat / cadeau / compte / navigation dans
une colonne collée à droite. Replié par défaut (seul le toggle est
visible) ; ouvert, les widgets s'affichent empilés à leur taille
normale. Les enfants gardent leur position:fixed d'origine tant
qu'ils ne sont pas déplacés en drag : on l'annule ici pour les
ancrer dans le flux du dock (colonne), le drag existant (qui pose
des styles inline left/bottom) reprend ensuite naturellement la
main dès qu'un widget est déplacé, car un style inline bat toujours
une règle de classe.
================================================================ */
#bbw-widgets-dock {
position: fixed;
right: 10px;
bottom: 20px;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
/* Le toggle doit toujours rester tout en bas de la pile (cf. image de
référence), quel que soit l'ordre DOM d'insertion des widgets (qui,
eux, s'empilent au-dessus dans leur ordre naturel de haut en bas). */
#bbw-widgets-dock-toggle {
order: 999;
}
#bbw-widgets-dock > *:not(#bbw-widgets-dock-toggle) {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
top: auto !important;
display: none !important;
}
/* Point d'interrogation — visible au repos (dock fermé), juste au-dessus
du toggle ; masqué dès que le dock s'ouvre (cf. règle .bbw-dock--open
plus bas), pour ne pas se mêler aux icônes déployées.
#bbw-widgets-dock > #bbw-dock-help-icon (spécificité 2 IDs) est
nécessaire ici — la règle générique "fermé" juste au-dessus
(#bbw-widgets-dock > *:not(#bbw-widgets-dock-toggle)) compte 2 IDs
elle aussi (:not(#id) compte comme un ID), donc un simple
#bbw-dock-help-icon (1 ID) perdait face à elle malgré !important. */
#bbw-widgets-dock > #bbw-dock-help-icon {
width: 40px;
color: var(--bbw-gold, #B8925A);
font-weight: 900;
font-size: 20px;
display: flex !important;
align-items: center;
justify-content: center;
order: 998;
pointer-events: none;
margin-bottom: -6px;
}
/* .bbw-dock-icon (wishlist/panier) a besoin de rester position:relative :
leur badge (.bbw-badge, position:absolute top/right négatifs) s'ancre
sur le PARENT positionné le plus proche — en position:static (forcé
ci-dessus pour les autres widgets, à l'origine position:fixed), le
badge remonte s'ancrer sur #bbw-widgets-dock (position:fixed) au lieu
du cercle de l'icône, et atterrit hors de l'écran/du cercle. */
#bbw-widgets-dock > .bbw-dock-icon:not(#bbw-widgets-dock-toggle) {
position: relative !important;
}
/* .bbw-dock-icon (wishlist/panier) exclu ici : leur display d'ouverture
(flex, pour centrer le SVG dans le cercle) est fixé par la règle dédiée
juste en dessous, pas par un revert générique qui les ramènerait au
display natif de
(block). #bbw-dock-help-icon exclu aussi : il
doit rester masqué à l'ouverture (règle dédiée plus bas), pas revenir
à son display normal comme les autres widgets. */
#bbw-widgets-dock.bbw-dock--open > *:not(#bbw-widgets-dock-toggle):not(.bbw-dock-icon):not(#bbw-dock-help-icon) {
display: revert !important;
}
/* Spécificité alignée (2 ID, via :not(#id) qui compte comme un ID) sur la
règle "fermé" ci-dessus (#bbw-widgets-dock > *:not(#bbw-widgets-dock-
toggle), display:none !important) pour que l'ouverture la batte, plus
la classe .bbw-dock--open sur le parent pour ne s'appliquer qu'ouvert. */
#bbw-widgets-dock.bbw-dock--open > .bbw-dock-icon:not(#bbw-widgets-dock-toggle) {
display: flex !important;
}
/* 3 IDs (#bbw-widgets-dock + .bbw-dock--open + #bbw-dock-help-icon) —
bat clairement la règle "visible par défaut" ci-dessus (2 IDs). */
#bbw-widgets-dock.bbw-dock--open > #bbw-dock-help-icon {
display: none !important;
}
/* Wishlist/panier réutilisent .bbw-icon-btn.icon-wrapper (header.css) tel
quel côté comportement (clic → ouvre drawer/wishlist, badges .cart-badge/
.wishlist-badge déjà synchronisés partout via updateBadges()) — seul
l'habillage visuel est réadapté ici pour matcher les cercles sombres du
dock plutôt que le style carré/doré du header. */
#bbw-widgets-dock .bbw-dock-icon {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
padding: 0 !important;
border-radius: 50% !important;
background: linear-gradient(145deg, #1a1310 0%, var(--bbw-black) 60%, #0c0906 100%) !important;
border: 1.5px solid var(--bbw-gold-border-hi) !important;
color: var(--bbw-gold-light) !important;
font-size: 18px !important;
line-height: 1 !important;
box-shadow: 0 4px 16px rgba(21,17,14,0.42), 0 0 18px rgba(184,146,90,0.28) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
/* Le SVG à l'intérieur est un élément inline-replaced : sans display:block
explicite, certains navigateurs lui laissent un espace d'alignement de
baseline qui décale visuellement le tracé hors du centre du cercle
flex, contrairement aux autres icônes du dock qui n'ont pas ce souci
(probablement car leur propre CSS d'origine fixe déjà ce point). */
#bbw-widgets-dock .bbw-dock-icon svg {
display: block !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
/* header.css (.bbw-icon-btn:hover, et ses variantes @media plus petites)
applique un fond doré clair et une taille réduite pensés pour le style
carré/discret du header — dans le dock, ça fait apparaître un rond
beige/clair au survol et une taille incohérente avec les autres icônes
du dock. On force l'apparence du dock ici, à toutes les tailles d'écran. */
#bbw-widgets-dock .bbw-dock-icon:hover {
background: linear-gradient(145deg, #2a1f18 0%, #1a1310 60%, #0c0906 100%) !important;
border-color: var(--bbw-gold-border-hi) !important;
color: var(--bbw-gold-light) !important;
}
#bbw-widgets-dock-toggle {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
outline: none;
background: var(--bbw-black, #15110E);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0,0,0,0.30);
transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
/* Sans ceci, certains navigateurs (Chrome/Safari mobile en particulier)
appliquent un fond de focus/tap par défaut sur
— visible ici
comme un flash blanc au clic, qui disparaît dès qu'on clique ailleurs
(perte du focus). Le bouton garde son propre fond noir dans tous les
états. */
#bbw-widgets-dock-toggle:hover,
#bbw-widgets-dock-toggle:active,
#bbw-widgets-dock-toggle:focus,
#bbw-widgets-dock-toggle:focus-visible {
background: var(--bbw-black, #15110E);
}
#bbw-widgets-dock-toggle svg {
transition: transform 0.25s ease;
}
#bbw-widgets-dock.bbw-dock--open #bbw-widgets-dock-toggle svg {
transform: rotate(180deg);
}
#bbw-widgets-dock-toggle:hover {
transform: scale(1.08);
}
@keyframes popupAnim {
from { opacity: 0; transform: translate(-50%, -60%); }
to { opacity: 1; transform: translate(-50%, -50%); }
}
/* ================================================================
INDICATOR WRAPPER
================================================================ */
.paul-indicator-wrapper {
position: fixed;
z-index: 999;
bottom: 20px;
right: 5px;
transition: all 0.30s cubic-bezier(0.4,0,0.2,1);
}
@media (max-width: 768px) {
.paul-indicator-wrapper { bottom: 15px; right: 5px; }
}
.paul-indicator-wrapper::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1.5px solid rgba(184,146,90,0.45);
animation: pulseRing 3s ease-out infinite;
pointer-events: none;
}
.paul-indicator-wrapper::after {
content: none;
}
.paul-indicator {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: linear-gradient(145deg, #1a1310 0%, var(--bbw-black) 60%, #0c0906 100%);
border: 1.5px solid var(--bbw-gold-border-hi);
border-radius: 50%;
color: var(--bbw-gold-light);
font-size: 20px;
box-shadow:
0 4px 16px rgba(21,17,14,0.42),
0 0 18px rgba(184,146,90,0.28),
inset 0 1px 0 rgba(255,255,255,0.10);
animation: paulPulse 3s infinite ease-in-out;
cursor: pointer;
text-decoration: none;
overflow: visible;
}
.paul-indicator::before {
content: none;
}
.paul-tooltip {
position: absolute;
right: 56px;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(135deg, var(--bbw-black) 0%, #1a1310 100%);
color: var(--bbw-gold-light);
padding: 8px 18px;
border-radius: 4px;
font-family: var(--font-body, 'DM Sans', sans-serif);
font-weight: 600;
font-size: 0.82rem;
letter-spacing: 0.04em;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
border: 1px solid var(--bbw-gold-border);
box-shadow:
0 4px 18px rgba(21,17,14,0.35),
inset 0 1px 0 rgba(255,255,255,0.06);
overflow: hidden;
pointer-events: none;
}
.paul-tooltip::before {
content: none;
}
.paul-indicator-wrapper:hover .paul-tooltip {
opacity: 1;
visibility: visible;
}
@media (max-width: 768px) {
.paul-tooltip {
font-size: 0.70rem;
white-space: normal;
max-width: 150px;
width: 150px;
text-align: center;
line-height: 1.4;
border-radius: 4px;
padding: 6px 10px;
}
}
/* ================================================================
POPUP OVERLAY
================================================================ */
.paul-popup-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(21,17,14,0.90);
z-index: 10000;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
}
.paul-popup-overlay.active {
display: flex;
}
.paul-popup-overlay.active::before {
content: '';
position: absolute;
inset: 0;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
pointer-events: none;
z-index: 0;
}
@media (max-width: 768px) {
.paul-popup-overlay {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(21, 17, 14, 0.96) !important;
}
}
/* ================================================================
POPUP BOX
================================================================ */
.paul-popup {
background: linear-gradient(160deg, var(--bbw-black) 0%, #1a1310 55%, #14100c 100%);
padding: 40px 32px 30px;
border-radius: 6px;
border: 1px solid var(--bbw-gold-border);
max-width: 440px;
width: 100%;
max-height: min(88vh, 680px);
overflow-y: auto;
text-align: center;
position: relative;
box-shadow:
0 32px 80px rgba(21,17,14,0.60),
0 0 0 1px rgba(184,146,90,0.10),
inset 0 1px 0 rgba(255,255,255,0.05);
scrollbar-width: none;
animation: popupSlideIn 0.38s cubic-bezier(0.34,1.56,0.64,1);
box-sizing: border-box;
}
.paul-popup::-webkit-scrollbar { display: none; }
.paul-popup::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--bbw-gold) 30%,
var(--bbw-gold-light) 50%,
var(--bbw-gold) 70%,
transparent 100%);
border-radius: 6px 6px 0 0;
}
.paul-popup::after {
content: '';
position: absolute;
bottom: 0; left: 15%; right: 15%;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(184,146,90,0.35),
rgba(110,36,57,0.28),
transparent);
border-radius: 0 0 6px 6px;
}
/* Particules flottantes retirées — rendu plus sobre/éditorial */
.paul-popup .paul-particle {
display: none !important;
}
.paul-close,
.popup-close {
position: absolute !important;
top: 14px !important;
right: 18px !important;
font-size: 24px !important;
color: rgba(201,150,62,0.40) !important;
cursor: pointer !important;
line-height: 1 !important;
z-index: 10;
transition: color 0.25s, transform 0.25s !important;
background: none;
border: none;
}
.paul-close:hover,
.popup-close:hover {
color: #e8bc6a !important;
transform: rotate(90deg) scale(1.15);
}
.paul-offer-title {
font-family: var(--font-display, 'Fraunces', Georgia, serif);
font-size: 1.9rem;
font-weight: 600;
background: linear-gradient(135deg, var(--bbw-gold-light) 0%, #f0cd8e 50%, var(--bbw-gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0 0 6px;
letter-spacing: 0.01em;
line-height: 1.18;
position: relative;
display: inline-block;
text-shadow: none;
}
.paul-offer-title::after {
content: '';
display: block;
margin: 8px auto 0;
height: 1.5px;
width: 0%;
background: linear-gradient(90deg,
transparent,
#e8bc6a,
rgba(201,150,62,0));
border-radius: 2px;
animation: accentSlide 0.9s cubic-bezier(0.4,0,0.2,1) 0.3s forwards;
}
.paul-offer-subtitle {
font-size: 0.88rem;
color: rgba(255,255,255,0.50);
margin-bottom: 20px;
font-weight: 300;
letter-spacing: 0.04em;
font-family: 'DM Sans', sans-serif;
}
.paul-popup hr,
.paul-divider {
border: none;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(184,146,90,0.32) 30%,
rgba(110,36,57,0.30) 70%,
transparent);
margin: 16px 0;
position: relative;
overflow: hidden;
}
.paul-popup hr::after,
.paul-divider::after {
content: none;
}
/* ================================================================
AUTH FORM
================================================================ */
.auth-form { margin-top: 12px; }
.auth-form h3 {
font-family: var(--font-display, 'Fraunces', Georgia, serif);
font-size: 1.4rem;
font-weight: 600;
background: linear-gradient(135deg, var(--bbw-gold-light), #f0cd8e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 14px;
letter-spacing: 0.01em;
position: relative;
display: inline-block;
}
.auth-form h3::after {
content: '';
display: block;
margin: 4px auto 0;
height: 1px;
width: 0%;
background: linear-gradient(90deg,
transparent,
rgba(201,150,62,0.65),
transparent);
border-radius: 2px;
animation: accentSlide 0.8s cubic-bezier(0.4,0,0.2,1) 0.2s forwards;
}
.auth-form input {
width: 100%;
padding: 13px 16px;
margin: 4px 0;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(184,146,90,0.18);
border-radius: 4px;
color: #fff;
font-family: var(--font-body, 'DM Sans', sans-serif);
font-size: 0.90rem;
box-sizing: border-box;
transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.auth-form input::placeholder {
color: rgba(246,239,229,0.30);
}
.auth-form input:focus {
outline: none;
border-color: var(--bbw-gold-border-hi);
background: rgba(255,255,255,0.06);
box-shadow:
0 0 0 2px rgba(184,146,90,0.14),
inset 0 1px 0 rgba(255,255,255,0.04);
}
.auth-form label {
color: rgba(255,255,255,0.45);
font-size: 0.80rem;
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0;
justify-content: flex-start;
text-align: left;
font-family: 'DM Sans', sans-serif;
}
.auth-form input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
max-width: 16px !important;
max-height: 16px !important;
margin: 0;
flex-shrink: 0;
accent-color: var(--bbw-gold);
transform: none !important;
transition: none !important;
}
.password-input-wrapper,
.password-wrapper {
position: relative !important;
width: 100% !important;
margin-bottom: 4px !important;
}
.password-input-wrapper input,
.password-wrapper input {
padding-right: 50px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.password-toggle {
position: absolute !important;
right: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 999 !important;
cursor: pointer !important;
color: rgba(255,255,255,0.35) !important;
font-size: 18px !important;
transition: color 0.22s;
}
.password-toggle:hover {
color: #e8bc6a !important;
}
/* ================================================================
BOUTONS
================================================================ */
.paul-btn {
width: 100%;
padding: 14px 20px;
border: none;
border-radius: 3px;
font-family: var(--font-body, 'DM Sans', sans-serif);
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 10px 0 6px;
cursor: pointer;
transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
position: relative;
overflow: hidden;
}
.paul-btn::before {
content: none;
}
.paul-btn-login,
.paul-btn-register {
background: linear-gradient(135deg,
var(--bbw-gold) 0%,
var(--bbw-gold-light) 50%,
var(--bbw-gold) 100%);
background-size: 200% 100%;
color: #1a1006;
box-shadow:
0 4px 20px rgba(184,146,90,0.35),
0 1px 0 rgba(255,255,255,0.35) inset;
}
@keyframes btnGoldPulse {
0%, 100% {
box-shadow:
0 4px 28px rgba(201,150,62,0.50),
0 0 0 1px rgba(201,150,62,0.20),
0 1px 0 rgba(255,255,255,0.40) inset;
}
50% {
box-shadow:
0 6px 44px rgba(201,150,62,0.75),
0 0 70px rgba(201,150,62,0.22),
0 0 0 1px rgba(201,150,62,0.35),
0 1px 0 rgba(255,255,255,0.40) inset;
}
}
.paul-btn-login:hover,
.paul-btn-register:hover {
background-position: 100% 0;
transform: translateY(-2px);
box-shadow:
0 8px 28px rgba(184,146,90,0.45),
0 1px 0 rgba(255,255,255,0.40) inset;
}
.paul-btn:active {
transform: scale(0.98) !important;
box-shadow: inset 0 2px 8px rgba(0,0,0,0.25) !important;
}
.switch-link {
color: rgba(255,255,255,0.38);
margin-top: 12px;
font-size: 0.82rem;
font-family: 'DM Sans', sans-serif;
}
.switch-link span {
color: #e8bc6a;
cursor: pointer;
font-weight: 600;
transition: color 0.2s, border-color 0.2s;
border-bottom: 1px solid rgba(232,188,106,0.35);
padding-bottom: 1px;
}
.switch-link span:hover {
color: #f5d080;
border-color: #f5d080;
}
/* ================================================================
TOAST
================================================================ */
.toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--bbw-black), #1a1310);
color: var(--bbw-gold-light);
padding: 14px 28px;
border-radius: 4px;
border: 1px solid var(--bbw-gold-border);
box-shadow:
0 8px 24px rgba(21,17,14,0.42),
inset 0 1px 0 rgba(255,255,255,0.06);
z-index: 10001;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
font-weight: 700;
font-family: var(--font-body, 'DM Sans', sans-serif);
white-space: nowrap;
max-width: 90vw;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.04em;
}
.toast::before {
content: none;
}
.toast.show {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-10px);
animation: toastIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
#error-popup {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(3px);
}
#error-popup.show {
display: flex;
animation: popupFadeIn 0.25s ease;
}
@keyframes popupFadeIn {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
#error-popup .popup-content {
background: #fff;
border-radius: 16px;
padding: 24px 4px 18px;
max-width: 220px;
width: calc(100% - 60px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
text-align: center;
border-top: 4px solid #c0385e;
position: relative;
}
#error-popup .popup-content::before {
content: '!';
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #fdeef3;
color: #c0385e;
font-size: 18px;
font-weight: 700;
margin: 0 auto 12px;
border: 2px solid #f5c0d0;
}
#error-popup .popup-text,
#popup-message {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #2d2d2d !important;
font-size: 14px !important;
line-height: 1.6 !important;
margin: 0 0 18px !important;
word-break: break-word;
white-space: normal;
letter-spacing: 0.01em;
}
#error-popup .popup-btn {
background: linear-gradient(135deg, #c0385e, #9e2a4a);
color: #fff;
border: none;
border-radius: 50px;
padding: 9px 32px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: transform 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 4px 14px rgba(192, 56, 94, 0.35);
}
#error-popup .popup-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(192, 56, 94, 0.45);
}
#error-popup .popup-btn:active {
transform: scale(0.97);
}
/* ================================================================
LEGACY / COMPAT
================================================================ */
.popup-overlay { display: none !important; }
.popup-overlay.open { display: flex !important; }
.popup { animation: popupFade 0.4s ease; }
.paul-policy-link {
text-align: left;
margin-top: 10px;
}
.paul-policy-link a {
color: rgba(201,150,62,0.50);
font-size: 0.80rem;
font-family: 'DM Sans', sans-serif;
font-weight: 500;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color 0.22s;
border-bottom: 1px solid transparent;
}
.paul-policy-link a:hover {
color: #e8bc6a;
border-bottom-color: rgba(201,150,62,0.40);
}
.paul-policy-link--small a {
font-size: 0.74rem;
color: rgba(201,150,62,0.38);
}
.paul-policy-link--small a:hover {
color: rgba(201,150,62,0.75);
}
.paul-policy-link i,
.paul-policy-link--small i {
font-size: 11px;
opacity: 0.80;
}
/* ================================================================
RESPONSIVE
================================================================ */
@media (max-width: 1024px) {
.product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
html {
overflow-x: hidden;
}
html, body {
margin: 0;
padding: 0;
}
.paul-popup-overlay {
padding: 12px 16px;
align-items: center;
}
.paul-popup {
max-height: min(85vh, 600px);
padding: 30px 22px 24px;
border-radius: 6px;
width: 100%;
max-width: 100%;
}
.paul-offer-title {
font-size: 1.60rem;
}
.auth-form input {
padding: 11px 14px;
font-size: 0.88rem;
}
.paul-btn {
padding: 12px 18px;
font-size: 0.84rem;
}
.shop-banner-section {
padding: 48px 20px 40px;
height: auto;
}
.banner-content h1 {
font-size: 1.8rem;
width: auto !important;
}
.banner-content h2 { font-size: 1.2rem; }
.banner-content p { font-size: 0.9rem; }
.product-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.product-grid .product-card img { height: 170px; }
.testimonials-mini { flex-direction: column; align-items: center; }
.statistics-mini { flex-direction: column; align-items: center; }
.comparison-table { font-size: 0.9rem; }
}
@media (max-width: 480px) {
.paul-popup-overlay {
padding: 10px 12px;
}
.paul-popup {
max-height: min(82vh, 560px);
padding: 26px 18px 20px;
border-radius: 6px;
}
.paul-offer-title { font-size: 1.40rem; }
.product-grid { grid-template-columns: 1fr; }
}
@keyframes fnavPulse {
0%, 100% {
box-shadow:
0 6px 24px rgba(201,150,62,0.50),
0 2px 6px rgba(0,0,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.25);
}
50% {
box-shadow:
0 8px 40px rgba(201,150,62,0.80),
0 0 60px rgba(201,150,62,0.22),
0 2px 6px rgba(0,0,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.30);
}
}
@keyframes fnavShimmer {
0% { left: -80%; }
100% { left: 160%; }
}
#floating-nav {
position: fixed;
bottom: 420px !important;
right: 40px !important;
z-index: 999;
}
.fnav-toggle {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid rgba(245,208,128,0.40);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
color: #1a0e00;
background: linear-gradient(135deg,
#c9963e 0%,
#e8bc6a 35%,
#f5d080 50%,
#e8bc6a 65%,
#c9963e 100%);
background-size: 300% 100%;
box-shadow:
0 6px 24px rgba(201,150,62,0.50),
0 2px 6px rgba(0,0,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.40),
inset 0 -1px 0 rgba(0,0,0,0.12);
transition: transform 0.3s ease, box-shadow 0.3s ease, background-position 0.5s ease;
position: relative;
z-index: 2;
overflow: hidden;
animation: fnavPulse 2.8s ease-in-out infinite;
}
.fnav-toggle::before {
content: '';
position: absolute;
top: 0; left: -80%;
width: 50%; height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255,255,255,0.38),
transparent);
animation: fnavShimmer 2.5s ease-in-out infinite;
pointer-events: none;
}
.fnav-toggle:hover {
background-position: 100% 0;
transform: scale(1.12);
box-shadow:
0 10px 42px rgba(201,150,62,0.72),
0 0 65px rgba(201,150,62,0.22),
inset 0 1px 0 rgba(255,255,255,0.45);
animation: none;
}
.fnav-toggle.open {
transform: rotate(45deg) scale(1.05);
animation: none;
}
.fnav-wheel {
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.fnav-wheel.open {
pointer-events: all;
opacity: 1;
}
.fnav-btn {
position: absolute;
width: 35px;
height: 35px;
border-radius: 50%;
border: 1px solid rgba(201,150,62,0.20);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: #e8bc6a;
background: linear-gradient(145deg, #1a0812 0%, #0d0d0d 60%, #130910 100%);
box-shadow:
0 4px 16px rgba(0,0,0,0.50),
0 0 0 1px rgba(201,150,62,0.07),
inset 0 1px 0 rgba(255,255,255,0.07),
inset 0 -1px 0 rgba(0,0,0,0.30);
transform: translate(-50%, -50%) scale(0);
transition:
transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
box-shadow 0.25s ease,
border-color 0.25s ease,
color 0.25s ease;
overflow: hidden;
}
.fnav-btn::before {
content: '';
position: absolute;
top: -40%; left: -40%;
width: 80%; height: 80%;
background: radial-gradient(ellipse,
rgba(201,150,62,0.14) 0%,
transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.fnav-top { top: -20px; left: 50%; transition-delay: 0.05s; }
.fnav-right { top: 50%; left: 60px; transition-delay: 0.10s; }
.fnav-bottom { top: 60px; left: 50%; transition-delay: 0.05s; }
.fnav-left { top: 60%; left: -20px; transition-delay: 0.10s; }
.fnav-refresh {
top: -26px;
left: 60px;
width: 36px;
height: 36px;
font-size: 0.85rem;
color: #1a0e00;
background: linear-gradient(135deg,
#c9963e 0%,
#e8bc6a 50%,
#c9963e 100%);
background-size: 200% 100%;
border: 1px solid rgba(245,208,128,0.35);
box-shadow:
0 4px 18px rgba(201,150,62,0.48),
inset 0 1px 0 rgba(255,255,255,0.38),
inset 0 -1px 0 rgba(0,0,0,0.12);
transition-delay: 0.15s;
}
.fnav-wheel.open .fnav-btn {
transform: translate(-50%, -50%) scale(1);
}
.fnav-btn:hover {
color: #f5d080;
background: linear-gradient(145deg, #2a1020 0%, #1a0d18 60%, #0d0d0d 100%);
border-color: rgba(201,150,62,0.55);
box-shadow:
0 8px 26px rgba(201,150,62,0.28),
0 0 22px rgba(201,150,62,0.14),
0 3px 6px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.10);
transform: translate(-50%, -50%) scale(1.18) translateY(-2px);
}
.fnav-refresh:hover {
background-position: 100% 0;
color: #1a0e00;
box-shadow:
0 8px 30px rgba(201,150,62,0.62),
0 0 45px rgba(201,150,62,0.22),
inset 0 1px 0 rgba(255,255,255,0.42);
transform: translate(-50%, -50%) scale(1.18) translateY(-2px);
}
.fnav-btn:active {
transform: translate(-50%, -50%) scale(0.94) translateY(1px) !important;
box-shadow:
0 2px 8px rgba(0,0,0,0.45),
inset 0 2px 6px rgba(0,0,0,0.35) !important;
}
.fnav-btn::after {
content: none;
position: absolute;
background: linear-gradient(135deg, #0d0d0d, #1a0812);
color: #e8bc6a;
font-size: 0.68rem;
font-family: var(--font-body, 'DM Sans', sans-serif);
font-weight: 600;
letter-spacing: 0.05em;
padding: 5px 12px;
border-radius: 20px;
border: 1px solid rgba(201,150,62,0.28);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 99999;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
box-shadow: 0 4px 16px rgba(0,0,0,0.40);
}
.fnav-top::after { content: 'Scroll top'; }
.fnav-right::after { content: 'Next page'; }
.fnav-bottom::after { content: 'Scroll bottom'; }
.fnav-left::after { content: 'Previous page'; }
.fnav-refresh::after { content: 'Refresh'; }
.fnav-top:hover::after,
.fnav-right:hover::after,
.fnav-bottom:hover::after,
.fnav-left:hover::after,
.fnav-refresh:hover::after { opacity: 1; }
@media (max-width: 768px) {
#floating-nav {
bottom: 500px !important;
right: 20px !important;
}
.fnav-toggle {
width: 36px;
height: 36px;
font-size: 1.25rem;
}
.fnav-btn {
width: 30px;
height: 30px;
font-size: 1rem;
}
.fnav-top { top: -5px; left: 50%; }
.fnav-right { top: 50%; left: 50px; }
.fnav-bottom { top: 55px; left: 50%; }
.fnav-left { top: 60%; left: -5px; }
.fnav-refresh {
top: -22px;
left: 45px;
width: 30px;
height: 30px;
}
.fnav-btn::after,
.fnav-top::after,
.fnav-right::after,
.fnav-bottom::after,
.fnav-left::after,
.fnav-refresh::after { display: none !important; }
}
/* ================================================================
BBW4LIFE — CHATBOT CSS — PREMIUM EDITION (LIGHT REWORK)
================================================================ */
#cf-chat-widget {
position: fixed;
bottom: 70px;
left: 5px;
z-index: 9998;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
font-family: var(--font-body);
touch-action: none;
user-select: none;
}
#cf-chat-toggle {
display: flex;
align-items: center;
gap: 0;
padding: 0;
width: 44px;
height: 44px;
background: linear-gradient(135deg, #0d0d0d 0%, #1a1200 60%, #c9963e 100%);
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 8px 32px rgba(201,150,62,0.35), 0 2px 8px rgba(0,0,0,0.18);
transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
border-radius 0.3s ease,
box-shadow 0.3s ease,
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
position: fixed;
bottom: 20px;
left: 5px;
z-index: 990;
outline: none;
overflow: hidden;
white-space: nowrap;
}
#cf-chat-toggle:hover {
width: auto;
border-radius: 4px;
padding: 0 20px 0 6px;
transform: translateY(-3px);
box-shadow: 0 14px 36px rgba(184,146,90,0.40), 0 4px 12px rgba(21,17,14,0.25);
}
/* Dans le widgets dock (#bbw-widgets-dock ouvert), les icônes sont
empilées serrées dans une colonne étroite : l'expansion en pilule
(width:auto + label) déborde sur les icônes voisines et crée une
bande translucide qui ressemble à un fond blanc/transparent parasite.
On garde donc le bouton en simple cercle, sans expansion, ici. */
#bbw-widgets-dock #cf-chat-toggle:hover {
width: 44px;
padding: 0;
border-radius: 50%;
}
#bbw-widgets-dock #cf-chat-toggle:hover .cf-toggle-label {
max-width: 0;
opacity: 0;
margin-left: 0;
}
#bbw-widgets-dock #cf-chat-toggle:hover .cf-toggle-inner {
width: 100%;
height: 100%;
background: transparent;
}
#cf-chat-toggle:active {
transform: translateY(0) scale(0.97);
}
.cf-toggle-inner {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.10);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin: 0 auto;
}
#cf-chat-toggle:not(:hover) .cf-toggle-inner {
margin: 0 auto;
width: 100%;
height: 100%;
border-radius: 50%;
background: transparent;
}
.cf-toggle-label {
font-size: 0.85rem;
font-weight: 700;
color: #f5d080;
letter-spacing: 0.06em;
white-space: nowrap;
max-width: 0;
overflow: hidden;
opacity: 0;
transition: max-width 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
margin-left: 0;
text-transform: uppercase;
}
#cf-chat-toggle:hover .cf-toggle-label {
max-width: 400px;
opacity: 1;
margin-left: 8px;
}
#cf-chat-toggle:hover .cf-toggle-inner {
width: 44px;
height: 44px;
min-width: 44px;
background: rgba(255,255,255,0.08);
margin: 0;
}
.cf-notif-dot {
position: absolute;
top: 6px;
right: 6px;
width: 10px;
height: 10px;
background: #c9963e;
border-radius: 50%;
border: 2px solid #0d0d0d;
animation: cf-pulse-dot 2s infinite;
display: none;
}
@keyframes cf-pulse-dot {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.75; }
}
.cf-chat-window {
position: absolute;
bottom: -60px;
left: 0;
width: 390px;
max-height: min(520px, calc(100vh - 90px));
background: #f7f2ea;
border-radius: 6px;
box-shadow: 0 24px 72px rgba(21,17,14,0.20), 0 8px 24px rgba(184,146,90,0.10);
border: 1px solid var(--bbw-gold-border);
display: flex;
flex-direction: column;
overflow: hidden;
transform-origin: bottom left;
transform: scale(0.85) translateY(20px);
opacity: 0;
pointer-events: none;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#cf-chat-widget.cf-right .cf-chat-window {
left: auto;
right: 0;
transform-origin: bottom right;
}
#cf-chat-widget.cf-top .cf-chat-window {
bottom: auto;
top: 72px;
transform-origin: top left;
}
#cf-chat-widget.cf-top.cf-right .cf-chat-window {
transform-origin: top right;
}
/* Widget ancré à droite : le bouton grandit vers la GAUCHE au survol/tap
(jamais vers la droite, hors écran). L'icône reste du côté ancré
(droite) et le texte s'étend vers la gauche — ordre visuel inversé via
row-reverse, padding en miroir, sans toucher à l'ordre du DOM.
#cf-chat-toggle est un FRÈRE de #cf-chat-widget dans le DOM (pas un
enfant) — la classe .cf-right est donc posée directement sur le
bouton lui-même par le JS, d'où le sélecteur direct ci-dessous. */
#cf-chat-toggle.cf-right:hover {
flex-direction: row-reverse;
padding: 0 6px 0 20px;
}
#cf-chat-toggle.cf-right:hover .cf-toggle-label {
margin-left: 0;
margin-right: 8px;
}
.cf-chat-window.cf-open {
transform: scale(1) translateY(0);
opacity: 1;
pointer-events: all;
}
.cf-chat-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
background: linear-gradient(135deg, #0d0d0d 0%, #1f1200 100%);
border-bottom: 1px solid rgba(201,150,62,0.30);
flex-shrink: 0;
position: relative;
}
.cf-live-chat-badge {
position: absolute;
bottom: 6px;
left: 66px;
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 600;
color: #6bd97a;
letter-spacing: 0.02em;
}
.cf-live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #6bd97a;
box-shadow: 0 0 6px #6bd97a;
animation: cfLiveDotPulse 1.6s ease-in-out infinite;
}
@keyframes cfLiveDotPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
.cf-chat-header::after {
content: '';
position: absolute;
bottom: 0;
left: 18px; right: 18px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--bbw-gold), transparent);
opacity: 0.6;
}
.cf-header-avatar {
position: relative;
flex-shrink: 0;
}
.cf-header-avatar img {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--bbw-gold);
background: #1a1200;
}
.cf-avatar-fallback {
display: none;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(201,150,62,0.18);
color: var(--bbw-gold);
font-weight: 700;
font-size: 1.1rem;
align-items: center;
justify-content: center;
border: 2px solid var(--bbw-gold);
}
.cf-header-avatar img:not([src]),
.cf-header-avatar img[src=""] {
display: none;
}
.cf-online-dot {
position: absolute;
bottom: 2px;
right: 2px;
width: 10px;
height: 10px;
background: #22c55e;
border-radius: 50%;
border: 2px solid #0d0d0d;
box-shadow: 0 0 8px rgba(34,197,94,0.6);
}
.cf-header-info {
flex: 1;
}
.cf-header-info h3 {
font-size: 0.96rem;
font-weight: 700;
color: var(--bbw-gold-light);
margin: 0;
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
letter-spacing: 0.04em;
}
.cf-ai-badge {
font-size: 0.60rem;
font-weight: 800;
letter-spacing: 0.12em;
background: rgba(201,150,62,0.18);
color: var(--bbw-gold);
padding: 2px 7px;
border-radius: 3px;
border: 1px solid rgba(201,150,62,0.45);
font-family: var(--font-body);
}
.cf-header-info p {
font-size: 0.74rem;
color: rgba(245,224,180,0.70);
margin: 2px 0 0;
font-weight: 400;
}
.cf-header-close {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(201,150,62,0.40);
background: rgba(201,150,62,0.08);
color: rgba(245,224,180,0.70);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}
.cf-header-close:hover {
background: rgba(201,150,62,0.20);
color: var(--bbw-gold);
border-color: var(--bbw-gold);
transform: scale(1.1);
}
.cf-quick-chips {
display: flex;
gap: 6px;
padding: 10px 14px;
overflow-x: auto;
flex-shrink: 0;
scrollbar-width: none;
background: #f0e8d8;
border-bottom: 1px solid rgba(201,150,62,0.18);
}
.cf-quick-chips::-webkit-scrollbar { display: none; }
.cf-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 7px 14px;
background: var(--bbw-black);
border: 1px solid var(--bbw-gold-border-hi);
border-radius: 3px;
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--bbw-gold);
cursor: pointer;
white-space: nowrap;
transition: all 0.22s ease;
flex-shrink: 0;
}
.cf-chip:hover {
background: var(--bbw-gold);
color: #000;
border-color: var(--bbw-gold);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(201,150,62,0.35);
}
.cf-messages {
flex: 1;
overflow-y: auto;
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 12px;
scroll-behavior: smooth;
background: #f7f2ea;
min-height: 0;
}
.cf-messages::-webkit-scrollbar { width: 4px; }
.cf-messages::-webkit-scrollbar-track { background: transparent; }
.cf-messages::-webkit-scrollbar-thumb {
background: rgba(201,150,62,0.30);
border-radius: 4px;
}
.cf-message {
display: flex;
flex-direction: column;
max-width: 82%;
animation: cf-msg-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cf-msg-in {
from { opacity: 0; transform: translateY(10px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.cf-message--ai { align-self: flex-start; align-items: flex-start; }
.cf-message--user { align-self: flex-end; align-items: flex-end; }
.cf-msg-bubble {
padding: 12px 16px;
border-radius: 10px;
font-size: 0.875rem;
line-height: 1.65;
word-break: break-word;
}
.cf-message--ai .cf-msg-bubble {
background: #fffaf2;
border: 1px solid rgba(184,146,90,0.22);
border-bottom-left-radius: 2px;
color: #2a1f10;
box-shadow: 0 2px 10px rgba(21,17,14,0.05);
}
.cf-message--user .cf-msg-bubble {
background: var(--bbw-black);
border: 1px solid var(--bbw-gold-border-hi);
color: var(--bbw-gold);
border-bottom-right-radius: 2px;
box-shadow: 0 4px 14px rgba(21,17,14,0.18);
font-weight: 500;
}
.cf-message--ai .cf-msg-bubble strong {
font-weight: 700;
color: #a87430;
}
.cf-link-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 14px;
background: var(--bbw-black);
border: 1px solid var(--bbw-gold-border-hi);
color: var(--bbw-gold) !important;
font-size: 0.76rem;
font-weight: 700;
border-radius: 3px;
text-decoration: none !important;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
margin: 3px 2px;
vertical-align: middle;
}
.cf-link-btn:hover {
background: var(--bbw-gold);
color: #000 !important;
transform: translateY(-1px);
box-shadow: 0 5px 18px rgba(201,150,62,0.40);
}
.cf-msg-time {
font-size: 0.68rem;
color: #9e8560;
margin-top: 4px;
padding: 0 4px;
}
.cf-product-cards {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
width: 100%;
max-width: 290px;
}
.cf-product-card {
background: #fffaf2;
border: 1px solid var(--bbw-gold-border);
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(21,17,14,0.05);
transition: all 0.22s ease;
}
.cf-product-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(21,17,14,0.12), 0 4px 12px rgba(21,17,14,0.08);
border-color: var(--bbw-gold-border-hi);
}
.cf-pc-img-wrap {
width: 100%;
height: 210px;
overflow: hidden;
background: #f0e8d8;
display: block;
line-height: 0;
font-size: 0;
}
.cf-pc-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
cursor: pointer;
transition: transform 0.3s ease;
}
.cf-pc-img:hover { transform: scale(1.04); }
.cf-pc-info { padding: 10px 12px 12px; }
.cf-pc-title {
font-size: 0.80rem;
font-weight: 700;
color: #1e1408;
line-height: 1.3;
margin-bottom: 4px;
}
.cf-pc-rating {
font-size: 0.72rem;
color: var(--bbw-gold);
margin-bottom: 5px;
}
.cf-pc-price {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
.cf-pc-price-current {
font-size: 0.95rem;
font-weight: 800;
color: #a87430;
}
.cf-pc-price-compare {
font-size: 0.72rem;
color: #9e8560;
text-decoration: line-through;
}
.cf-pc-colors {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: center;
margin-bottom: 3px;
}
.cf-pc-swatch {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,0.20);
transition: transform 0.18s ease, border-color 0.18s ease;
flex-shrink: 0;
}
.cf-pc-swatch:hover,
.cf-pc-swatch--active {
transform: scale(1.25);
border-color: var(--bbw-gold);
}
.cf-pc-swatch-more {
font-size: 0.70rem;
color: #9e8560;
line-height: 16px;
}
.cf-pc-color-label {
font-size: 0.70rem;
color: #7a6545;
font-style: italic;
min-height: 14px;
margin-bottom: 4px;
}
.cf-pc-sizes {
font-size: 0.70rem;
color: #7a6545;
margin-bottom: 4px;
line-height: 1.4;
}
.cf-pc-sizes strong { color: #1e1408; }
.cf-pc-delivery {
font-size: 0.70rem;
color: #16a34a;
margin-bottom: 8px;
}
.cf-pc-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
width: 100%;
padding: 10px 10px;
background: var(--bbw-black);
border: 1px solid var(--bbw-gold-border-hi);
color: var(--bbw-gold) !important;
font-size: 0.76rem;
font-weight: 700;
border-radius: 3px;
text-decoration: none !important;
cursor: pointer;
transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
box-shadow: 0 3px 10px rgba(21,17,14,0.16);
margin-top: 4px;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.cf-pc-btn:hover {
background: var(--bbw-gold);
color: #000 !important;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(201,150,62,0.40);
}
.cf-pc-btn svg { flex-shrink: 0; }
.cf-typing {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px 4px;
flex-shrink: 0;
background: #f7f2ea;
}
.cf-typing-bubble {
display: flex;
align-items: center;
gap: 4px;
background: #fff8f0;
padding: 10px 14px;
border-radius: 14px;
border: 1px solid rgba(201,150,62,0.25);
box-shadow: 0 2px 8px rgba(201,150,62,0.08);
}
.cf-typing-bubble span {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--bbw-gold);
opacity: 0.45;
animation: cf-typing-bounce 1.2s infinite;
}
.cf-typing-bubble span:nth-child(2) { animation-delay: 0.2s; }
.cf-typing-bubble span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cf-typing-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
30% { transform: translateY(-5px); opacity: 1; }
}
.cf-typing p {
font-size: 0.72rem;
color: #9e8560;
margin: 0;
font-style: italic;
}
.cf-input-area {
padding: 10px 12px 12px;
background: #f0e8d8;
border-top: 1px solid rgba(201,150,62,0.25);
flex-shrink: 0;
}
.cf-input-wrapper {
display: flex;
align-items: flex-end;
gap: 8px;
background: #fffaf2;
border: 1px solid rgba(184,146,90,0.30);
border-radius: 4px;
padding: 8px 8px 8px 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cf-input-wrapper:focus-within {
border-color: var(--bbw-gold);
box-shadow: 0 0 0 3px rgba(201,150,62,0.12);
background: #fffdf8;
}
#cf-input {
flex: 1;
border: none;
background: transparent;
font-family: var(--font-body);
font-size: 0.875rem;
color: #2a1f10;
resize: none;
outline: none;
line-height: 1.5;
max-height: 100px;
overflow-y: auto;
padding: 0;
}
#cf-input::placeholder {
color: #9e8560;
font-weight: 400;
}
.cf-send-btn {
width: 36px;
height: 36px;
border-radius: 3px;
border: 1px solid var(--bbw-gold-border-hi);
background: var(--bbw-black);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.22s ease;
box-shadow: 0 3px 10px rgba(0,0,0,0.20);
}
.cf-send-btn svg { color: var(--bbw-gold); fill: var(--bbw-gold); }
.cf-send-btn:disabled {
background: #e8e0d4;
border-color: rgba(201,150,62,0.20);
box-shadow: none;
cursor: not-allowed;
opacity: 0.5;
}
.cf-send-btn:not(:disabled):hover {
background: var(--bbw-gold);
transform: scale(1.1) translateY(-1px);
box-shadow: 0 6px 20px rgba(201,150,62,0.45);
}
.cf-send-btn:not(:disabled):hover svg { color: #000; fill: #000; }
.cf-send-btn:not(:disabled):active { transform: scale(0.95); }
.cf-subscribe-row {
display: flex;
justify-content: flex-end;
margin-bottom: 8px;
}
.cf-subscribe-btn {
display: flex;
align-items: center;
gap: 6px;
border: 1px solid var(--bbw-gold-border-hi);
background: linear-gradient(135deg, var(--bbw-gold) 0%, #e8bc6a 100%);
color: var(--bbw-black);
font-family: var(--font-body);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.02em;
padding: 6px 12px;
border-radius: 100px;
cursor: pointer;
box-shadow: 0 3px 10px rgba(201,150,62,0.30);
transition: all 0.22s ease;
}
.cf-subscribe-btn:hover {
transform: translateY(-1px);
box-shadow: 0 5px 16px rgba(201,150,62,0.45);
}
.cf-subscribe-btn:active { transform: scale(0.96); }
.cf-subscribe-btn svg { flex-shrink: 0; }
.cf-image-btn {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid rgba(184,146,90,0.30);
background: transparent;
color: #9e8560;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s ease;
}
.cf-image-btn:hover { color: var(--bbw-gold); border-color: var(--bbw-gold); background: rgba(201,150,62,0.08); }
.cf-image-preview {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
margin-bottom: 8px;
background: #fffaf2;
border: 1px solid rgba(184,146,90,0.30);
border-radius: 8px;
width: fit-content;
position: relative;
}
.cf-image-preview img {
width: 44px;
height: 44px;
object-fit: cover;
border-radius: 6px;
}
#cf-image-remove-btn {
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
background: var(--bbw-black);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cf-live-chat-title {
display: block;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--bbw-gold, #B8925A);
margin-bottom: 6px;
}
.cf-escalation-form {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
padding: 12px;
background: #fffaf2;
border: 1px solid rgba(184,146,90,0.30);
border-radius: 10px;
}
.cf-escalation-form input {
border: 1px solid rgba(184,146,90,0.30);
border-radius: 6px;
padding: 8px 10px;
font-family: var(--font-body);
font-size: 0.82rem;
background: #fff;
color: #2a1f10;
outline: none;
}
.cf-escalation-form input:focus { border-color: var(--bbw-gold); }
.cf-escalation-submit {
border: 1px solid var(--bbw-gold-border-hi);
background: var(--bbw-black);
color: var(--bbw-gold);
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 600;
padding: 9px 14px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.cf-escalation-submit:not(:disabled):hover { background: var(--bbw-gold); color: #000; }
.cf-escalation-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.cf-msg-image-wrap { margin-bottom: 4px; }
.cf-msg-image {
max-width: 160px;
max-height: 160px;
border-radius: 10px;
display: block;
object-fit: cover;
border: 1px solid rgba(184,146,90,0.30);
}
.cf-input-hint {
font-size: 0.66rem;
color: #9e8560;
text-align: center;
margin: 6px 0 0;
opacity: 0.7;
}
.cf-contact-btns {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0 4px 0;
}
.cf-contact-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 3px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: opacity 0.2s, transform 0.15s;
white-space: nowrap;
}
.cf-contact-btn:hover {
opacity: 0.88;
transform: translateY(-1px);
}
.cf-contact-btn--whatsapp { background: #25D366; color: #fff; }
.cf-contact-btn--telegram { background: #0088cc; color: #fff; }
.cf-contact-btn--page {
background: #0d0d0d;
border: 1.5px solid var(--bbw-gold);
color: var(--bbw-gold);
font-weight: 700;
}
.cf-promo-code {
display: inline-flex;
align-items: center;
gap: 4px;
background: #0d0d0d;
border: 1.5px solid var(--bbw-gold);
color: var(--bbw-gold);
font-family: 'Courier New', Courier, monospace;
font-weight: 800;
font-size: 0.82em;
letter-spacing: 0.10em;
padding: 3px 9px 3px 8px;
border-radius: 5px;
cursor: pointer;
user-select: none;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
vertical-align: middle;
white-space: nowrap;
}
.cf-promo-code:hover {
background: var(--bbw-gold);
color: #000;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(201,150,62,0.45);
}
.cf-promo-code:active { transform: translateY(0); }
.cf-promo-code--copied {
background: #00b894 !important;
border-color: #00b894 !important;
box-shadow: 0 2px 6px rgba(0,184,148,0.45) !important;
color: #fff !important;
}
.cf-promo-copy-icon {
opacity: 0.80;
flex-shrink: 0;
vertical-align: middle;
}
.mind-card-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
background: rgba(201,150,62,0.08);
border: 1px solid rgba(201,150,62,0.28);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.mind-card-icon i {
font-size: 22px;
color: #a87430;
transition: color 0.25s ease;
}
.mind-card:hover .mind-card-icon {
background: #0d0d0d;
border-color: var(--bbw-gold);
transform: scale(1.1);
}
.mind-card:hover .mind-card-icon i { color: var(--bbw-gold); }
.rtl-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
background: rgba(201,150,62,0.08);
border: 1px solid rgba(201,150,62,0.28);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
transition: background 0.25s ease, border-color 0.25s ease;
}
.rtl-icon i {
font-size: 24px;
color: #a87430;
transition: color 0.25s ease;
}
.rtl-card:hover .rtl-icon {
background: #0d0d0d;
border-color: var(--bbw-gold);
}
.rtl-card:hover .rtl-icon i { color: var(--bbw-gold); }
.free-badge {
display: inline-block;
background: var(--bbw-black);
border: 1px solid var(--bbw-gold-border-hi);
color: var(--bbw-gold);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
padding: 3px 9px;
border-radius: 3px;
text-transform: uppercase;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
box-shadow: 0 2px 8px rgba(21,17,14,0.18);
cursor: default;
white-space: nowrap;
vertical-align: middle;
margin-left: 6px;
}
.free-badge:hover {
background: var(--bbw-gold);
color: var(--bbw-black);
box-shadow: 0 4px 12px rgba(184,146,90,0.35);
}
.cf-page-btns {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.cf-page-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--bbw-black);
border: 1px solid var(--bbw-gold-border-hi);
border-radius: 3px;
color: var(--bbw-gold);
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(21,17,14,0.16);
}
.cf-page-btn:hover {
background: var(--bbw-gold);
border-color: var(--bbw-gold);
color: #000;
box-shadow: 0 4px 16px rgba(201,150,62,0.35);
transform: translateY(-1px);
}
.cf-page-btn-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.cf-page-btn-label { flex: 1; }
.cf-page-btn-arrow {
flex-shrink: 0;
opacity: 0.55;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.cf-page-btn:hover .cf-page-btn-arrow {
transform: translateX(4px);
opacity: 1;
}
.cf-msg-bubble strong { font-weight: 700; }
.cf-msg-bubble em { font-style: italic; }
.cf-msg-bubble a { color: #a87430; text-decoration: underline; }
#cf-chat-widget.cf-dragging { cursor: grabbing !important; }
#cf-chat-widget.cf-dragging * { cursor: grabbing !important; pointer-events: none; }
@media (max-width: 480px) {
#cf-chat-widget { bottom: 25px; left: auto; right: 4px; }
#cf-chat-toggle { left: auto; right: 4px; }
/* La fenêtre de chat ne suit plus la position du bouton (qui peut être
déplacé n'importe où par le client) — elle est ancrée à l'écran et
toujours centrée horizontalement, peu importe où l'icône se trouve. */
.cf-chat-window {
position: fixed;
left: 50% !important;
right: auto !important;
top: auto !important;
bottom: 24px !important;
transform: translateX(-50%) scale(0.85) translateY(20px);
transform-origin: bottom center !important;
width: calc(100vw - 24px);
max-height: min(72vh, calc(100vh - 120px));
}
.cf-chat-window.cf-open {
transform: translateX(-50%) scale(1) translateY(0);
}
#cf-chat-toggle {
width: 44px;
height: 44px;
border-radius: 50%;
padding: 0;
}
#cf-chat-toggle:hover {
width: auto;
max-width: calc(100vw - 16px);
border-radius: 26px;
padding: 0 16px 0 5px;
}
#cf-chat-toggle.cf-right:hover {
flex-direction: row-reverse;
padding: 0 5px 0 16px;
}
#cf-chat-toggle.cf-right:hover .cf-toggle-label {
margin-left: 0;
margin-right: 8px;
}
.cf-pc-img-wrap { height: 190px; }
}
/* ══════════════════════════════════════════════════════
BBW4LIFE — COOKIE CONSENT — COMPACT BAR + DETAILS MODAL
══════════════════════════════════════════════════════ */
/* Compact chat tooltip: keep the icon fixed and show its label to the left. */
#cf-chat-toggle {
overflow: visible;
}
#cf-chat-toggle .cf-toggle-label {
position: absolute;
top: 50%;
right: calc(100% + 10px);
width: max-content;
max-width: none;
margin: 0;
padding: 8px 12px;
border: 1px solid rgba(201,150,62,0.38);
border-radius: 7px;
background: #15110e;
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
color: #f5d080;
font-size: 13px;
letter-spacing: 0.01em;
text-transform: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(4px, -50%);
z-index: 1001;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
#cf-chat-toggle:hover {
width: 44px !important;
max-width: 44px !important;
padding: 0 !important;
border-radius: 50% !important;
}
#cf-chat-toggle:hover .cf-toggle-label {
max-width: none !important;
margin: 0 !important;
opacity: 1;
visibility: visible;
transform: translate(0, -50%);
}
#cf-chat-toggle.cf-right:hover .cf-toggle-label {
margin: 0 !important;
}
#bbw-widgets-dock #cf-chat-toggle:hover .cf-toggle-label {
max-width: none !important;
margin: 0 !important;
opacity: 1;
visibility: visible;
}
#cf-cookie-popup {
--ck-gold: #713477;
--ck-gold-dim: rgba(214, 69, 143, 0.10);
--ck-surface: #fff8fb;
--ck-border: rgba(113, 52, 119, 0.18);
--ck-text: #3f2638;
--ck-muted: #735c6d;
--ck-radius: 16px;
--ck-radius-sm: 11px;
}
#cf-cookie-popup {
position: fixed;
inset: auto 0 0 0;
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
#cf-cookie-popup.cfck-visible { opacity: 1; pointer-events: all; }
#cf-cookie-popup.cfck-hiding { opacity: 0; pointer-events: none; }
/* ══════════════════════════════
COMPACT BAR — default state
══════════════════════════════ */
#cf-cookie-bar {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 16px;
max-width: 980px;
margin: 0 auto;
padding: 14px 16px;
background: var(--ck-surface);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--ck-border);
border-bottom: none;
border-radius: var(--ck-radius) var(--ck-radius) 0 0;
box-shadow:
0 0 0 1px rgba(255,248,240,0.70) inset,
0 -18px 50px rgba(0,0,0,0.14);
transform: translateY(100%);
transition: transform 0.42s cubic-bezier(0.34,1.46,0.64,1);
flex-wrap: wrap;
}
#cf-cookie-popup.cfck-visible #cf-cookie-bar { transform: translateY(0); }
#cf-cookie-popup.cfck-modal-open #cf-cookie-bar { transform: translateY(100%); }
@keyframes cfck-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.cfck-bar-icon {
width: 38px;
height: 38px;
border-radius: 11px;
background: linear-gradient(135deg, #532044, #713477);
border: 1px solid rgba(214,69,143,0.48);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(83,32,68,0.18), 0 0 0 1px rgba(255,255,255,0.15) inset;
}
.cfck-bar-text {
flex: 1;
min-width: 220px;
font-size: 0.80rem;
color: var(--ck-muted);
line-height: 1.5;
margin: 0;
}
.cfck-bar-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.cfck-close-x {
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid rgba(113,52,119,0.20);
background: transparent;
color: var(--ck-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}
.cfck-close-x:hover {
color: #b83279;
border-color: #d6458f;
background: var(--ck-gold-dim);
}
/* ══════════════════════════════
CONFIRM STRIP (inside the bar)
══════════════════════════════ */
.cfck-confirm {
flex-basis: 100%;
display: flex;
align-items: center;
gap: 8px;
color: var(--ck-gold);
font-size: 0.78rem;
font-weight: 600;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 0.3s ease, max-height 0.35s ease, margin 0.3s ease;
}
.cfck-confirm--visible {
opacity: 1;
max-height: 40px;
margin-top: 8px;
}
/* ══════════════════════════════
DETAILS MODAL — opened via "Customize"
══════════════════════════════ */
#cf-cookie-overlay {
position: fixed;
inset: 0;
z-index: 1;
background: rgba(45,20,43,0.42);
backdrop-filter: blur(6px) saturate(1.4);
-webkit-backdrop-filter: blur(6px) saturate(1.4);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
#cf-cookie-popup.cfck-modal-open #cf-cookie-overlay { opacity: 1; pointer-events: all; }
#cf-cookie-modal {
position: fixed;
z-index: 3;
left: 50%;
bottom: 24px;
transform: translate(-50%, 24px);
width: calc(100% - 24px);
max-width: 560px;
max-height: calc(100dvh - 48px);
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
background: var(--ck-surface);
backdrop-filter: blur(28px) saturate(1.6);
-webkit-backdrop-filter: blur(28px) saturate(1.6);
border: 1px solid var(--ck-border);
border-radius: var(--ck-radius);
box-shadow:
0 0 0 1px rgba(255,255,255,0.86) inset,
0 40px 80px rgba(0,0,0,0.18),
0 0 60px rgba(214,69,143,0.10);
opacity: 0;
pointer-events: none;
transition: transform 0.38s cubic-bezier(0.34,1.46,0.64,1), opacity 0.3s ease;
}
#cf-cookie-modal::-webkit-scrollbar { display: none; }
#cf-cookie-popup.cfck-modal-open #cf-cookie-modal {
opacity: 1;
pointer-events: all;
transform: translate(-50%, 0);
}
.cfck-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px 12px;
background: linear-gradient(110deg, #fff0f7, #f8edf4);
border-bottom: 1px solid rgba(113,52,119,0.14);
position: sticky;
top: 0;
}
.cfck-header-left { display: flex; align-items: center; gap: 12px; }
.cfck-icon-wrap {
width: 42px;
height: 42px;
border-radius: 12px;
background: linear-gradient(135deg, #532044, #713477);
border: 1px solid rgba(214,69,143,0.48);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(83,32,68,0.18), 0 0 0 1px rgba(255,255,255,0.15) inset;
}
.cfck-title {
font-size: 1.02rem;
font-weight: 700;
color: var(--ck-text);
margin: 0 0 2px;
letter-spacing: -0.01em;
line-height: 1.15;
}
.cfck-subtitle {
font-size: 0.72rem;
color: #b83279;
margin: 0;
font-weight: 600;
opacity: 0.90;
}
.cfck-modal-close-x {
width: 30px;
height: 30px;
border-radius: 9px;
border: 1px solid rgba(113,52,119,0.22);
background: #fff;
color: #713477;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.22s ease;
flex-shrink: 0;
}
.cfck-modal-close-x:hover {
color: #fff;
background: #b83279;
border-color: #b83279;
transform: rotate(90deg) scale(1.08);
}
.cfck-body { padding: 14px 20px 6px; }
.cfck-link {
color: var(--ck-gold);
text-decoration: underline;
text-decoration-color: rgba(214,69,143,0.44);
text-underline-offset: 3px;
transition: color 0.2s;
font-weight: 600;
}
.cfck-link:hover { color: #b83279; }
.cfck-panels { display: flex; flex-direction: column; gap: 7px; }
.cfck-panel {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 13px;
background: #fff;
border: 1px solid rgba(113,52,119,0.14);
border-radius: var(--ck-radius-sm);
transition: border-color 0.22s, background 0.22s, box-shadow 0.22s;
gap: 12px;
position: relative;
overflow: hidden;
}
.cfck-panel::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.50) 0%, transparent 60%);
pointer-events: none;
}
.cfck-panel:hover {
border-color: rgba(214,69,143,0.38);
background: #fffafd;
box-shadow: 0 4px 20px rgba(113,52,119,0.10);
}
.cfck-panel--required {
background: #fff4f9;
border-color: rgba(214,69,143,0.24);
}
.cfck-panel--required:hover {
background: #fffafd;
border-color: rgba(214,69,143,0.42);
box-shadow: 0 4px 20px rgba(113,52,119,0.12);
}
.cfck-panel-left { display: flex; align-items: flex-start; gap: 11px; flex: 1; min-width: 0; }
.cfck-panel-icon {
width: 32px;
height: 32px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: linear-gradient(135deg, #532044, #713477);
color: #fff;
border: 1px solid rgba(214,69,143,0.32);
}
.cfck-panel-name {
display: block;
font-size: 0.82rem;
font-weight: 700;
color: var(--ck-text);
margin-bottom: 2px;
letter-spacing: -0.01em;
}
.cfck-panel-desc {
display: block;
font-size: 0.72rem;
color: var(--ck-muted);
line-height: 1.45;
}
.cfck-always-badge {
font-size: 0.68rem;
font-weight: 700;
color: var(--ck-gold);
background: linear-gradient(135deg, #532044, #713477);
color: #fff;
border: 1px solid rgba(214,69,143,0.48);
border-radius: 30px;
padding: 4px 10px;
white-space: nowrap;
flex-shrink: 0;
letter-spacing: 0.04em;
}
.cfck-toggle { position: relative; cursor: pointer; flex-shrink: 0; }
.cfck-toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.cfck-toggle-track {
display: block;
width: 42px;
height: 23px;
border-radius: 12px;
background: rgba(113,52,119,0.10);
border: 1px solid rgba(113,52,119,0.22);
position: relative;
transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.cfck-toggle input:checked + .cfck-toggle-track {
background: #713477;
border-color: #d6458f;
box-shadow: 0 0 12px rgba(214,69,143,0.24);
}
.cfck-toggle-thumb {
position: absolute;
top: 3px; left: 3px;
width: 15px; height: 15px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 5px rgba(0,0,0,0.20);
transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.cfck-toggle input:checked + .cfck-toggle-track .cfck-toggle-thumb {
transform: translateX(19px);
background: #fff;
}
.cfck-toggle:hover .cfck-toggle-track { border-color: rgba(214,69,143,0.55); }
/* ══════════════════════════════
BUTTONS — shared by bar + modal
══════════════════════════════ */
.cfck-footer {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 20px 18px;
flex-wrap: wrap;
background: linear-gradient(110deg, #fff0f7, #f8edf4);
border-top: 1px solid rgba(113,52,119,0.14);
position: sticky;
bottom: 0;
}
.cfck-btn {
flex: 1;
min-width: 92px;
height: 38px;
border-radius: 50px;
font-size: 0.76rem;
font-weight: 700;
cursor: pointer;
border: none;
transition: all 0.22s ease;
letter-spacing: 0.01em;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.cfck-btn--ghost {
background: #f2e8f1;
color: #65465f;
border: 1px solid rgba(113,52,119,0.16);
}
.cfck-btn--ghost:hover {
background: #ead9e8;
color: #532044;
border-color: rgba(113,52,119,0.34);
}
.cfck-btn--outline {
background: #fff;
color: #713477;
border: 1.5px solid rgba(113,52,119,0.42);
}
.cfck-btn--outline:hover {
background: #f8edf4;
color: #532044;
box-shadow: 0 4px 16px rgba(113,52,119,0.16);
}
.cfck-btn--primary {
background: linear-gradient(110deg, #532044, #713477 58%, #84264f);
color: #fff;
border: 1.5px solid rgba(214,69,143,0.46);
box-shadow: 0 4px 18px rgba(83,32,68,0.20), 0 0 0 1px rgba(255,255,255,0.10) inset;
}
.cfck-btn--primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
background-size: 200% 100%;
animation: cfck-shimmer 3s linear infinite;
border-radius: 50px;
}
.cfck-btn--primary:hover {
background: linear-gradient(110deg, #b83279, #d6458f);
color: #fff;
box-shadow: 0 8px 26px rgba(184,50,121,0.30);
transform: translateY(-2px);
}
.cfck-btn--primary:active { transform: translateY(0); box-shadow: 0 4px 16px rgba(113,52,119,0.22); }
/* ══════════════════════════════════════════════════════
MOBILE
══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
#cf-cookie-bar {
border-radius: 14px 14px 0 0;
padding: 12px;
gap: 10px;
}
.cfck-bar-text { font-size: 0.76rem; min-width: 100%; order: 3; }
.cfck-bar-icon { width: 34px; height: 34px; }
.cfck-bar-actions { width: 100%; order: 4; flex-wrap: wrap; }
.cfck-bar-actions .cfck-btn { min-width: 30%; }
#cf-cookie-modal {
bottom: 0;
width: 100%;
max-width: 100%;
max-height: calc(100dvh - 16px);
border-radius: 16px 16px 0 0;
transform: translate(-50%, 100%);
}
#cf-cookie-popup.cfck-modal-open #cf-cookie-modal {
transform: translate(-50%, 0);
}
.cfck-header { padding: 14px 16px 10px; }
.cfck-body { padding: 10px 16px 6px; }
.cfck-footer {
padding: 12px 16px 16px;
flex-direction: column;
gap: 8px;
}
.cfck-footer .cfck-btn {
width: 100%;
flex: none;
height: 46px;
font-size: 0.86rem;
}
.cfck-footer .cfck-btn--primary { order: 1; }
.cfck-footer .cfck-btn--outline { order: 2; }
.cfck-footer .cfck-btn--ghost { order: 3; }
.cfck-icon-wrap { width: 38px; height: 38px; }
.cfck-title { font-size: 0.96rem; }
.cfck-panel { padding: 10px 11px; }
.cfck-panel-icon { width: 28px; height: 28px; }
}
@keyframes rc-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@keyframes rc-slidein {
from { opacity: 0; transform: translateY(24px) scale(0.92); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rc-slideout {
to { opacity: 0; transform: translateY(16px) scale(0.93); }
}
@keyframes rc-urgency-drain {
from { width: 100%; }
to { width: 0%; }
}
@keyframes rc-glow-pulse {
0%, 100% {
box-shadow:
0 4px 6px rgba(0,0,0,0.06),
0 12px 44px rgba(123,79,184,0.18),
0 0 0 1px rgba(214,69,143,0.20),
-1px 0 0 rgba(214,69,143,0.22);
}
50% {
box-shadow:
0 4px 6px rgba(0,0,0,0.08),
0 16px 56px rgba(123,79,184,0.25),
0 0 40px rgba(240,111,166,0.14),
0 0 0 1px rgba(214,69,143,0.30),
-1px 0 0 rgba(214,69,143,0.32);
}
}
@keyframes rc-badge-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(214,69,143,0.28); }
50% { box-shadow: 0 0 0 4px rgba(214,69,143,0); }
}
@keyframes rc-btn-shimmer {
0% { left: -75%; }
100% { left: 160%; }
}
@keyframes rc-top-bar {
0% { background-position: -200% 0; opacity: 0.85; }
50% { background-position: 0% 0; opacity: 1; }
100% { background-position: 200% 0; opacity: 0.85; }
}
#rc-popup-container {
position: fixed;
z-index: 1001;
pointer-events: none;
}
#rc-popup-container.rc-pos-bottom-right { bottom: 28px; right: 28px; }
#rc-popup-container.rc-pos-bottom-left { bottom: 28px; left: 28px; }
#rc-popup-container.rc-pos-top-right { top: 95px; right: 28px; }
#rc-popup-container.rc-pos-top-left { top: 95px; left: 28px; }
#rc-popup {
pointer-events: all;
background: linear-gradient(160deg,
#ffffff 0%,
#faf6fe 55%,
#f8eff8 100%
);
border: 1px solid rgba(183,154,224,0.55);
border-radius: 24px;
padding: 0;
display: flex;
flex-direction: column;
max-width: 310px;
width: 100%;
overflow: hidden;
position: relative;
box-shadow:
0 4px 6px rgba(0,0,0,0.04),
0 12px 44px rgba(123,79,184,0.16),
0 0 0 1px rgba(214,69,143,0.12);
animation: rc-slidein 0.5s cubic-bezier(0.22,1,0.36,1) both, rc-glow-pulse 4s ease-in-out 0.6s infinite;
}
#rc-popup::before {
content: '';
display: block;
height: 3px;
width: 100%;
flex-shrink: 0;
background: linear-gradient(90deg,
transparent 0%,
#7b4fb8 10%,
#b79ae0 30%,
#f06fa6 50%,
#b79ae0 70%,
#7b4fb8 90%,
transparent 100%);
background-size: 200% 100%;
animation: rc-top-bar 3s ease-in-out infinite;
}
#rc-popup::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 120px; height: 120px;
background: radial-gradient(ellipse at top right,
rgba(240,111,166,0.12) 0%,
transparent 65%);
pointer-events: none;
}
#rc-popup.rc-hiding {
animation: rc-slideout 0.38s cubic-bezier(0.4,0,1,1) forwards;
}
#rc-popup-body {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px 6px 14px;
position: relative;
z-index: 1;
}
#rc-close {
position: absolute;
top: 12px;
right: 14px;
background: rgba(183,154,224,0.12);
border: 1px solid rgba(123,79,184,0.22);
cursor: pointer;
padding: 0;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(59,27,125,0.62);
transition: all 0.25s ease;
z-index: 2;
}
#rc-close:hover {
background: rgba(214,69,143,0.12);
border-color: rgba(214,69,143,0.45);
color: #5d3c90;
transform: rotate(90deg);
}
#rc-avatar-wrap {
flex-shrink: 0;
position: relative;
}
#rc-avatar-img,
#rc-avatar-video {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(183,154,224,0.78);
box-shadow:
0 0 0 3px rgba(214,69,143,0.12),
0 4px 14px rgba(0,0,0,0.12);
}
#rc-avatar-wrap::after {
content: '';
position: absolute;
bottom: 3px; right: 3px;
width: 10px; height: 10px;
background: #22c55e;
border-radius: 50%;
border: 2px solid #faf6fe;
box-shadow: 0 0 6px rgba(34,197,94,0.50);
}
#rc-content {
flex: 1;
min-width: 0;
padding-right: 20px;
}
#rc-subtitle {
font-size: 10px;
color: #7b4fb8;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 3px;
font-family: 'DM Sans', sans-serif;
}
#rc-title {
font-size: 13px;
font-weight: 700;
color: #2e0f6b;
margin: 0 0 3px;
line-height: 1.35;
font-family: 'DM Sans', sans-serif;
}
#rc-description {
font-size: 11px;
color: rgba(46,15,107,0.66);
margin: 0;
line-height: 1.50;
font-family: 'DM Sans', sans-serif;
}
#rc-count-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(183,154,224,0.16);
border: 1px solid rgba(123,79,184,0.28);
color: #5d3c90;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 50px;
margin: 8px 14px 0;
width: fit-content;
font-family: 'DM Sans', sans-serif;
letter-spacing: 0.03em;
animation: rc-badge-pulse 2.5s ease-in-out infinite;
}
#rc-count-badge svg { flex-shrink: 0; }
#rc-checkout-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
background: linear-gradient(135deg,
#a43b78 0%,
#cf4d91 48%,
#ed78ad 100%);
background-size: 300% 100%;
color: #ffffff;
border: 1.5px solid rgba(183,154,224,0.68);
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 11px 16px;
margin: 10px 12px 12px;
border-radius: 100px;
text-decoration: none;
transition: background-position 0.5s ease, transform 0.25s ease, box-shadow 0.25s ease;
box-shadow:
0 4px 20px rgba(0,0,0,0.25),
0 0 0 0 rgba(214,69,143,0),
0 1px 0 rgba(255,255,255,0.05) inset;
position: relative;
overflow: hidden;
font-family: 'DM Sans', sans-serif;
}
#rc-checkout-btn::before {
content: '';
position: absolute;
top: 0; left: -75%;
width: 50%; height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255,255,255,0.24),
transparent);
animation: rc-btn-shimmer 2.2s ease-in-out infinite;
pointer-events: none;
}
#rc-checkout-btn:hover {
background-position: 100% 0;
transform: translateY(-2px);
color: #ffffff;
box-shadow:
0 10px 32px rgba(0,0,0,0.35),
0 0 24px rgba(214,69,143,0.24),
0 0 0 1.5px rgba(183,154,224,0.72);
}
#rc-checkout-btn:active {
transform: scale(0.97);
}
#rc-urgency-bar {
height: 3px;
background: rgba(123,79,184,0.12);
margin: 0 12px 10px;
border-radius: 50px;
overflow: hidden;
position: relative;
z-index: 1;
}
#rc-urgency-fill {
height: 100%;
width: 100%;
background: linear-gradient(90deg,
#7b4fb8 0%,
#b79ae0 52%,
#f06fa6 100%);
border-radius: 50px;
animation: rc-urgency-drain linear forwards;
box-shadow: 0 0 8px rgba(214,69,143,0.28);
}
@media (max-width: 480px) {
#rc-popup-container.rc-pos-bottom-right { bottom: 14px; right: 10px; left: auto; }
#rc-popup-container.rc-pos-bottom-left { bottom: 14px; left: 10px; right: auto; }
#rc-popup-container.rc-pos-top-right { top: 78px; right: 10px; left: auto; }
#rc-popup-container.rc-pos-top-left { top: 78px; left: 10px; right: auto; }
#rc-popup {
max-width: 210px;
border-radius: 15px;
}
#rc-popup-body {
padding: 8px 10px 3px 10px;
gap: 8px;
}
#rc-avatar-img,
#rc-avatar-video {
width: 30px;
height: 30px;
}
#rc-subtitle { font-size: 8px; margin-bottom: 1px; }
#rc-title { font-size: 10px; margin-bottom: 1px; }
#rc-description { font-size: 8.5px; }
#rc-count-badge {
font-size: 8px;
padding: 2px 6px;
margin: 5px 10px 0;
}
#rc-checkout-btn {
font-size: 9.5px;
padding: 8px 10px;
margin: 6px 8px 8px;
}
#rc-urgency-bar {
height: 2px;
margin: 0 8px 8px;
}
#rc-close {
top: 8px;
right: 8px;
width: 18px;
height: 18px;
}
}
#snow-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 99998;
overflow: hidden;
}
.snow-el {
position: absolute;
top: -60px;
pointer-events: none;
animation: snow-fall linear infinite;
will-change: transform;
user-select: none;
}
@keyframes snow-fall {
0% {
transform: translateY(0) translateX(0) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 0.8;
}
100% {
transform: translateY(110vh) translateX(var(--snow-drift, 30px)) rotate(360deg);
opacity: 0;
}
}
.account-icon-wrapper {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0;
}
.account-icon-wrapper i {
font-size: 20px;
color: var(--primary-color, #e91e8c);
transition: transform 0.2s ease, color 0.2s ease;
}
.account-icon-wrapper:hover i {
transform: scale(1.15);
}
/* ================================================================
SKELETON SCREENS — placeholders imitant la structure réelle des
zones remplies dynamiquement (script.js/products.js), affichés
entre la disparition du preloader global et l'injection du vrai
contenu (voir src/components/skeleton.js). Même motif shimmer que
l'existant (.ac-skeleton dans collections.css, .cp-item-skeleton
dans cart.css) pour rester cohérent visuellement avec le site.
================================================================ */
.skel-shimmer {
background: linear-gradient(
90deg,
var(--bbw-gold-pale) 25%,
var(--bbw-gold-pale-mid) 50%,
var(--bbw-gold-pale) 75%
);
background-size: 400% 100%;
animation: bbwSkelShimmer 1.6s ease-in-out infinite;
}
@keyframes bbwSkelShimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.skel-abs-fill {
position: absolute;
inset: 0;
}
.skel-circle {
width: 100%;
height: 100%;
border-radius: 50%;
}
.skel-line {
height: 12px;
border-radius: 4px;
margin: 6px 0;
}
.skel-line--sm { height: 9px; width: 65%; }
.skel-line--xs { height: 8px; width: 46px; border-radius: 3px; margin: 6px 0 0; }
.skel-card-body { padding: 10px; }
.skel-thumb-placeholder {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 8px;
}
/* Cartes/éléments en état skeleton : pas d'interactions, animations de
hover réelles désactivées le temps que le vrai contenu arrive. */
/* Ne PAS mettre animation-play-state:paused ici : plusieurs composants
animation d'ENTRÉE (fade-in depuis opacity:0) — la mettre en pause fige
l'élément invisible à son état de départ pour toujours, ce qui rendait
le skeleton invisible. On coupe seulement les interactions/transitions
de survol, pas les animations elles-mêmes. */
.is-skeleton {
pointer-events: none !important;
}
.is-skeleton:hover { transform: none !important; box-shadow: none !important; }
.is-skeleton-thumb { position: relative; background: var(--bbw-gold-pale); }
.is-skeleton-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--bbw-gold-pale) 25%, var(--bbw-gold-pale-mid) 50%, var(--bbw-gold-pale) 75%);
background-size: 400% 100%;
animation: bbwSkelShimmer 1.6s ease-in-out infinite;
}
/* Texte du hero encore vide : on masque le texte réel (vide de toute
façon) et on affiche une ligne shimmer à sa place, sans changer sa
boîte englobante (même hauteur de ligne réservée par le CSS d'origine
du hero — pas de saut de layout à l'arrivée du vrai texte). */
.skel-text-loading {
position: relative;
color: transparent !important;
border-radius: 4px;
overflow: hidden;
background: linear-gradient(
90deg,
rgba(255,255,255,0.06) 25%,
rgba(255,255,255,0.14) 50%,
rgba(255,255,255,0.06) 75%
);
background-size: 400% 100%;
animation: bbwSkelShimmer 1.6s ease-in-out infinite;
}
.skel-text-loading::before {
content: '\00a0';
}
/* Variante pour les compteurs statistiques inline (data-stat-text) sur
fond clair — même motif que .skel-shimmer plutôt que la teinte
blanche pensée pour le hero sombre. */
.skel-text-loading--inline {
background: linear-gradient(
90deg,
var(--bbw-gold-pale) 25%,
var(--bbw-gold-pale-mid) 50%,
var(--bbw-gold-pale) 75%
);
background-size: 400% 100%;
}
/* Skeleton du header, présent dans le HTML statique de chaque page
pendant que src/components/header.html est fetché (layout-loader.js).
Même hauteur que le header réel (--ann-bar-h + --bbw-header-h,
header.css) pour ne jamais provoquer de saut de layout.
header.css pose "body { padding-top: var(--bbw-total-top) }" pour
réserver l'espace du header réel une fois chargé (position:fixed).
Ce skeleton, lui, est dans le flux normal — sans ce margin-top négatif,
le padding du body s'ajoute à sa hauteur et crée un grand espace noir
vide au-dessus de lui pendant le chargement. Le margin le remonte pour
qu'il occupe exactement l'espace réservé par ce padding. */
.skel-header-placeholder {
height: calc(var(--ann-bar-h, 40px) + var(--promo-bar-h, 27px) + var(--bbw-header-h, 84px));
margin-top: calc(-1 * var(--bbw-total-top, 187px));
/* Match the berry-plum header used on inner pages instead of the old
--bbw-black token, which now resolves to the blue-violet palette. */
background: linear-gradient(112deg, #532044 0%, #713477 52%, #84264f 100%);
display: flex;
flex-direction: column;
}
.skel-header-placeholder__ann {
height: var(--ann-bar-h, 40px);
flex-shrink: 0;
}
.skel-header-placeholder__promo {
height: var(--promo-bar-h, 27px);
flex-shrink: 0;
background: rgba(255,255,255,0.03);
}
/* Inner pages must not show a promo-bar skeleton while settings load.
Keep the homepage unchanged; it already controls its own placeholder. */
body:not(.home-page) .skel-header-placeholder__promo {
display: none !important;
}
.skel-header-placeholder__main {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
gap: 16px;
}
.skel-header-placeholder__burger {
width: 24px;
height: 18px;
border-radius: 3px;
flex-shrink: 0;
}
.skel-header-placeholder__logo {
width: 140px;
height: 36px;
border-radius: 4px;
}
.skel-header-placeholder__icons {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.skel-header-placeholder__icon {
width: 32px;
height: 32px;
border-radius: 50%;
}
@media (max-width: 768px) {
.skel-header-placeholder__logo { width: 100px; height: 28px; }
.skel-header-placeholder__icon { width: 26px; height: 26px; }
}
/* Skeleton du footer — contenu en bas de page, peu visible pendant le
chargement initial (au-delà du viewport) : un bloc de hauteur
approximative suffit à éviter le grand saut de layout sans reproduire
chaque colonne du footer réel (5 colonnes + bannière promo + bas de
page, cf. src/components/footer.html). */
.skel-footer-placeholder {
height: 480px;
}
@media (max-width: 768px) {
.skel-footer-placeholder { height: 620px; }
}
/* ============================================================
SEARCH GLOBAL — bbw-search.css — ULTRA PREMIUM
Palette : fond crème ivoire · bordure or · icônes or
section header fond noir · texte or
============================================================ */
.bbw-search-dropdown {
position: fixed;
z-index: 999999;
background: linear-gradient(160deg, #fdf8f0 0%, #faf4e8 50%, #f7f0e2 100%);
border: 1.5px solid rgba(201, 160, 62, 0.55);
border-radius: 18px;
box-shadow:
0 24px 64px rgba(30, 18, 8, 0.38),
0 4px 20px rgba(201, 160, 62, 0.18),
0 0 0 1px rgba(255, 248, 220, 0.80) inset;
overflow: hidden;
min-width: 370px;
max-width: 500px;
max-height: 440px;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
display: none;
font-family: inherit;
}
.bbw-search-dropdown::-webkit-scrollbar {
display: none;
}
.bbw-search-dropdown.open {
display: block;
animation: searchFadeIn .18s ease;
}
/* Search results page only: the dropdown must stay BELOW the fixed header
(z-index:1000) when scrolling, unlike everywhere else on the site where
it needs to float above all page content. Header itself is untouched. */
body.sr-page .bbw-search-dropdown {
z-index: 998;
}
@keyframes searchFadeIn {
from { opacity: 0; transform: translateY(-6px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.bbw-search-header {
padding: 10px 16px 6px;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .20em;
color: #c9a03e;
background: linear-gradient(90deg, #111008 0%, #1c1608 100%);
border-bottom: 1px solid rgba(201, 160, 62, 0.30);
border-top: 1px solid rgba(201, 160, 62, 0.15);
}
.bbw-search-header:first-child {
border-top: none;
}
.bbw-search-item {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px 12px 12px;
cursor: pointer;
border-bottom: 1px solid rgba(201, 160, 62, 0.12);
transition: background .15s ease;
text-decoration: none;
color: inherit;
overflow-x: hidden;
}
.bbw-search-item:last-child {
border-bottom: none;
}
.bbw-search-item:hover,
.bbw-search-item.active {
background: linear-gradient(90deg, rgba(201, 160, 62, 0.10), rgba(30, 18, 8, 0.05));
}
.bbw-search-icon {
font-size: 16px;
width: 36px;
text-align: center;
flex-shrink: 0;
line-height: 1;
color: #c9a03e;
}
.bbw-search-icon i {
color: #c9a03e !important;
}
/* Real product thumbnail (from products.data.json) shown next to the
type icon, to the left of the title — products only. */
.bbw-search-thumb {
display: block;
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
border: 1px solid rgba(201, 160, 62, 0.25);
background: #fff;
}
.bbw-search-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bbw-search-text {
flex: 1;
min-width: 0;
overflow-x: hidden;
padding-right: 10px;
}
.bbw-search-title {
font-size: 13.5px;
font-weight: 500;
color: #1c1206;
white-space: normal;
overflow-x: hidden;
word-break: break-word;
line-height: 1.45;
display: block;
}
.bbw-search-title mark {
background: rgba(201, 160, 62, 0.18);
color: #a07820;
border-radius: 3px;
padding: 0 3px;
font-weight: 700;
font-style: normal;
}
.bbw-search-price {
font-size: 12px;
font-weight: 600;
color: #c9a03e;
display: block;
margin-top: 2px;
}
.bbw-search-badge {
font-size: 9.5px;
font-weight: 600;
color: #c9a03e;
background: #111008;
border: 1px solid rgba(201, 160, 62, 0.45);
border-radius: 20px;
padding: 3px 9px;
white-space: nowrap;
flex-shrink: 0;
letter-spacing: .06em;
line-height: 1;
align-self: flex-start;
margin-top: 2px;
}
.bbw-search-empty {
padding: 22px 18px;
font-size: 13px;
color: #a09070;
text-align: center;
}
@media (max-width: 480px) {
.bbw-search-dropdown {
min-width: unset !important;
max-width: unset !important;
left: 8px !important;
right: 8px !important;
width: calc(100vw - 16px) !important;
}
}
/* ══════════════════════════════════════════════════════════════
SECTION BASE — fond chaud ambré ultra premium
══════════════════════════════════════════════════════════════ */
#wave-section * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wave-section {
position: relative;
width: 100%;
height: 28px;
background: #0d0d0d;
overflow: hidden;
isolation: isolate;
}
#wave-section .wave-container {
position: absolute;
width: 200%;
height: 100%;
bottom: 0;
left: 0;
}
#wave-section .wave {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
fill: #fdf8f2;
animation: wave-slide 10s linear infinite;
opacity: 0.92;
}
#wave-section .wave:nth-child(2) {
animation: wave-slide 14s linear infinite reverse;
opacity: 0.45;
fill: #fdf8f2;
}
@keyframes wave-slide {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Sur mobile, le viewBox fixe (1000 unités) rendait les pointes trop
rapprochées car la fenêtre visible ne montre qu'une fraction
constante du path quel que soit le viewport. Élargir le conteneur
affiche moins de pointes, donc plus espacées, sans toucher au path
ni casser la boucle d'animation (translateX reste relatif à 100%). */
@media (max-width: 768px) {
#wave-section .wave-container {
width: 380%;
}
}
/* ════════════════════════════════════════════════════════════════
BBW WAVE SEPARATORS — organic animated dividers used between
home sections that sit on contrasting backgrounds (dark <-> ivoire).
Same visual language as the footer's .bbw-finale-wave: an SVG path
drawn with cubic-bezier curves (never straight zigzag lines),
filled with the color of the *neighbouring* section so it reads
as an organic edge rather than a hard line. Purely decorative —
no id/class here is targeted by any JS.
════════════════════════════════════════════════════════════════ */
.bbw-wave-sep {
position: relative;
width: 100%;
line-height: 0;
overflow: hidden;
pointer-events: none;
}
.bbw-wave-sep svg { display: block; width: 100%; }
/* Légère respiration continue — jamais brusque, jamais kitsch.
Pas de translateX : la vague est dessinée pile sur la largeur du
viewBox (0 0 1200 90), donc tout décalage horizontal découvre un
bord vide sur le côté opposé. Seul scaleY respire, sans jamais
toucher aux bords gauche/droit. */
@keyframes bbw-wave-breathe {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(1.05); }
}
.bbw-wave-sep path {
transform-origin: center bottom;
animation: bbw-wave-breathe 11s ease-in-out infinite;
}
/* BBW Featured (ivoire) -> fond noir premium, vague blanche */
.bbw-wave-sep--nb {
background: var(--bbw-black);
height: 40px;
z-index: 2;
}
.bbw-wave-sep--nb svg { height: 40px; }
.bbw-wave-sep--nb path { fill: #ffffff; }
/* Bundle deal (ivoire) -> Community stories (noir) */
.bbw-wave-sep--stories {
position: absolute;
top: 0;
left: 0;
height: 58px;
z-index: 1;
}
.bbw-wave-sep--stories svg { height: 58px; }
.bbw-wave-sep--stories path { fill: #fdfaf5; }
.bbw-wave-sep--stories path { animation-duration: 13s; animation-direction: reverse; }
/* Vagues visibles (bande noire + vague ivoire) au-dessus/en-dessous de
"What Our Sisters Say" — meme poids visuel que la vague du footer.
La section reviews elle-meme (cartes, titre) garde sa couleur d'origine,
seule cette fine bande d'accent est coloree. Pas d'animation. */
.bbw-wave-sep--reviews-in,
.bbw-wave-sep--reviews-out {
position: relative;
width: calc(100% + 20px);
margin: 0 -10px;
height: 64px;
background: var(--bbw-black);
line-height: 0;
pointer-events: none;
}
.bbw-wave-sep--reviews-in svg,
.bbw-wave-sep--reviews-out svg { display: block; width: 100%; height: 64px; }
.bbw-wave-sep--reviews-in path,
.bbw-wave-sep--reviews-out path { fill: #fdfaf5; animation: none !important; }
/* Hero -> Our Story (ivoire) */
@media (max-width: 640px) {
.bbw-wave-sep--nb { height: 26px; }
.bbw-wave-sep--nb svg { height: 26px; }
.bbw-wave-sep--stories { height: 36px; }
.bbw-wave-sep--stories svg { height: 36px; }
.bbw-wave-sep--reviews-in { height: 28px; }
.bbw-wave-sep--reviews-in svg { height: 28px; }
.bbw-wave-sep--reviews-out { height: 28px; }
.bbw-wave-sep--reviews-out svg { height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
.bbw-wave-sep path { animation: none !important; }
}
/* ════════════════════════════════════════
TRUST BANNER — Ultra Premium
════════════════════════════════════════ */
/* ═══════════════════════════
BBW4LIFE — MARQUEE SECTION
═══════════════════════════ */
.bbw-marquee-section {
background: #000;
padding: 0;
overflow: hidden;
position: relative;
width: 100%;
box-sizing: border-box;
border-top: 2px solid var(--bbw-gold, #B8925A);
border-bottom: 2px solid var(--bbw-gold, #B8925A);
}
.bbw-marquee-section::before,
.bbw-marquee-section::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 120px;
z-index: 2;
pointer-events: none;
}
.bbw-marquee-section::before {
left: 0;
background: linear-gradient(to right, #0d0d0d 0%, transparent 100%);
}
.bbw-marquee-section::after {
right: 0;
background: linear-gradient(to left, #0d0d0d 0%, transparent 100%);
}
.bbw-marquee-track {
display: flex;
align-items: center;
padding: 14px 0;
width: 100%;
}
.bbw-marquee-inner {
display: flex;
align-items: center;
white-space: nowrap;
animation: bbwMarqueeRight 50s linear infinite !important;
will-change: transform;
}
.bbw-marquee-inner:hover {
animation-play-state: paused;
}
@keyframes bbwMarqueeRight {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
.bbw-marquee-item {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 0 30px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
color: rgba(246, 239, 229, 0.85);
text-transform: uppercase;
white-space: nowrap;
transition: color 0.2s;
}
.bbw-marquee-item i {
color: var(--bbw-gold, #B8925A);
font-size: 13px;
}
.bbw-marquee-item:hover {
color: var(--bbw-gold-light, #e8bc6a);
}
.bbw-marquee-sep {
color: var(--bbw-gold, #B8925A);
font-size: 11px;
flex-shrink: 0;
opacity: 0.5;
}
@media (max-width: 768px) {
.bbw-marquee-section::before,
.bbw-marquee-section::after {
width: 60px;
}
.bbw-marquee-item {
font-size: 11px;
padding: 0 20px;
}
.bbw-marquee-inner {
animation-duration: 30s !important;
}
}
/* ══════════════════════════════════════════════════════════════
HOME — "FROM THE JOURNAL" — 4 cartes blog (réutilise .blog-card
de /blog/blog.css pour un rendu visuel identique à la page blog)
══════════════════════════════════════════════════════════════ */
.comm-blog-section {
background: #fff;
padding: 44px 10px 0;
position: relative;
overflow: hidden;
}
.comm-blog-section .bbw-wave-sep--reviews-out { margin-top: 50px; }
.comm-blog-header { margin-bottom: 32px; }
/* Description tronquée à 3 lignes avec "…" — seulement dans cette section
home (comm-blog-scroller), la vraie page /blog garde l'excerpt complet. */
.comm-blog-scroller .blog-card-body p {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
flex: none !important;
max-height: calc(1.72em * 3);
}
/* Desktop : 4 colonnes fixes, une seule ligne */
.comm-blog-scroller {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.comm-blog-cta {
text-align: center;
margin-top: 32px;
}
.comm-blog-cta-btn {
display: inline-block;
font-family: inherit;
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bbw-gold, #c9963e);
background: #15110E;
background-size: 200% auto;
border: 1px solid var(--bbw-gold, #c9963e);
border-radius: 100px;
padding: 15px 32px;
cursor: pointer;
text-decoration: none;
transition: background-position 0.45s ease, transform 0.25s ease, box-shadow 0.30s ease;
box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.08) inset;
position: relative;
overflow: hidden;
}
.comm-blog-cta-btn::before {
content: '';
position: absolute;
top: 0; left: -80%;
width: 55%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
animation: comm-blog-cta-shimmer 2.8s ease-in-out infinite;
pointer-events: none;
}
.comm-blog-cta-btn:hover {
background-position: right center;
transform: translateY(-3px);
box-shadow: 0 12px 36px rgba(0,0,0,0.48);
color: var(--bbw-gold-light, #e8bc6a);
}
.comm-blog-cta-btn:active {
transform: scale(0.97);
}
@keyframes comm-blog-cta-shimmer {
0% { left: -80%; }
100% { left: 130%; }
}
@media (max-width: 1100px) {
.comm-blog-scroller { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.comm-blog-section { padding: 30px 0 0; }
.comm-blog-section .bbw-wave-sep--reviews-out { margin-top: 36px; }
/* Mobile : rangée horizontale scrollable, ~1.5 carte visible,
barre de scroll masquée (le geste swipe reste actif) */
.comm-blog-scroller {
display: flex;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 14px;
padding: 0 10px 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge legacy */
}
.comm-blog-scroller::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.comm-blog-scroller .blog-card {
flex: 0 0 66%;
scroll-snap-align: start;
}
.comm-blog-cta { padding: 0 10px; }
}
/* ──────────────────────────────────────────────────────────────
BBW4LIFE — BUNDLE DEAL — PREMIUM
────────────────────────────────────────────────────────────── */
.bundle-deal-section {
padding: 64px 0 16px !important;
background: #fdfaf5 !important;
position: relative !important;
overflow: hidden !important;
}
.bundle-deal-section .container {
padding: 0 10px !important;
box-sizing: border-box !important;
position: relative !important;
z-index: 2 !important;
}
.bd-header {
text-align: center !important;
max-width: 640px !important;
margin: 0 auto 5px !important;
}
.bd-tag {
display: inline-block !important;
background: var(--bbw-black) !important;
border: 1px solid var(--bbw-gold-border) !important;
color: var(--bbw-gold) !important;
font-family: var(--font-body) !important;
font-size: 0.68rem !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
padding: 6px 20px !important;
border-radius: 2px !important;
margin-bottom: 16px !important;
text-shadow: none !important;
}
.bd-header h2 {
font-family: var(--font-display) !important;
font-size: clamp(1.9rem, 3.5vw, 2.8rem) !important;
font-weight: 600 !important;
font-style: italic;
color: var(--bbw-black) !important;
margin: 0 0 14px !important;
line-height: 1.18 !important;
letter-spacing: 0.01em !important;
text-shadow: none !important;
}
.bd-header h2 em {
font-style: italic !important;
color: var(--bbw-gold) !important;
}
.bd-header p {
font-family: var(--font-body) !important;
font-size: 0.94rem !important;
color: rgba(21,17,14,0.55) !important;
line-height: 1.70 !important;
margin: 0 !important;
}
.bd-inner {
max-width: 1100px !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: 1fr auto !important;
gap: 44px !important;
align-items: center !important;
}
.bd-products {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
.bd-product-item {
display: flex !important;
align-items: center !important;
gap: 18px !important;
background: #fff !important;
border: 1px solid var(--bbw-gold-border) !important;
border-radius: 4px !important;
padding: 18px 22px !important;
position: relative !important;
transition: border-color 0.30s ease !important;
}
.bd-product-item:hover {
border-color: var(--bbw-gold) !important;
}
.bd-item-glow { display: none !important; }
.bd-product-item img {
width: 72px !important;
height: 72px !important;
object-fit: cover !important;
border-radius: 2px !important;
flex-shrink: 0 !important;
border: 1px solid var(--bbw-gold-border) !important;
}
.bd-product-item__media {
display: block !important;
flex-shrink: 0 !important;
position: relative !important;
}
.bd-product-item__title {
text-decoration: none !important;
color: inherit !important;
}
.bd-product-item__title:hover strong {
color: var(--bbw-gold) !important;
}
.bd-product-info {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
}
.bd-product-info strong {
font-family: var(--font-display) !important;
font-size: 1.05rem !important;
color: var(--bbw-black) !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
}
.bd-product-info span {
font-family: var(--font-body) !important;
font-size: 0.76rem !important;
color: rgba(21,17,14,0.55) !important;
}
.bd-product-price {
font-family: var(--font-body) !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
color: var(--bbw-gold) !important;
flex-shrink: 0 !important;
}
.bd-plus {
text-align: center !important;
font-size: 1.1rem !important;
color: var(--bbw-gold) !important;
font-weight: 600 !important;
margin: 6px 0 !important;
padding-left: 22px !important;
text-shadow: none !important;
}
.bd-summary {
min-width: 300px !important;
background: #fff !important;
border: 1px solid var(--bbw-gold-border) !important;
border-radius: 4px !important;
padding: 32px 28px !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
box-shadow: 0 12px 50px rgba(21,17,14,0.08) !important;
position: relative !important;
}
.bd-summary::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 1px !important;
background: var(--bbw-gold-border-hi) !important;
}
.bd-summary-shine { display: none !important; }
.bd-price-box {
display: flex !important;
flex-direction: column !important;
gap: 7px !important;
padding-top: 10px !important;
border-top: 1px solid var(--bbw-gold-border) !important;
}
.bd-original {
font-family: var(--font-body) !important;
color: rgba(21,17,14,0.40) !important;
font-size: 0.86rem !important;
}
.bd-original s {
color: rgba(21,17,14,0.30) !important;
}
.bd-save {
font-family: var(--font-body) !important;
color: var(--bbw-gold) !important;
font-size: 0.94rem !important;
font-weight: 700 !important;
}
.bd-total {
font-family: var(--font-body) !important;
color: rgba(21,17,14,0.50) !important;
font-size: 0.86rem !important;
}
.bd-total-price {
font-family: var(--font-display) !important;
font-size: 2.6rem !important;
color: var(--bbw-black) !important;
display: block !important;
margin-top: 4px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
}
.bd-benefits {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
padding: 16px 18px !important;
background: var(--bbw-gold-pale) !important;
border: 1px solid var(--bbw-gold-border) !important;
border-radius: 4px !important;
}
.bd-benefit {
font-family: var(--font-body) !important;
color: var(--bbw-black) !important;
font-size: 0.83rem !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.bd-benefit::before {
content: '' !important;
width: 4px !important;
height: 4px !important;
border-radius: 50% !important;
background: var(--bbw-gold) !important;
flex-shrink: 0 !important;
}
.bd-cta {
display: block !important;
text-align: center !important;
background: var(--bbw-black) !important;
color: var(--bbw-gold) !important;
-webkit-text-fill-color: unset !important;
font-family: var(--font-body) !important;
font-weight: 600 !important;
font-size: 0.88rem !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
padding: 17px 22px !important;
border-radius: 2px !important;
text-decoration: none !important;
border: 1px solid var(--bbw-gold) !important;
transition: background 0.25s ease, color 0.25s ease !important;
position: relative !important;
}
.bd-cta:hover {
background: var(--bbw-gold) !important;
color: var(--bbw-black) !important;
-webkit-text-fill-color: unset !important;
}
@media (max-width: 900px) {
.bundle-deal-section {
box-sizing: border-box !important;
}
.bundle-deal-section .container {
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
.bd-inner {
grid-template-columns: 1fr !important;
gap: 16px !important;
padding: 0 !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
}
.bd-products {
width: 100% !important;
}
.bd-product-item {
width: 100% !important;
box-sizing: border-box !important;
}
.bd-summary {
min-width: auto !important;
width: 100% !important;
box-sizing: border-box !important;
}
.bd-plus {
padding-left: 0 !important;
}
.bd-header {
padding: 0 !important;
margin-bottom: 10px !important;
max-width: 100% !important;
}
}
/* ═══════════════════════════════════════════════════════════════
BBW4LIFE — NEWSLETTER SECTION — FOND BLANC NACRÉ ULTRA PREMIUM
═══════════════════════════════════════════════════════════════ */
.nl-section {
position: relative;
background: var(--bbw-black, #15110E);
overflow: hidden;
padding: 24px 0;
border-top: 1px solid var(--bbw-gold-border, rgba(184, 146, 90, 0.28));
border-bottom: 1px solid var(--bbw-gold-border, rgba(184, 146, 90, 0.28));
box-shadow: 0 8px 40px rgba(0,0,0,0.30);
}
/* Un seul accent lumineux discret, statique — pas d'accumulation d'effets */
.nl-glow-left {
position: absolute;
left: -120px;
top: 50%;
transform: translateY(-50%);
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(184, 146, 90, 0.10) 0%, transparent 70%);
pointer-events: none;
z-index: 2;
}
/* Deuxième glow neutralisé pour éviter l'accumulation lumineuse */
.nl-glow-right {
display: none;
}
/* Filets fins statiques or antique — animation retirée (rendu posé) */
.nl-shimmer-line {
position: absolute;
left: 0;
right: 0;
height: 1px;
z-index: 4;
background: linear-gradient(90deg,
transparent 0%,
rgba(184, 146, 90, 0.35) 35%,
rgba(203, 164, 92, 0.55) 50%,
rgba(184, 146, 90, 0.35) 65%,
transparent 100%
);
}
.nl-shimmer-line--top { top: 0; }
.nl-shimmer-line--bottom { bottom: 0; }
.nl-particles {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
.nl-ptcl {
position: absolute;
border-radius: 50%;
animation: nl-float linear infinite;
opacity: 0;
}
/* Particules fortement adoucies : texture presque imperceptible */
@keyframes nl-float {
0% { transform: translateY(0) scale(1); opacity: 0; }
20% { opacity: 0.18; }
85% { opacity: 0.10; }
100% { transform: translateY(-160px) scale(0.5); opacity: 0; }
}
.nl-inner {
position: relative;
z-index: 5;
max-width: 1100px;
margin: 0 auto;
padding: 0 2.5rem;
display: flex;
align-items: center;
gap: 3rem;
}
.nl-left {
flex: 0 0 auto;
max-width: 290px;
}
.nl-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: transparent;
border: 1px solid var(--bbw-gold-border, rgba(184, 146, 90, 0.28));
border-radius: 2px;
padding: 4px 11px;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.58rem;
font-weight: 600;
color: var(--bbw-gold-vivid, #CBA45C);
letter-spacing: 0.20em;
text-transform: uppercase;
margin-bottom: 14px;
}
.nl-badge-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--bbw-gold-vivid, #CBA45C);
}
.nl-eyebrow {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(246, 239, 229, 0.55);
margin-bottom: 12px;
}
.nl-dot {
width: 18px;
height: 1px;
border-radius: 0;
background: var(--bbw-gold, #B8925A);
flex-shrink: 0;
}
.nl-title {
font-family: var(--font-display, 'Fraunces', Georgia, serif);
font-size: 2.35rem;
font-weight: 600;
color: var(--bbw-white, #F6EFE5);
line-height: 1.08;
margin-bottom: 12px;
letter-spacing: -0.01em;
}
.nl-title em {
font-style: italic;
font-weight: 500;
color: var(--bbw-gold-light, #e8bc6a);
}
.nl-subtitle {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.82rem;
color: rgba(246, 239, 229, 0.55);
line-height: 1.7;
margin-bottom: 18px;
max-width: 30ch;
}
.nl-pills {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.nl-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px solid rgba(184, 146, 90, 0.22);
border-radius: 2px;
padding: 5px 11px;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.64rem;
letter-spacing: 0.04em;
color: rgba(246, 239, 229, 0.68);
transition: border-color 0.25s ease, color 0.25s ease;
}
.nl-pill:hover {
border-color: rgba(184, 146, 90, 0.45);
color: rgba(246, 239, 229, 0.90);
}
.nl-pill i {
font-size: 10px;
color: var(--bbw-gold, #B8925A);
}
.nl-divider {
width: 1px;
height: 120px;
background: linear-gradient(to bottom,
transparent,
rgba(184, 146, 90, 0.30),
transparent
);
flex-shrink: 0;
}
.nl-right {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
.nl-social-proof {
display: flex;
align-items: center;
gap: 12px;
}
.nl-avatars { display: flex; }
.nl-av {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1.5px solid var(--bbw-black, #15110E);
box-shadow: 0 0 0 1px rgba(184, 146, 90, 0.35);
margin-left: -9px;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 11px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
color: var(--bbw-white, #F6EFE5);
}
.nl-av:first-child { margin-left: 0; }
.nl-av--1 { background: #6E2439; }
.nl-av--2 { background: #4e2748; }
.nl-av--3 { background: #8a6425; }
.nl-av--4 { background: #2b2723; }
.nl-stars {
color: var(--bbw-gold, #B8925A);
font-size: 11px;
letter-spacing: 2px;
}
.nl-proof-text {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.72rem;
color: rgba(246, 239, 229, 0.45);
margin: 2px 0 0;
letter-spacing: 0.01em;
}
.nl-proof-text strong {
font-weight: 600;
color: rgba(246, 239, 229, 0.88);
}
.nl-input-wrap {
position: relative;
display: flex;
align-items: center;
background: rgba(246, 239, 229, 0.04);
border: 1px solid var(--bbw-gold-border, rgba(184, 146, 90, 0.28));
border-radius: 4px;
overflow: hidden;
transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.nl-input-wrap:focus-within {
border-color: var(--bbw-gold, #B8925A);
background: rgba(246, 239, 229, 0.06);
box-shadow: 0 0 0 3px rgba(184, 146, 90, 0.10);
}
.nl-icon {
flex-shrink: 0;
color: rgba(246, 239, 229, 0.35);
font-size: 14px;
padding-left: 18px;
}
.nl-input {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 14px 14px;
font-size: 0.82rem;
color: var(--bbw-white, #F6EFE5);
font-family: var(--font-body, 'Inter', sans-serif);
}
.nl-input::placeholder {
color: rgba(246, 239, 229, 0.35);
}
.nl-btn {
display: flex;
align-items: center;
gap: 8px;
background: var(--bbw-gold, #B8925A);
border: none;
border-radius: 3px;
padding: 12px 24px;
margin: 4px;
cursor: pointer;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bbw-black, #15110E);
white-space: nowrap;
transition: background 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 2px 12px rgba(184, 146, 90, 0.25);
}
.nl-btn:hover {
background: var(--bbw-gold-vivid, #CBA45C);
box-shadow: 0 4px 18px rgba(184, 146, 90, 0.35);
}
.nl-btn:active { background: var(--bbw-gold, #B8925A); }
.nl-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.nl-btn i { font-size: 12px; }
.nl-bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6px;
}
.nl-privacy {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.66rem;
color: rgba(246, 239, 229, 0.32);
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.02em;
}
.nl-privacy i {
font-size: 10px;
color: rgba(246, 239, 229, 0.30);
}
.nl-perks { display: flex; gap: 16px; }
.nl-perk {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.66rem;
color: rgba(246, 239, 229, 0.42);
display: flex;
align-items: center;
gap: 5px;
letter-spacing: 0.02em;
}
.nl-perk i {
font-size: 9px;
color: var(--bbw-gold, #B8925A);
}
#nl-success-msg {
display: none;
align-items: center;
gap: 10px;
background: rgba(184, 146, 90, 0.08);
border: 1px solid var(--bbw-gold-border, rgba(184, 146, 90, 0.28));
border-radius: 4px;
padding: 13px 16px;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.82rem;
color: rgba(246, 239, 229, 0.82);
}
#nl-success-msg i {
color: var(--bbw-gold, #B8925A);
font-size: 16px;
}
.newsletter-success-popup {
display: none;
position: fixed;
bottom: 30px;
right: 30px;
background: var(--bbw-black, #15110E);
border-radius: 6px;
padding: 30px 26px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.50);
border: 1px solid var(--bbw-gold-border, rgba(184, 146, 90, 0.28));
z-index: 99999;
max-width: 320px;
text-align: center;
}
.newsletter-success-popup.show { display: block; }
.newsletter-success-popup .popup-icon i {
font-size: 28px;
color: var(--bbw-gold, #B8925A);
}
.newsletter-success-popup h3 {
font-family: var(--font-display, 'Fraunces', Georgia, serif);
font-size: 1.3rem;
font-weight: 600;
color: var(--bbw-white, #F6EFE5);
margin: 12px 0 8px;
}
.newsletter-success-popup p {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.80rem;
color: rgba(246, 239, 229, 0.55);
margin-bottom: 18px;
line-height: 1.6;
}
.newsletter-success-popup button {
background: var(--bbw-gold, #B8925A);
color: var(--bbw-black, #15110E);
border: none;
border-radius: 3px;
padding: 10px 26px;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 2px 12px rgba(184, 146, 90, 0.25);
transition: background 0.25s ease, box-shadow 0.25s ease;
}
.newsletter-success-popup button:hover {
background: var(--bbw-gold-vivid, #CBA45C);
box-shadow: 0 4px 18px rgba(184, 146, 90, 0.35);
}
@media (max-width: 768px) {
.nl-section { padding: 32px 0; }
.nl-inner {
flex-direction: column;
gap: 22px;
align-items: flex-start;
padding: 0 1.25rem;
}
.nl-left { max-width: 100%; }
.nl-divider { display: none; }
.nl-title { font-size: 1.9rem; }
.nl-subtitle { max-width: 100%; }
.nl-right { width: 100%; }
.nl-bottom-row {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.nl-btn span { display: none; }
.nl-btn { padding: 12px 18px; }
}
/* ══════════════════════════════════════════
NEWSLETTER — IMAGE BANNER (style custom-banner)
══════════════════════════════════════════ */
@keyframes nl-cb-img-float {
0%, 100% { transform: scale(1.04) translateY(0); }
50% { transform: scale(1.06) translateY(-4px); }
}
@keyframes nl-cb-overlay-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.92; }
}
@keyframes nl-cb-shimmer-run {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.nl-bg-images {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.nl-bg-img {
position: absolute;
inset: 0;
}
.nl-bg-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
animation: nl-cb-img-float 8s ease-in-out infinite;
filter: brightness(0.55) saturate(0.80);
}
.nl-bg-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(135deg,
rgba(0,0,0,0.72) 0%,
rgba(10,6,2,0.80) 50%,
rgba(0,0,0,0.72) 100%
);
animation: nl-cb-overlay-pulse 6s ease-in-out infinite;
}
.nl-bg-shimmer-top,
.nl-bg-shimmer-bottom {
position: absolute;
left: 0; right: 0;
height: 2px;
z-index: 4;
pointer-events: none;
background: linear-gradient(90deg,
transparent 0%,
rgba(201,150,62,0.60) 30%,
rgba(232,188,106,0.90) 50%,
rgba(201,150,62,0.60) 70%,
transparent 100%
);
background-size: 200% 100%;
animation: nl-cb-shimmer-run 3s linear infinite;
}
.nl-bg-shimmer-top { top: 0; }
.nl-bg-shimmer-bottom { bottom: 0; animation-delay: 1.5s; }
.cart-item-img-wrap {
position: relative;
display: inline-block;
}
.cart-item-warning-dot {
position: absolute;
top: -5px;
right: -5px;
width: 15px;
height: 15px;
background: var(--bbw-rose);
border-radius: 50%;
border: 2px solid #fff;
cursor: pointer;
z-index: 10;
box-shadow: 0 0 0 1px rgba(110,36,57,0.25), 0 2px 6px rgba(21,17,14,0.20);
}
.cart-item-warning-dot::after {
content: '!';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body, sans-serif);
font-size: 9px;
font-weight: 800;
line-height: 1;
color: var(--bbw-gold-light);
}
@keyframes pulse-warning {
0%, 100% { box-shadow: 0 0 0 0 rgba(110, 36, 57, 0.4); }
50% { box-shadow: 0 0 0 5px rgba(110, 36, 57, 0); }
}
.cart-item-warning-tooltip {
display: none;
position: absolute;
top: 22px;
left: -10px;
width: 220px;
background: #1a1a1a;
color: #fff;
font-size: 15px;
line-height: 1.5;
padding: 8px 10px;
border-radius: 8px;
z-index: 100;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.cart-item-warning-tooltip::before {
content: '';
position: absolute;
top: -6px;
left: 12px;
border: 6px solid transparent;
border-bottom-color: #1a1a1a;
border-top: none;
}
.cart-item-warning-dot:hover .cart-item-warning-tooltip {
display: block;
}
.cart-item-request-btn {
display: inline-flex;
align-items: center;
gap: 5px;
margin: 6px 0 4px;
padding: 5px 12px;
background: linear-gradient(135deg, var(--bbw-rose), var(--bbw-rose-light));
color: #fff;
border: none;
border-radius: 3px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.3px;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.cart-item-request-btn:hover {
transform: scale(1.03);
opacity: 0.92;
}
.cart-item-request-btn i {
font-size: 11px;
}
#checkout-block-popup {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
}
.cbp-modal {
background: #fff;
border-radius: 16px;
padding: 32px 28px;
max-width: 400px;
width: 90%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.25);
animation: cbp-in 0.25s ease;
}
@keyframes cbp-in {
from { opacity: 0; transform: scale(0.92) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.cbp-icon {
font-size: 40px;
margin-bottom: 12px;
}
.cbp-title {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 12px;
}
.cbp-msg {
font-size: 13px;
color: #444;
line-height: 1.7;
margin-bottom: 24px;
}
.cbp-msg strong {
color: var(--bbw-rose);
}
.cbp-btn--close {
background: linear-gradient(135deg, var(--bbw-rose), var(--bbw-rose-light));
color: #fff;
border: none;
border-radius: 3px;
padding: 10px 24px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.15s ease;
}
.cbp-btn--close:hover {
opacity: 0.88;
}
/* ══════════════════════════════════════════════════════
READING PROGRESS BAR — global
══════════════════════════════════════════════════════ */
#reading-progress-bar {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, #7041b5 0%, #d6458f 58%, #ff8fbe 100%);
z-index: 99999;
transition: width 0.1s linear;
border-radius: 0 2px 2px 0;
pointer-events: none;
}
.bundle-deal-section {
will-change: transform;
transform: translateZ(0);
}
.bss-video-inner,
.comm-rev-card {
contain: layout style paint;
}
.bd-orb,
.fs-orb,
.bss-orb,
.comm-orb {
will-change: auto;
contain: strict;
}
@media (max-width: 768px) {
.cart-drawer,
.paul-popup,
.cf-chat-window {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
}
i[class*="fi"],
i[class*="fa"] {
visibility: hidden;
}
.fonts-loaded i[class*="fi"],
.fonts-loaded i[class*="fa"] {
visibility: visible;
}
/* ══════════════════════════════════════
FOUNDER PHOTO — Chat Widget
══════════════════════════════════════ */
.cf-founder-img {
width: 100%;
max-width: 200px;
border-radius: 14px;
display: block;
margin: 10px auto;
border: 2px solid rgba(201, 150, 62, 0.45);
box-shadow: 0 4px 20px rgba(192, 56, 94, 0.18);
object-fit: cover;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cf-founder-img:hover {
transform: scale(1.03);
box-shadow: 0 8px 30px rgba(192, 56, 94, 0.28);
}
.cf-founder-caption {
text-align: center;
font-size: 0.75rem;
color: var(--os-muted, #999);
margin-top: 4px;
font-style: italic;
}
/* ══════════════════════════════════════
Masquer le flash bleu de tap-highlight mobile
(site-wide, tous elements cliquables — pas
seulement les liens ). !important car ce
fichier charge en premier ; sans lui, une regle
plus specifique chargee apres (products.css,
header.css, collections.css, footer.css) peut
reintroduire le flash sur un composant precis.
══════════════════════════════════════ */
/* Approche la plus radicale (recommandee pour eliminer TOTALEMENT le
flash) : appliquer sur html/* directement au lieu d'enumerer chaque
type d'element cliquable — un , , , div avec
cursor:pointer en JS, etc. sont tous nativement/potentiellement
focusables et peuvent recevoir ce flash sur mobile, meme sans figurer
dans une liste de selecteurs explicite. */
html {
-webkit-tap-highlight-color: transparent !important;
tap-highlight-color: transparent !important;
}
* {
-webkit-tap-highlight-color: transparent !important;
tap-highlight-color: transparent !important;
}
a, a *, button, button *, input, textarea, select, label, label *,
summary, summary *, details,
[onclick], [onclick] *, [role="button"], [role="button"] *, [tabindex] {
-webkit-touch-callout: none !important;
}
a, button, summary, [onclick], [role="button"], [tabindex] {
outline: none !important;
}
a:focus,
a:focus-visible,
a:active,
button:focus,
button:active,
summary:focus,
summary:active,
[onclick]:focus,
[onclick]:active,
[role="button"]:focus,
[role="button"]:active {
outline: none !important;
background-color: transparent !important;
-webkit-tap-highlight-color: transparent !important;
}
a::selection, a *::selection,
button::selection, button *::selection {
background: transparent !important;
}
/* ═══════════════════════════════════════════════════════════════
BBW4LIFE — BIRTHDAY GIFT ICON + POPUP
birthday-gift.css
═══════════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────────
VARIABLES
────────────────────────────────────────────────────────────── */
:root {
--bday-rose: #6E2439;
--bday-gold: #B8925A;
--bday-plum: #4A1A2A;
--bday-light: #F6EFE5;
--bday-shadow: rgba(110, 36, 57, 0.35);
--bday-radius: 8px;
}
/* ──────────────────────────────────────────────────────────────
CANVAS PETAL BURST
────────────────────────────────────────────────────────────── */
#bbw-bday-canvas {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 90;
display: none;
}
/* ──────────────────────────────────────────────────────────────
FLOATING GIFT BUTTON — taille réduite
────────────────────────────────────────────────────────────── */
.bbw-bday-gift-btn {
position: fixed;
bottom: 160px;
left: 18px;
z-index: 90;
width: 46px;
height: 46px;
border-radius: 50%;
border: none;
cursor: pointer;
background: linear-gradient(135deg, var(--bday-rose), var(--bday-plum));
box-shadow:
0 6px 24px var(--bday-shadow),
0 2px 8px rgba(0,0,0,.18);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: transform 0.25s cubic-bezier(.34,1.56,.64,1),
box-shadow 0.25s ease;
will-change: transform;
outline: none;
}
/* Position desktop — droite */
.bbw-bday-gift-btn.bbw-bday--desktop-right {
left: auto;
right: 18px;
}
/* Position mobile — gauche (par défaut) */
@media (max-width: 768px) {
.bbw-bday-gift-btn.bbw-bday--mobile-right {
left: auto;
right: 10px;
bottom: 70px;
}
.bbw-bday-gift-btn.bbw-bday--mobile-left {
left: 10px;
right: auto;
bottom: 70px;
}
}
.bbw-bday-gift-btn:hover,
.bbw-bday-gift-btn:focus-visible {
transform: scale(1.12) rotate(-6deg);
box-shadow:
0 10px 32px var(--bday-shadow),
0 4px 12px rgba(0,0,0,.22);
}
.bbw-bday-gift-btn:active {
transform: scale(0.95);
}
/* Bounce au chargement */
@keyframes bday-btn-bounce {
0% { transform: scale(0) rotate(-20deg); opacity: 0; }
60% { transform: scale(1.15) rotate(4deg); opacity: 1; }
80% { transform: scale(0.95) rotate(-2deg); }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
.bbw-bday-gift-btn {
animation: bday-btn-bounce 0.7s cubic-bezier(.34,1.56,.64,1) forwards;
}
/* Wiggle toutes les 6s — adouci */
@keyframes bday-btn-wiggle {
0%,100% { transform: rotate(0); }
25% { transform: rotate(-4deg) scale(1.03); }
55% { transform: rotate(3deg); }
80% { transform: rotate(-1.5deg); }
}
.bbw-bday-gift-btn.bbw-bday--wiggle {
animation: bday-btn-wiggle 0.9s ease-in-out;
}
/* SVG — taille réduite */
.bbw-bday-gift-svg {
width: 24px;
height: 24px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
/* Dot notification */
.bbw-bday-gift-dot {
position: absolute;
top: 4px;
right: 4px;
width: 11px;
height: 11px;
background: var(--bbw-gold-light);
border: 2px solid #fff;
border-radius: 50%;
display: none;
}
.bbw-bday-gift-dot.bbw-bday--visible {
display: block;
animation: bday-dot-pulse 2.2s infinite;
}
@keyframes bday-dot-pulse {
0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(184,146,90,.6); }
50% { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(184,146,90,0); }
}
/* Pulse ring */
.bbw-bday-gift-ring {
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1.5px solid rgba(184,146,90,.45);
animation: bday-ring-pulse 3s ease-out infinite;
pointer-events: none;
}
@keyframes bday-ring-pulse {
0% { transform: scale(1); opacity: .7; }
100% { transform: scale(1.7); opacity: 0; }
}
/* ──────────────────────────────────────────────────────────────
OVERLAY
────────────────────────────────────────────────────────────── */
.bbw-bday-overlay {
position: fixed !important;
inset: 0 !important;
z-index: 99991 !important;
background: rgba(21, 17, 14, 0.75) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 16px !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 0.35s ease !important;
}
.bbw-bday-overlay::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.bbw-bday-overlay.bbw-bday--open {
opacity: 1 !important;
pointer-events: auto !important;
}
.bbw-bday-modal {
position: relative !important;
z-index: 1 !important;
}
/* ──────────────────────────────────────────────────────────────
MODAL — fond noir pur
────────────────────────────────────────────────────────────── */
.bbw-bday-modal {
position: relative;
width: 100%;
max-width: 580px;
max-height: 95vh;
overflow: hidden;
border-radius: var(--bday-radius);
background: var(--bbw-black);
box-shadow:
0 0 0 1px rgba(184,146,90,.22),
0 24px 80px rgba(21,17,14,.65),
0 0 60px rgba(110,36,57,.14) inset;
transform: scale(0.86) translateY(30px);
transition: transform 0.45s cubic-bezier(.34,1.4,.64,1),
opacity 0.35s ease;
opacity: 0;
display: flex;
flex-direction: column;
}
.bbw-bday-overlay.bbw-bday--open .bbw-bday-modal {
transform: scale(1) translateY(0);
opacity: 1;
}
/* Shimmer border */
.bbw-bday-modal::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--bday-radius);
background: conic-gradient(
from 0deg,
transparent 0%,
rgba(184,146,90,.40) 25%,
rgba(110,36,57,.35) 50%,
rgba(184,146,90,.40) 75%,
transparent 100%
);
padding: 1px;
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: bday-border-spin 12s linear infinite;
pointer-events: none;
z-index: 1;
}
@keyframes bday-border-spin {
to { transform: rotate(360deg) scale(1.02); }
}
/* Particules internes */
.bbw-bday-modal-particles {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.bbw-bday-modal-ptcl {
position: absolute;
border-radius: 50%;
animation: bday-ptcl-rise linear infinite;
opacity: 0;
}
@keyframes bday-ptcl-rise {
0% { transform: translateY(100%) scale(0); opacity: 0; }
15% { opacity: .8; }
85% { opacity: .4; }
100% { transform: translateY(-20px) scale(1.2); opacity: 0; }
}
/* Confettis */
.bbw-bday-confetti-wrap {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
overflow: hidden;
}
.bbw-bday-confetti-piece {
position: absolute;
top: -10px;
animation: bday-conf-fall linear forwards;
border-radius: 2px;
}
@keyframes bday-conf-fall {
0% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
80% { opacity: 1; }
100% { transform: translateY(110vh) rotate(720deg) scale(.5); opacity: 0; }
}
/* Bouton fermer */
.bbw-bday-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.2);
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.8);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.2s;
backdrop-filter: blur(4px);
}
.bbw-bday-close:hover {
background: rgba(110,36,57,.6);
transform: rotate(90deg) scale(1.1);
color: #fff;
}
/* ──────────────────────────────────────────────────────────────
HEADER MARQUEE — texte blanc
────────────────────────────────────────────────────────────── */
.bbw-bday-marquee-wrap {
position: relative;
z-index: 3;
overflow: hidden;
background: linear-gradient(90deg,
var(--bbw-rose),
var(--bday-plum),
var(--bbw-rose)
);
padding: 8px 0;
border-bottom: 1px solid rgba(184,146,90,.3);
}
.bbw-bday-marquee-wrap::before,
.bbw-bday-marquee-wrap::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 40px;
z-index: 2;
}
.bbw-bday-marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--bbw-rose), transparent); }
.bbw-bday-marquee-wrap::after { right: 0; background: linear-gradient(-90deg, var(--bbw-rose), transparent); }
.bbw-bday-marquee-track {
display: flex;
gap: 0;
white-space: nowrap;
animation: bday-marquee 44s linear infinite;
will-change: transform;
}
.bbw-bday-marquee-wrap:hover .bbw-bday-marquee-track {
animation-play-state: paused;
}
@keyframes bday-marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.bbw-bday-marquee-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 26px;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--bbw-white, #F6EFE5);
text-transform: uppercase;
}
.bbw-bday-marquee-sep {
color: var(--bbw-gold-light, #e8bc6a);
opacity: 0.7;
margin: 0 8px;
}
/* ──────────────────────────────────────────────────────────────
BALLONS
────────────────────────────────────────────────────────────── */
.bbw-bday-balloons {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.bbw-bday-balloon {
position: absolute;
font-size: 1.4rem;
animation: bday-balloon-float ease-in-out infinite alternate;
opacity: 0.28;
}
.bbw-bday-balloon--1 { left: 6%; top: 18%; animation-duration: 5.0s; animation-delay: 0s; }
.bbw-bday-balloon--2 { right: 8%; top: 12%; animation-duration: 5.6s; animation-delay: .6s; }
.bbw-bday-balloon--3 { display: none; }
.bbw-bday-balloon--4 { display: none; }
.bbw-bday-balloon--5 { display: none; }
@keyframes bday-balloon-float {
from { transform: translateY(0) rotate(-4deg); }
to { transform: translateY(-9px) rotate(4deg); }
}
/* ──────────────────────────────────────────────────────────────
BODY
────────────────────────────────────────────────────────────── */
.bbw-bday-body {
position: relative;
z-index: 3;
padding: 20px 20px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
overflow-y: auto;
overflow-x: hidden;
flex: 1;
min-height: 0;
box-sizing: border-box;
width: 100%;
}
/* Titre */
.bbw-bday-title-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.bbw-bday-cake-icon {
font-size: 1.7rem;
animation: bday-cake-bounce 3s ease-in-out infinite alternate;
}
@keyframes bday-cake-bounce {
from { transform: scale(1) rotate(-3deg); }
to { transform: scale(1.06) rotate(3deg); }
}
.bbw-bday-main-title {
font-family: var(--font-display, 'Fraunces', Georgia, serif);
font-size: 1.7rem;
font-weight: 600;
background: linear-gradient(90deg, var(--bbw-gold), #F6EFE5, var(--bbw-gold-light));
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: bday-title-shimmer 6s linear infinite;
text-align: center;
margin: 0;
letter-spacing: 0.01em;
}
@keyframes bday-title-shimmer {
to { background-position: 200% center; }
}
/* ──────────────────────────────────────────────────────────────
CAROUSEL
────────────────────────────────────────────────────────────── */
.bbw-bday-carousel-wrap {
position: relative;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.bbw-bday-carousel {
display: flex;
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
/* ──────────────────────────────────────────────────────────────
BIRTHDAY CARD
────────────────────────────────────────────────────────────── */
.bbw-bday-card {
min-width: 100%;
max-width: 100%;
width: 100%;
flex-shrink: 0;
box-sizing: border-box;
background: linear-gradient(145deg,
rgba(246,239,229,.06),
rgba(246,239,229,.02)
);
border: 1px solid var(--bbw-gold-border);
border-radius: 6px;
padding: 22px 20px 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
transition: transform 0.42s cubic-bezier(.4,0,.2,1);
will-change: transform;
position: relative;
overflow: hidden;
}
/* Shimmer de fond sur la card */
.bbw-bday-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%,
rgba(184,146,90,.10) 0%,
transparent 65%
);
pointer-events: none;
}
/* Transition slide */
.bbw-bday-carousel.bbw-bday--slide-left .bbw-bday-card { animation: bday-slide-in-l 0.42s cubic-bezier(.4,0,.2,1); }
.bbw-bday-carousel.bbw-bday--slide-right .bbw-bday-card { animation: bday-slide-in-r 0.42s cubic-bezier(.4,0,.2,1); }
@keyframes bday-slide-in-l {
from { transform: translateX(60px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes bday-slide-in-r {
from { transform: translateX(-60px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* Placeholder */
.bbw-bday-card--placeholder {
border-style: dashed;
border-color: rgba(201,150,62,.18);
background: transparent;
min-height: 140px;
justify-content: center;
}
.bbw-bday-no-bday {
font-size: 0.85rem;
color: rgba(255,255,255,.5);
line-height: 1.6;
margin: 8px 0 0;
}
/* Avatar */
.bbw-bday-avatar {
width: 62px;
height: 62px;
border-radius: 50%;
background: linear-gradient(135deg, var(--bday-rose), var(--bday-plum));
border: 3px solid var(--bday-gold);
box-shadow: 0 4px 16px rgba(201,150,62,.35);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 800;
color: #fff;
letter-spacing: -0.01em;
flex-shrink: 0;
animation: bday-avatar-pop 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
.bbw-bday-avatar--placeholder { font-size: 2rem; }
@keyframes bday-avatar-pop {
from { transform: scale(0) rotate(-20deg); opacity: 0; }
to { transform: scale(1) rotate(0); opacity: 1; }
}
/* Crown au-dessus avatar */
.bbw-bday-crown {
position: absolute;
top: -14px;
font-size: 1.05rem;
animation: bday-crown-bounce 3.2s ease-in-out infinite alternate;
}
@keyframes bday-crown-bounce {
from { transform: translateY(0) rotate(-5deg); }
to { transform: translateY(-3px) rotate(5deg); }
}
/* Nom */
.bbw-bday-name {
font-family: var(--font-display, 'Fraunces', Georgia, serif);
font-size: 1.2rem;
font-weight: 600;
color: var(--bbw-gold-light);
letter-spacing: 0.02em;
margin: 0;
word-break: break-word;
}
/* Badge anniversaire */
.bbw-bday-age-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: linear-gradient(90deg, var(--bday-rose), var(--bday-plum));
color: #fff;
font-size: 0.72rem;
font-weight: 700;
padding: 3px 10px;
border-radius: 3px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Message */
.bbw-bday-message {
font-size: 0.88rem;
color: rgba(255,255,255,.78);
line-height: 1.65;
margin: 0;
max-width: 100%;
word-break: break-word;
}
/* Divider */
.bbw-bday-divider {
width: 60px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--bday-gold), transparent);
border: none;
border-radius: 2px;
margin: 4px 0;
}
/* Promo code */
.bbw-bday-promo-wrap {
display: flex;
align-items: center;
gap: 8px;
background: rgba(184,146,90,.10);
border: 1px solid var(--bbw-gold-border);
border-radius: 4px;
padding: 10px 14px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
justify-content: space-between;
}
.bbw-bday-promo-left {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 0;
}
.bbw-bday-promo-label {
font-size: 0.68rem;
color: rgba(255,255,255,.5);
text-transform: uppercase;
letter-spacing: 0.07em;
font-weight: 600;
}
.bbw-bday-promo-code {
font-size: 1.1rem;
font-weight: 800;
color: var(--bbw-gold-light);
letter-spacing: 0.14em;
font-family: 'Courier New', monospace;
text-shadow: 0 0 12px rgba(184,146,90,.35);
}
.bbw-bday-promo-discount {
font-size: 0.72rem;
color: #9bc9a4;
font-weight: 700;
}
.bbw-bday-copy-btn {
background: linear-gradient(135deg, var(--bday-rose), var(--bday-plum));
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
padding: 8px 14px;
font-size: 0.76rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 5px;
transition: transform 0.2s, box-shadow 0.2s;
white-space: nowrap;
flex-shrink: 0;
}
.bbw-bday-copy-btn:hover {
transform: scale(1.04);
box-shadow: 0 4px 12px rgba(110,36,57,.4);
}
.bbw-bday-copy-btn.bbw-bday--copied {
background: linear-gradient(135deg, #22a06b, #1a7a50);
}
.bbw-bday-copy-btn svg {
flex-shrink: 0;
}
/* Étoiles décoratives sur la card */
.bbw-bday-stars {
display: flex;
gap: 4px;
justify-content: center;
}
.bbw-bday-stars span {
color: var(--bbw-gold);
font-size: 0.85rem;
animation: bday-star-twinkle ease-in-out infinite alternate;
}
.bbw-bday-stars span:nth-child(1) { animation-duration: 1.2s; }
.bbw-bday-stars span:nth-child(2) { animation-duration: 1.6s; animation-delay: .2s; }
.bbw-bday-stars span:nth-child(3) { animation-duration: 1.0s; animation-delay: .4s; }
.bbw-bday-stars span:nth-child(4) { animation-duration: 1.4s; animation-delay: .1s; }
.bbw-bday-stars span:nth-child(5) { animation-duration: 1.8s; animation-delay: .3s; }
@keyframes bday-star-twinkle {
from { opacity: .5; transform: scale(0.9); }
to { opacity: 1; transform: scale(1.1); }
}
/* ──────────────────────────────────────────────────────────────
NAVIGATION DOTS
────────────────────────────────────────────────────────────── */
.bbw-bday-dots {
display: flex;
justify-content: center;
gap: 7px;
margin-top: 12px;
}
.bbw-bday-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,.3);
background: transparent;
cursor: pointer;
transition: background 0.25s, transform 0.25s, border-color 0.25s;
padding: 0;
}
.bbw-bday-dot.bbw-bday--dot-active {
background: var(--bday-gold);
border-color: var(--bday-gold);
transform: scale(1.3);
}
/* ──────────────────────────────────────────────────────────────
NAVIGATION ARROWS
────────────────────────────────────────────────────────────── */
.bbw-bday-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.2);
background: rgba(0,0,0,.35);
color: rgba(255,255,255,.8);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
transition: background 0.2s, transform 0.2s;
z-index: 5;
}
.bbw-bday-arrow:hover {
background: rgba(110,36,57,.65);
color: #fff;
transform: translateY(-50%) scale(1.1);
}
.bbw-bday-arrow--prev { left: -14px; }
.bbw-bday-arrow--next { right: -14px; }
/* ──────────────────────────────────────────────────────────────
FOOTER
────────────────────────────────────────────────────────────── */
.bbw-bday-footer {
position: relative;
z-index: 3;
padding: 12px 20px 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
border-top: 1px solid rgba(255,255,255,.06);
}
.bbw-bday-subscribe-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
max-width: 360px;
padding: 14px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
background: linear-gradient(135deg, var(--bday-rose) 0%, var(--bday-plum) 100%);
box-shadow: 0 6px 20px rgba(110,36,57,.4);
transition: transform 0.22s, box-shadow 0.22s;
position: relative;
overflow: hidden;
}
.bbw-bday-subscribe-btn::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.15) 100%);
}
.bbw-bday-subscribe-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(110,36,57,.55);
}
.bbw-bday-subscribe-btn:active {
transform: scale(0.97);
}
.bbw-bday-footer-note {
font-size: 0.74rem;
color: rgba(255,255,255,.42);
margin: 0;
text-align: center;
}
/* ──────────────────────────────────────────────────────────────
MOBILE — remplace tout le bloc @media (max-width: 480px) existant
────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
.bbw-bday-overlay {
padding: 6px !important;
}
.bbw-bday-modal {
width: 100% !important;
max-width: 100% !important;
max-height: 91vh;
overflow-y: auto;
border-radius: 8px;
}
.bbw-bday-main-title {
font-size: 1.35rem;
}
.bbw-bday-body {
padding: 14px 12px 8px;
}
.bbw-bday-card {
padding: 16px 12px 14px;
min-width: 100%;
max-width: 100%;
width: 100%;
}
.bbw-bday-avatar {
width: 52px;
height: 52px;
font-size: 1.25rem;
}
.bbw-bday-name {
font-size: 1rem;
}
.bbw-bday-message {
font-size: 0.82rem;
}
.bbw-bday-promo-wrap {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.bbw-bday-promo-left {
align-items: center;
text-align: center;
}
.bbw-bday-promo-code {
font-size: 0.95rem;
}
.bbw-bday-copy-btn {
width: 100%;
justify-content: center;
}
.bbw-bday-gift-btn {
width: 40px;
height: 40px;
bottom: 130px;
}
.bbw-bday-gift-svg {
width: 20px;
height: 20px;
}
.bbw-bday-arrow--prev { left: -10px; }
.bbw-bday-arrow--next { right: -10px; }
.bbw-bday-subscribe-btn {
max-width: 100%;
}
}
/* ═══════════════════════════════════════════════════════
BBW4LIFE — SETS FLOATING WIDGET + FLIPBOOK POPUP
═══════════════════════════════════════════════════════ */
#bbw-sets-widget {
position: fixed;
left: 14px;
top: 82%;
transform: translateY(-50%);
z-index: 9997;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.bbw-sets-widget__label {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: 'Playfair Display', serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--bbw-black, #15110E);
background: rgba(255,255,255,0.88);
padding: 6px 3px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
user-select: none;
}
.bbw-sets-widget__row {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
}
.bbw-sets-widget__circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding: 0;
border: 1px solid rgba(184,146,90,0.45);
background: rgba(255,255,255,0.2);
cursor: pointer;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bbw-sets-widget__circle:hover {
transform: scale(1.12);
box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.bbw-sets-widget__circle img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.55;
}
.bbw-sets-widget__collapse {
width: 16px;
height: 16px;
border-radius: 50%;
padding: 0;
border: none;
background: var(--bbw-black, #15110E);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
flex: 0 0 auto;
}
.bbw-sets-widget__collapse svg {
transform: rotate(90deg);
}
@media (max-width: 768px) {
#bbw-sets-widget { left: 8px; }
.bbw-sets-widget__label { font-size: 0.64rem; padding: 5px 2px; }
}
/* ── OVERLAY ── */
#bbw-sets-overlay {
position: fixed;
inset: 0;
z-index: 999999;
display: none;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.72);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
padding: 20px;
/* Isole son propre contexte de composition GPU : sur Safari/Firefox,
un backdrop-filter actif au-dessus de cartes encore animées
(transitions/transform des collections) peut provoquer des glitches
de repaint pendant l'animation 3D du flipbook (comportement stable
sur Chrome uniquement). contain empêche ce contexte d'interagir
avec le rendu des éléments en dessous, sans toucher à leur CSS. */
contain: layout paint;
}
#bbw-sets-overlay.active {
display: flex;
}
#bbw-sets-flipbook-wrap {
position: relative;
width: min(320px, 90vw);
max-height: 86vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
#bbwSetsCloseBtn {
position: absolute;
top: -38px;
right: 0;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.92);
color: var(--bbw-black, #15110E);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
z-index: 2;
}
/* ── FLIPBOOK ──
Un seul niveau de perspective/preserve-3d, posé au plus près des
éléments qui tournent réellement (.bbw-sets-cover / .bbw-sets-page,
cf. plus bas) — empiler perspective+preserve-3d sur plusieurs niveaux
parent/enfant (ici + .bbw-sets-pages) est toléré par Chromium mais se
comporte différemment sur Gecko/WebKit (repaint instable, effet
"coupe et reprend" pendant la rotation). */
.bbw-sets-flipbook {
position: relative;
width: 100%;
aspect-ratio: 3 / 3.6;
max-height: 62vh;
border-radius: 12px;
}
.bbw-sets-nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.92);
color: var(--bbw-black, #15110E);
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
z-index: 60;
transition: background 0.2s ease, transform 0.2s ease;
}
.bbw-sets-flipbook.is-open .bbw-sets-nav-arrow {
display: flex;
}
.bbw-sets-nav-arrow:hover {
background: #fff;
transform: translateY(-50%) scale(1.08);
}
.bbw-sets-nav-arrow--prev { left: -14px; }
.bbw-sets-nav-arrow--next { right: -14px; }
@media (max-width: 480px) {
.bbw-sets-nav-arrow--prev { left: 2px; }
.bbw-sets-nav-arrow--next { right: 2px; }
}
.bbw-sets-cover {
position: absolute;
inset: 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,0.45);
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1.1s cubic-bezier(0.65,0,0.35,1);
transition: transform 1.1s cubic-bezier(0.65,0,0.35,1);
z-index: 50;
cursor: pointer;
}
.bbw-sets-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bbw-sets-cover__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55));
}
.bbw-sets-cover__title {
font-family: 'Playfair Display', serif;
font-size: 2.4rem;
font-weight: 700;
color: #fff;
letter-spacing: 0.06em;
}
.bbw-sets-cover__sub {
font-size: 0.78rem;
color: rgba(255,255,255,0.8);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.bbw-sets-flipbook.is-open .bbw-sets-cover {
-webkit-transform: rotateY(-160deg);
transform: rotateY(-160deg);
box-shadow: -10px 10px 30px rgba(0,0,0,0.3);
z-index: 1;
}
/* Dès qu'au moins une page a tourné (.has-turned-page posée par le JS sur
.bbw-sets-flipbook), la peau ouverte n'a plus besoin d'être visible —
en rendu 3D perspective, un rotateY() ne la met jamais strictement de
profil comme une vraie page de livre : elle reste visible en biais
derrière la première page tournée si on ne la masque pas explicitement. */
.bbw-sets-flipbook.has-turned-page .bbw-sets-cover {
visibility: hidden;
}
.bbw-sets-pages {
position: absolute;
inset: 0;
border-radius: 12px;
background: #fdfcf9;
box-shadow: 0 20px 50px rgba(0,0,0,0.45);
-webkit-perspective: 1800px;
perspective: 1800px;
}
.bbw-sets-page {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
background: #fdfcf9;
border-radius: 12px;
overflow: hidden;
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.9s cubic-bezier(0.65,0,0.35,1), box-shadow 0.9s ease;
transition: transform 0.9s cubic-bezier(0.65,0,0.35,1), box-shadow 0.9s ease;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
pointer-events: none;
z-index: 1;
}
.bbw-sets-page.is-active {
pointer-events: auto;
z-index: 5;
}
.bbw-sets-page.is-turned {
/* -179deg (pas -180 pile, qui aplatit le rendu 3D) : la page finit
quasiment face à l'écran, à plat par-dessus la couverture — c'est le
z-index (cf. JS showPage) qui doit garantir qu'elle la recouvre. */
-webkit-transform: rotateY(-179deg);
transform: rotateY(-179deg);
box-shadow: 8px 0 20px rgba(0,0,0,0.2);
}
.bbw-sets-page__image-wrap {
position: relative;
flex: 1 1 auto;
min-height: 0;
background: #f2ede4;
}
.bbw-sets-page__image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
}
.bbw-sets-page__discount {
position: absolute;
top: 10px;
left: 10px;
background: var(--rose, #c0385e);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
padding: 4px 8px;
border-radius: 20px;
letter-spacing: 0.03em;
}
.bbw-sets-page__wishlist {
position: absolute;
top: 6px;
right: 6px;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.bbw-sets-page__wishlist svg { display: block; }
.bbw-sets-page__wishlist .wishlist-icon-filled { display: none; }
.bbw-sets-page__wishlist.added .wishlist-icon-empty { display: none; }
.bbw-sets-page__wishlist.added .wishlist-icon-filled { display: block; }
.bbw-sets-page__body {
flex: 0 0 auto;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
background: #fdfcf9;
}
.bbw-sets-page__title {
font-family: 'Playfair Display', serif;
font-size: 0.95rem;
font-weight: 600;
color: var(--bbw-black, #15110E);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bbw-sets-page__price-row {
display: flex;
align-items: baseline;
gap: 8px;
}
.bbw-sets-page__price {
font-size: 1.05rem;
font-weight: 700;
color: var(--bbw-black, #15110E);
}
.bbw-sets-page__compare {
font-size: 0.82rem;
color: #999;
text-decoration: line-through;
}
.bbw-sets-page__btn {
margin-top: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 14px;
border-radius: 8px;
background: var(--bbw-black, #15110E);
color: #fff;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
transition: background 0.2s ease;
}
.bbw-sets-page__btn:hover {
background: #2a221b;
}
/* ── FOOTER : dots + view all ── */
.bbw-sets-flipbook-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
flex-wrap: wrap;
}
.bbw-sets-dots {
display: flex;
gap: 6px;
}
.bbw-sets-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.35);
transition: background 0.25s ease, transform 0.25s ease;
}
.bbw-sets-dots span.is-active {
background: #fff;
transform: scale(1.3);
}
.bbw-sets-viewall-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 16px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.5);
color: #fff;
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s ease;
}
.bbw-sets-viewall-btn:hover {
background: rgba(255,255,255,0.12);
}
@media (max-width: 480px) {
#bbw-sets-flipbook-wrap { width: 100%; }
.bbw-sets-cover__title { font-size: 1.8rem; }
.bbw-sets-page__title { font-size: 0.85rem; }
.bbw-sets-flipbook-footer { justify-content: center; }
}
body.bbw-sets-popup-open .cart-marquee .marquee-content,
body.bbw-sets-popup-open .skel-shimmer {
animation-play-state: paused;
}
/* Slightly smaller floating widget controls on phones. */
@media (max-width: 768px) {
#bbw-widgets-dock { gap: 8px; }
#bbw-widgets-dock .bbw-dock-icon {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
font-size: 16px !important;
}
#bbw-widgets-dock .bbw-dock-icon svg { width: 18px !important; height: 18px !important; }
#bbw-widgets-dock-toggle { width: 36px; height: 36px; }
#bbw-widgets-dock-toggle svg { width: 14px; height: 14px; }
#cf-chat-toggle,
#cf-chat-toggle:hover { width: 40px !important; height: 40px !important; }
#cf-chat-toggle .cf-toggle-inner { width: 40px; height: 40px; }
#cf-chat-toggle:hover .cf-toggle-inner { width: 40px !important; height: 40px !important; min-width: 40px !important; }
#cf-chat-toggle .cf-icon-open svg { width: 22px; height: 22px; }
#cf-chat-toggle .cf-icon-close svg { width: 18px; height: 18px; }
.paul-indicator { width: 40px; height: 40px; font-size: 18px; }
.paul-indicator svg { width: 18px; height: 18px; }
.fnav-toggle { width: 32px; height: 32px; }
.fnav-toggle svg { width: 16px; height: 16px; }
.fnav-btn { width: 27px; height: 27px; }
.fnav-btn svg { width: 14px; height: 14px; }
.bbw-sets-widget__circle { width: 23px; height: 23px; }
.bbw-sets-widget__collapse { width: 15px; height: 15px; }
}
/* Desktop: extend the homepage hero behind the transparent header. */
@media (min-width: 993px) {
.home-page .bbw-hero-banner {
margin-top: calc(-1 * (var(--bbw-header-h) + var(--bbw-bc-h)));
height: calc(var(--hero-height-desktop) + var(--bbw-header-h) + var(--bbw-bc-h));
}
}
/* Mobile and tablet: extend the homepage hero behind the header and breadcrumb. */
@media (max-width: 992px) {
.home-page .bbw-hero-banner {
margin-top: calc(-1 * (var(--bbw-header-h) + var(--bbw-bc-h)));
}
}
@media (max-width: 767px) {
.home-page .bbw-hero-banner {
height: calc(var(--hero-height-mobile) + var(--bbw-header-h) + var(--bbw-bc-h));
}
}
@media (min-width: 768px) and (max-width: 992px) {
.home-page .bbw-hero-banner {
height: calc(var(--hero-height-desktop) + var(--bbw-header-h) + var(--bbw-bc-h));
}
}
/* Desktop: lower hero copy slightly to create breathing room below breadcrumbs. */
@media (min-width: 993px) {
.home-page .bbw-hero__content {
transform: translateY(28px);
}
}
/* On mobile, place circular hero thumbnails below the fixed header and breadcrumb. */
@media (max-width: 767px) {
.home-page .bbw-hero__thumbs.bbw-thumbs--mobile-top {
top: calc(var(--bbw-header-h) + var(--bbw-bc-h) + 12px) !important;
}
}
/* Curvafit homepage palette: these overrides stay local to the home page. */
.home-page {
--hero-btn-bg: var(--cf-accent);
--hero-btn-color: var(--text-on-dark);
--hero-btn-hover-bg: var(--cf-primary);
}
.home-page .bbw-hero-banner {
background: linear-gradient(135deg, #24104c 0%, var(--cf-primary-strong) 58%, #613078 100%);
}
.home-page .bbw-hero-banner::after {
background: linear-gradient(90deg, transparent, rgba(232, 67, 135, 0.75), transparent);
}
.home-page .bbw-hero__media::after {
background: linear-gradient(108deg, rgba(28, 13, 48, 0.88) 0%, rgba(35, 18, 58, 0.64) 42%, rgba(35, 18, 58, 0.20) 76%, rgba(35, 18, 58, 0.34) 100%);
}
.home-page .bbw-hero__eyebrow,
.home-page .bbw-hero__eyebrow::before {
color: var(--pink-400);
}
.home-page .bbw-hero__eyebrow::before {
background: var(--pink-400);
}
.home-page .bbw-hero__title {
color: rgba(255, 255, 255, 0.78);
}
.home-page .bbw-hero__subtitle em {
color: #ff9bc6;
}
.home-page .bbw-hero__text {
color: rgba(255, 255, 255, 0.88);
}
.home-page .bbw-hero__cd-block {
background: rgba(36, 16, 76, 0.72);
border-color: rgba(248, 200, 226, 0.48);
}
.home-page .bbw-hero__cd-block:hover {
border-color: var(--pink-400);
}
.home-page .bbw-hero__cd-label,
.home-page .bbw-hero__cd-sep {
color: #ff9bc6;
}
.home-page .bbw-hero__btn {
color: var(--hero-btn-color);
background: var(--hero-btn-bg);
border-color: var(--hero-btn-bg);
box-shadow: 0 8px 24px rgba(232, 67, 135, 0.3);
letter-spacing: 0.08em;
}
.home-page .bbw-hero__btn:hover {
color: #fff;
background: var(--hero-btn-hover-bg);
border-color: var(--hero-btn-hover-bg);
box-shadow: 0 10px 28px rgba(46, 15, 107, 0.32);
}
.home-page .bbw-hero__btn--added {
color: #fff !important;
background: var(--cf-primary) !important;
border-color: var(--cf-primary) !important;
}
.home-page .bbw-hero__thumb.bbw-hero--active,
.home-page .bbw-hero__thumb:hover {
border-color: #ff9bc6;
}
.home-page .bbw-hero__dot {
border-color: rgba(248, 200, 226, 0.65);
}
.home-page .bbw-hero__dot.bbw-hero--active {
background: var(--pink-400);
border-color: var(--pink-400);
}
/* CURVAFIT TOOLKIT PREVIEW */
.cf-tool-preview {
position: relative;
overflow: hidden;
padding: clamp(40px, 5vw, 68px) 22px;
color: var(--cf-ink);
background:
radial-gradient(ellipse at 8% 12%, rgba(232, 67, 135, 0.09), transparent 34%),
linear-gradient(145deg, var(--cf-canvas) 0%, var(--cf-canvas-soft) 52%, var(--cf-surface-tint) 100%);
}
.cf-tool-preview__inner {
position: relative;
z-index: 1;
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
align-items: center;
gap: clamp(44px, 7vw, 100px);
width: min(1160px, 100%);
margin: 0 auto;
}
.cf-tool-preview__inner > * { min-width: 0; }
.cf-tool-preview__visual {
position: relative;
display: grid;
min-height: 470px;
place-items: center;
isolation: isolate;
}
.cf-tool-preview__blob {
position: absolute;
z-index: -1;
display: block;
border-radius: 50%;
filter: blur(1px);
}
.cf-tool-preview__blob--one {
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(183, 154, 224, 0.44), rgba(183, 154, 224, 0));
left: 2%;
top: 8%;
}
.cf-tool-preview__blob--two {
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(248, 200, 226, 0.72), rgba(248, 200, 226, 0));
right: 0;
bottom: 0;
}
.cf-planner-card {
position: relative;
z-index: 1;
box-sizing: border-box;
width: min(100%, 450px);
min-width: 0;
padding: 27px 29px 23px;
border: 1px solid rgba(93, 60, 144, 0.12);
border-radius: 24px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 28px 75px rgba(51, 16, 123, 0.15), 0 4px 14px rgba(51, 16, 123, 0.06);
transform: rotate(-2deg);
}
.cf-planner-card__topline,
.cf-planner-card__brand,
.cf-planner-card__heading,
.cf-week-days,
.cf-habit-row {
display: flex;
align-items: center;
}
.cf-planner-card__topline,
.cf-planner-card__heading { justify-content: space-between; }
.cf-planner-card__brand {
gap: 8px;
color: var(--purple-900, #2e0f6b);
font: 700 13px var(--font-heading, Poppins, sans-serif);
}
.cf-planner-card__mark {
display: grid;
width: 27px;
height: 27px;
place-items: center;
border-radius: 9px;
color: #fff;
background: var(--gradient-brand, linear-gradient(135deg, #3b1b7d, #e84387));
font-size: 14px;
}
.cf-planner-card__sample,
.cf-planner-card__week {
color: var(--text-muted, #6b5c88);
font: 700 9px var(--font-body, Inter, sans-serif);
letter-spacing: 0.12em;
}
.cf-planner-card__sample {
padding: 7px 9px;
border-radius: 999px;
color: var(--purple-700, #3b1b7d);
background: var(--lavender-100, #f3ecfb);
}
.cf-planner-card__heading { margin: 25px 0 18px; }
.cf-planner-card__kicker {
color: var(--pink-600, #d6458f);
font: 700 9px var(--font-body, Inter, sans-serif);
letter-spacing: 0.15em;
}
.cf-planner-card__heading h3 {
margin: 5px 0 0;
color: var(--purple-900, #2e0f6b);
font: 700 clamp(18px, 2vw, 23px)/1.2 var(--font-heading, Poppins, sans-serif);
}
.cf-week-days { justify-content: space-between; gap: 7px; }
.cf-week-day {
display: grid;
width: 39px;
height: 53px;
flex: 1;
justify-items: center;
align-content: center;
gap: 6px;
border: 1px solid #eee7f5;
border-radius: 12px;
color: var(--text-muted, #6b5c88);
font: 600 10px var(--font-body, Inter, sans-serif);
}
.cf-week-day i {
display: grid;
width: 17px;
height: 17px;
place-items: center;
border-radius: 50%;
color: transparent;
background: #f2edf7;
font: normal 10px var(--font-body, Inter, sans-serif);
}
.cf-week-day.is-done i {
color: #fff;
background: var(--pink-500, #e84387);
}
.cf-planner-card__rule { height: 1px; margin: 20px 0 8px; background: #f0eaf5; }
.cf-habit-row { min-height: 52px; gap: 11px; border-bottom: 1px solid #f4eff7; }
.cf-habit-row:last-of-type { border-bottom: 0; }
.cf-habit-row__icon {
display: grid;
width: 31px;
height: 31px;
flex: 0 0 31px;
place-items: center;
border-radius: 10px;
background: #f3ecfb;
}
.cf-habit-row__icon--walk { color: #6b42a2; background: #f1e9fb; }
.cf-habit-row__icon--water { color: #c03e91; background: #fff0f8; }
.cf-habit-row__icon--note { color: #d6458f; background: #fff0f4; }
.cf-habit-row__icon svg,
.cf-tool-item__icon svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cf-habit-row__label {
flex: 1;
color: #49376a;
font: 500 11px/1.35 var(--font-body, Inter, sans-serif);
}
.cf-habit-row__check {
display: grid;
width: 18px;
height: 18px;
flex: 0 0 18px;
place-items: center;
border: 1.5px solid #dfd4eb;
border-radius: 6px;
color: #fff;
font-size: 11px;
}
.cf-habit-row__check.is-checked { border-color: var(--pink-500, #e84387); background: var(--pink-500, #e84387); }
.cf-planner-card__note {
margin-top: 15px;
padding: 11px 12px;
border-radius: 11px;
color: var(--purple-700, #3b1b7d);
background: linear-gradient(100deg, #f7effc, #fff2f8);
font: 500 10px/1.4 var(--font-body, Inter, sans-serif);
}
.cf-planner-card__note span { margin-right: 5px; color: var(--pink-500, #e84387); }
.cf-preview-sticker {
position: absolute;
z-index: 2;
right: -3px;
bottom: 47px;
display: flex;
align-items: center;
gap: 9px;
padding: 13px 16px;
border: 1px solid rgba(255,255,255,.9);
border-radius: 15px;
color: #fff;
background: var(--gradient-brand, linear-gradient(135deg, #3b1b7d, #e84387));
box-shadow: 0 12px 30px rgba(51,16,123,.22);
font: 600 11px/1.25 var(--font-body, Inter, sans-serif);
transform: rotate(4deg);
}
.cf-preview-sticker__spark { font-size: 22px; }
.cf-tool-preview__content { max-width: 500px; }
.cf-tool-preview__eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--purple-700, #3b1b7d);
font: 700 10px var(--font-body, Inter, sans-serif);
letter-spacing: .17em;
}
.cf-tool-preview__eyebrow span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pink-500, #e84387);
box-shadow: 0 0 0 4px rgba(232,67,135,.12);
}
.cf-tool-preview__content h2 {
margin: 17px 0 13px;
color: var(--purple-900, #2e0f6b);
font: 700 clamp(32px, 4.2vw, 52px)/1.08 var(--font-heading, Poppins, sans-serif);
letter-spacing: -.04em;
}
.cf-tool-preview__content h2 em { color: var(--pink-500, #e84387); font-style: normal; }
.cf-tool-preview__intro {
max-width: 45ch;
margin: 0 0 25px;
color: var(--text-muted, #6b5c88);
font: 400 15px/1.7 var(--font-body, Inter, sans-serif);
}
.cf-tool-list { display: grid; }
.cf-tool-item {
display: grid;
grid-template-columns: 31px minmax(0,1fr) 37px;
align-items: center;
gap: 13px;
padding: 15px 0;
border-top: 1px solid rgba(93,60,144,.13);
}
.cf-tool-item__number { color: var(--pink-600, #d6458f); font: 700 10px var(--font-body, Inter, sans-serif); letter-spacing: .08em; }
.cf-tool-item h3 { margin: 0 0 4px; color: var(--purple-900, #2e0f6b); font: 700 14px var(--font-heading, Poppins, sans-serif); }
.cf-tool-item p { margin: 0; color: var(--text-muted, #6b5c88); font: 400 12px/1.5 var(--font-body, Inter, sans-serif); }
.cf-tool-item__icon {
display: grid;
width: 37px;
height: 37px;
place-items: center;
border-radius: 12px;
color: var(--purple-700, #3b1b7d);
background: #f0e8fa;
}
.cf-tool-item:nth-child(2) .cf-tool-item__icon { color: #c43f8d; background: #fff0f7; }
.cf-tool-item:nth-child(3) .cf-tool-item__icon { color: #8b4ca2; background: #f8edf9; }
.cf-tool-preview__link {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 21px;
color: var(--purple-700, #3b1b7d);
font: 700 12px var(--font-body, Inter, sans-serif);
text-decoration: none;
}
.cf-tool-preview__link span { color: var(--pink-500, #e84387); font-size: 20px; transition: transform .2s ease; }
.cf-tool-preview__link:hover span { transform: translateX(4px); }
@media (max-width: 860px) {
.cf-tool-preview { padding: 62px 22px 70px; }
.cf-tool-preview__inner { grid-template-columns: 1fr; gap: 30px; max-width: 650px; }
.cf-tool-preview__visual { min-height: 450px; }
.cf-tool-preview__content { max-width: none; }
}
@media (max-width: 520px) {
.cf-tool-preview { padding: 32px 14px 40px; }
.cf-tool-preview__inner { width: 100%; gap: 18px; }
.cf-tool-preview__visual { box-sizing: border-box; width: 100%; min-width: 0; min-height: 0; padding: 12px 3px 46px; }
.cf-planner-card { width: 100%; padding: 18px 14px 16px; border-radius: 18px; transform: none; }
.cf-planner-card__heading { min-width: 0; gap: 8px; margin: 17px 0 13px; }
.cf-planner-card__heading > div { min-width: 0; }
.cf-planner-card__heading h3 { font-size: clamp(16px, 5vw, 21px); }
.cf-planner-card__sample { flex: 0 0 auto; padding: 6px 7px; font-size: 8px; white-space: nowrap; }
.cf-planner-card__week { flex: 0 0 auto; font-size: 8px; white-space: nowrap; }
.cf-week-days { min-width: 0; gap: 4px; }
.cf-week-day { min-width: 0; height: 44px; border-radius: 8px; }
.cf-planner-card__rule { margin: 14px 0 5px; }
.cf-habit-row { min-height: 47px; gap: 8px; }
.cf-habit-row__label { font-size: 10px; }
.cf-habit-row__icon { width: 27px; height: 27px; flex-basis: 27px; }
.cf-preview-sticker { right: 0; bottom: 4px; padding: 9px 11px; font-size: 10px; transform: rotate(2deg); }
.cf-tool-preview__content h2 { font-size: clamp(31px, 9vw, 42px); }
.cf-tool-preview__intro { font-size: 14px; }
.cf-tool-item { grid-template-columns: 25px minmax(0,1fr) 34px; gap: 9px; }
.cf-tool-item p { font-size: 11px; }
}
/* Curvafit refined wave dividers */
.home-page .bbw-wave-sep {
z-index: 2;
overflow: hidden;
isolation: isolate;
}
.home-page .bbw-wave-sep path { animation: none !important; }
/* Soft ivory-to-lavender edge below the feature area. */
.home-page .bbw-wave-sep--nb {
height: 38px;
background: linear-gradient(105deg, var(--lavender-100, #f3ecfb), #fff 52%, #f8eefb);
}
.home-page .bbw-wave-sep--nb svg { height: 38px; }
.home-page .bbw-wave-sep--nb path { fill: #fff; }
/* A quiet layered lavender/rose transition before the product area. */
.home-page #wave-section {
height: 34px;
background: linear-gradient(100deg, #f3ecfb 0%, #fff 45%, #f8e8f5 100%);
}
.home-page #wave-section .wave-container {
left: 0;
width: 100%;
height: 100%;
}
.home-page #wave-section .wave {
width: 100%;
height: 100%;
animation: none;
fill: #e9dcf7;
opacity: .72;
}
.home-page #wave-section .wave:nth-child(2) {
animation: none;
fill: #f8c8e2;
opacity: .38;
}
/* Pale curved edge after journal cards. */
.home-page .bbw-wave-sep--reviews-out {
height: 38px;
background: linear-gradient(90deg, #f8eefb, #fff 48%, #f3ecfb);
}
.home-page .bbw-wave-sep--reviews-out svg { height: 38px; }
.home-page .bbw-wave-sep--reviews-out path { fill: #fff; }
@media (max-width: 640px) {
.home-page .bbw-wave-sep--nb,
.home-page .bbw-wave-sep--nb svg,
.home-page .bbw-wave-sep--reviews-out,
.home-page .bbw-wave-sep--reviews-out svg { height: 24px; }
.home-page #wave-section { height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
.home-page #wave-section .wave,
.home-page .bbw-wave-sep path { animation: none !important; }
}
/* Curvafit visible wave contrast */
.home-page .bbw-wave-sep--nb {
height: 48px;
background: #fff;
}
.home-page .bbw-wave-sep--nb svg { height: 48px; }
.home-page .bbw-wave-sep--nb path {
fill: #d9c4f1;
opacity: 1;
filter: drop-shadow(0 3px 3px rgba(46, 15, 107, .10));
}
.home-page #wave-section {
height: 40px;
background: #fff;
}
.home-page #wave-section .wave {
fill: #b79ae0;
opacity: .9;
}
.home-page #wave-section .wave:nth-child(2) {
fill: #f06fa6;
opacity: .55;
transform: translateY(7px) scaleY(.82);
}
.home-page .bbw-wave-sep--reviews-out {
height: 48px;
background: #fff;
}
.home-page .bbw-wave-sep--reviews-out svg { height: 48px; }
.home-page .bbw-wave-sep--reviews-out path {
fill: #f3c3df;
opacity: 1;
filter: drop-shadow(0 -3px 3px rgba(93, 60, 144, .09));
}
@media (max-width: 640px) {
.home-page .bbw-wave-sep--nb,
.home-page .bbw-wave-sep--nb svg,
.home-page .bbw-wave-sep--reviews-out,
.home-page .bbw-wave-sep--reviews-out svg { height: 32px; }
.home-page #wave-section { height: 28px; }
}
/* Curvafit luxury infinite marquee */
.cf-luxe-marquee {
position: relative;
overflow: hidden;
padding: 21px 0 18px;
border-top: 1px solid rgba(93, 60, 144, .12);
border-bottom: 1px solid rgba(93, 60, 144, .12);
background:
radial-gradient(ellipse at 14% 50%, rgba(183,154,224,.22), transparent 34%),
radial-gradient(ellipse at 88% 50%, rgba(248,200,226,.32), transparent 32%),
linear-gradient(100deg, #fbf8fe, #fff 48%, #fff8fc);
}
.cf-luxe-marquee__label {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin-bottom: 12px;
color: var(--purple-700, #3b1b7d);
font: 700 8px/1 var(--font-body, Inter, sans-serif);
letter-spacing: .24em;
text-align: center;
}
.cf-luxe-marquee__label span {
width: 22px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--pink-400, #f06fa6));
}
.cf-luxe-marquee__label span:last-child { transform: rotate(180deg); }
.cf-luxe-marquee__viewport {
overflow: hidden;
width: 100%;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.cf-luxe-marquee__track {
display: flex;
width: max-content;
animation: cf-luxe-marquee-scroll 38s linear infinite;
will-change: transform;
}
.cf-luxe-marquee__group {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: clamp(23px, 4vw, 58px);
padding-right: clamp(23px, 4vw, 58px);
}
.cf-luxe-marquee__phrase {
color: var(--purple-900, #2e0f6b);
font: 700 clamp(20px, 3.2vw, 43px)/1.1 var(--font-heading, Poppins, sans-serif);
letter-spacing: -.045em;
white-space: nowrap;
}
.cf-luxe-marquee__phrase--soft {
color: var(--pink-500, #e84387);
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: 500;
letter-spacing: -.035em;
}
.cf-luxe-marquee__star {
color: var(--pink-500, #e84387);
font-size: clamp(17px, 2vw, 25px);
line-height: 1;
}
.cf-luxe-marquee__rule {
display: block;
width: min(1160px, calc(100% - 36px));
height: 2px;
margin: 17px auto 0;
border-radius: 999px;
background: linear-gradient(90deg, transparent, rgba(93,60,144,.16), rgba(232,67,135,.22), transparent);
}
@keyframes cf-luxe-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (hover: hover) {
.cf-luxe-marquee:hover .cf-luxe-marquee__track { animation-play-state: paused; }
}
@media (max-width: 600px) {
.cf-luxe-marquee { padding: 16px 0 13px; }
.cf-luxe-marquee__label { margin-bottom: 10px; font-size: 7px; }
.cf-luxe-marquee__phrase { font-size: clamp(19px, 6vw, 27px); }
.cf-luxe-marquee__group { gap: 21px; padding-right: 21px; }
.cf-luxe-marquee__track { animation-duration: 30s; }
.cf-luxe-marquee__rule { margin-top: 13px; }
}
@media (prefers-reduced-motion: reduce) {
.cf-luxe-marquee__viewport { overflow-x: auto; }
.cf-luxe-marquee__track { animation: none; }
.cf-luxe-marquee__group[aria-hidden="true"] { display: none; }
}
/* Curvafit ebook collection */
.cf-guides {
--cg-muted: var(--text-muted, #6b5c88);
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(52px, 7vw, 92px) 24px;
background:
radial-gradient(
ellipse at 50% 0,
rgba(248, 200, 226, 0.38),
transparent 43%
),
linear-gradient(180deg, var(--cf-canvas) 0%, var(--cf-canvas-soft) 55%, var(--cf-canvas) 100%);
color: var(--cf-primary-strong);
}
.cf-guides:before,
.cf-guides:after {
content: "";
position: absolute;
z-index: -1;
width: 340px;
height: 340px;
border-radius: 50%;
filter: blur(80px);
opacity: 0.27;
pointer-events: none;
}
.cf-guides:before {
top: 25%;
left: -230px;
background: #d7c2fb;
}
.cf-guides:after {
right: -220px;
bottom: 0;
background: #f5bddb;
}
.cf-guides__inner {
width: min(1180px, 100%);
margin: auto;
}
.cf-guides__header {
max-width: 720px;
margin: 0 auto 42px;
text-align: center;
}
.cf-guides__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--pink-600, #d6458f);
font: 700 10px/1 var(--font-body, Inter, sans-serif);
letter-spacing: 0.2em;
}
.cf-guides__eyebrow i {
width: 24px;
height: 1px;
background: currentColor;
opacity: 0.65;
}
.cf-guides__header h2 {
margin: 16px 0 10px;
color: var(--purple-900, #2e0f6b);
font: 600 clamp(35px, 4.4vw, 56px)/1.08
var(--font-heading, Poppins, sans-serif);
letter-spacing: -0.045em;
}
.cf-guides__header h2 em {
color: var(--pink-500, #e84387);
font-style: normal;
}
.cf-guides__header p {
max-width: 590px;
margin: auto;
color: var(--cg-muted);
font: 400 15px/1.7 var(--font-body, Inter, sans-serif);
}
.cf-guides__rail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
.cf-guide-card {
min-width: 0;
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid var(--cf-line);
border-radius: 23px;
background: var(--cf-card-surface);
box-shadow: var(--cf-card-shadow);
transition:
transform 0.32s ease,
box-shadow 0.32s ease,
border-color 0.32s ease;
}
.cf-guide-card:hover {
transform: translateY(-7px);
border-color: rgba(232, 67, 135, 0.35);
box-shadow: 0 25px 55px rgba(46, 15, 107, 0.15);
}
.cf-guide-card__cover {
position: relative;
display: grid;
place-items: center;
min-height: 330px;
overflow: hidden;
margin: 10px 10px 0;
border-radius: 17px;
background: radial-gradient(
ellipse at center,
#fff 0%,
#f7efff 54%,
#f5deed 100%
);
}
.cf-guide-card__cover:after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: inherit;
pointer-events: none;
}
.cf-guide-card__cover img {
position: relative;
z-index: 1;
display: block;
width: auto;
height: 298px;
max-width: 72%;
object-fit: contain;
border-radius: 4px;
filter: drop-shadow(0 16px 19px rgba(43, 16, 82, 0.25));
transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cf-guide-card__image-link {
display: contents;
}
.cf-guide-card__title-link {
color: inherit;
text-decoration: none;
}
.cf-guide-card:hover .cf-guide-card__cover img {
transform: translateY(-4px) rotate(-1deg) scale(1.025);
}
.cf-guide-card__number {
position: absolute;
z-index: 2;
top: 16px;
left: 16px;
color: var(--purple-800, #33107b);
font: 700 11px/1 var(--font-body, Inter, sans-serif);
letter-spacing: 0.08em;
}
.cf-guide-card__number small {
color: rgba(46, 15, 107, 0.48);
font-weight: 500;
}
.cf-guide-card__format {
position: absolute;
z-index: 2;
right: 13px;
bottom: 13px;
padding: 8px 10px;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 99px;
background: rgba(255, 255, 255, 0.83);
color: var(--purple-800, #33107b);
font: 700 8px/1 var(--font-body, Inter, sans-serif);
letter-spacing: 0.1em;
backdrop-filter: blur(8px);
}
.cf-guide-card__format span {
color: var(--pink-500, #e84387);
}
.cf-guide-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 22px 21px 20px;
}
.cf-guide-card__eyebrow {
margin: 0 0 8px;
color: var(--pink-600, #d6458f);
font: 700 9px/1.2 var(--font-body, Inter, sans-serif);
letter-spacing: 0.16em;
}
.cf-guide-card h3 {
margin: 0;
color: var(--purple-900, #2e0f6b);
font: 600 23px/1.2 var(--font-heading, Poppins, sans-serif);
letter-spacing: -0.035em;
}
.cf-guide-card__body > p {
min-height: 70px;
margin: 10px 0 20px;
color: var(--cg-muted);
font: 400 13px/1.65 var(--font-body, Inter, sans-serif);
}
.cf-guide-card__pricing {
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 10px;
margin: -9px 0 17px;
color: var(--purple-900, #2e0f6b);
}
.cf-guide-card__pricing[hidden],
.cf-guide-card__pricing [hidden] {
display: none;
}
.cf-guide-card__price {
font: 700 16px/1.2 var(--font-heading, Poppins, sans-serif);
}
.cf-guide-card__compare {
color: var(--cg-muted);
font: 400 12px/1.2 var(--font-body, Inter, sans-serif);
}
.cf-guide-card__discount {
padding: 4px 7px;
border-radius: 4px;
background: rgba(232, 67, 135, 0.1);
color: var(--pink-600, #d6458f);
font: 700 10px/1 var(--font-body, Inter, sans-serif);
}
.cf-guide-language {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto;
padding: 12px 0 15px;
border-top: 1px solid rgba(93, 60, 144, 0.12);
color: var(--purple-800, #33107b);
font: 600 11px/1.3 var(--font-body, Inter, sans-serif);
}
.cf-guide-language__select {
position: relative;
flex: none;
}
.cf-guide-language select {
appearance: none;
min-width: 112px;
padding: 9px 30px 9px 12px;
border: 1px solid rgba(93, 60, 144, 0.2);
border-radius: 99px;
outline: 0;
background: #fff;
color: var(--purple-900, #2e0f6b);
font: 600 11px/1 var(--font-body, Inter, sans-serif);
cursor: pointer;
}
.cf-guide-language select:focus-visible {
border-color: var(--pink-500, #e84387);
box-shadow: 0 0 0 3px rgba(232, 67, 135, 0.15);
}
.cf-guide-language__select svg {
position: absolute;
top: 50%;
right: 11px;
width: 13px;
height: 13px;
fill: none;
stroke: var(--purple-700, #3b1b7d);
stroke-width: 1.6;
pointer-events: none;
transform: translateY(-50%);
}
.cf-guide-card__cta {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 48px;
padding: 0 17px;
border-radius: 12px;
background: var(--gradient-brand, linear-gradient(135deg, #3b1b7d, #e84387));
box-shadow: 0 7px 17px rgba(123, 79, 184, 0.2);
color: #fff;
text-decoration: none;
font: 600 12px/1 var(--font-body, Inter, sans-serif);
transition:
transform 0.2s,
box-shadow 0.2s;
}
.cf-guide-card__cta:hover {
transform: translateY(-2px);
box-shadow: 0 11px 24px rgba(123, 79, 184, 0.3);
}
.cf-guide-card__cta > span:last-child {
font-size: 19px;
transition: transform 0.2s;
}
.cf-guide-card__cta:hover > span:last-child {
transform: translateX(3px);
}
.cf-guides__mobile-controls {
display: none;
}
@media (max-width: 900px) {
.cf-guides {
padding-right: 20px;
padding-left: 20px;
}
.cf-guides__rail {
gap: 16px;
}
.cf-guide-card__cover {
min-height: 280px;
}
.cf-guide-card__cover img {
height: 252px;
}
.cf-guide-card__body {
padding: 19px 17px 17px;
}
.cf-guide-card h3 {
font-size: 20px;
}
}
@media (max-width: 680px) {
.cf-guides {
padding: 48px 0 54px;
}
.cf-guides__header {
margin: 0 auto 27px;
padding: 0 22px;
}
.cf-guides__eyebrow {
gap: 8px;
font-size: 8px;
letter-spacing: 0.15em;
}
.cf-guides__eyebrow i {
width: 16px;
}
.cf-guides__header h2 {
margin-top: 13px;
font-size: clamp(32px, 8.7vw, 42px);
}
.cf-guides__header p {
font-size: 13px;
line-height: 1.6;
}
.cf-guides__rail-wrap {
padding-left: 18px;
}
.cf-guides__rail {
display: flex;
gap: 14px;
overflow-x: auto;
overflow-y: hidden;
padding: 2px 18px 15px 0;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(93, 60, 144, 0.3) transparent;
}
.cf-guides__rail::-webkit-scrollbar {
height: 4px;
}
.cf-guides__rail::-webkit-scrollbar-thumb {
border-radius: 99px;
background: rgba(93, 60, 144, 0.3);
}
.cf-guide-card {
flex: 0 0 min(84vw, 360px);
scroll-snap-align: start;
}
.cf-guide-card:hover {
transform: none;
}
.cf-guide-card__cover {
min-height: 310px;
}
.cf-guide-card__cover img {
height: 282px;
}
.cf-guide-card__body {
padding: 20px 19px 19px;
}
.cf-guide-card h3 {
font-size: 22px;
}
.cf-guide-card__body > p {
min-height: 63px;
}
.cf-guides__mobile-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin: 8px 18px 0;
}
.cf-guides__mobile-controls button {
display: grid;
place-items: center;
width: 36px;
height: 36px;
flex: none;
padding: 0;
border: 1px solid rgba(93, 60, 144, 0.2);
border-radius: 50%;
background: #fff;
color: var(--purple-800, #33107b);
box-shadow: 0 4px 12px rgba(46, 15, 107, 0.08);
font-size: 17px;
cursor: pointer;
}
.cf-guides__mobile-controls button:focus-visible {
outline: 2px solid var(--pink-500, #e84387);
outline-offset: 3px;
}
.cf-guides__mobile-controls span {
color: var(--cg-muted);
font: 500 10px/1 var(--font-body, Inter, sans-serif);
}
}
@media (prefers-reduced-motion: reduce) {
.cf-guide-card,
.cf-guide-card__cover img,
.cf-guide-card__cta,
.cf-guide-card__cta > span:last-child {
transition: none;
}
}
/* Compact spacing for the Curvafit guide collection */
.cf-guides {
padding-top: 42px;
padding-bottom: 46px;
}
.cf-guides__header {
margin-bottom: 28px;
}
.cf-guides__header h2 {
margin-top: 12px;
}
.cf-guide-card__cover {
min-height: 270px;
}
.cf-guide-card__cover img {
height: 242px;
}
.cf-guide-card__body {
padding: 17px 18px 17px;
}
.cf-guide-card__body > p {
min-height: 58px;
margin-top: 8px;
margin-bottom: 14px;
}
@media (max-width: 900px) {
.cf-guide-card__cover {
min-height: 246px;
}
.cf-guide-card__cover img {
height: 222px;
}
.cf-guide-card__body {
padding: 16px 15px 15px;
}
}
@media (max-width: 680px) {
.cf-guides {
padding-top: 36px;
padding-bottom: 38px;
}
.cf-guides__header {
margin-bottom: 21px;
}
.cf-guide-card__cover {
min-height: 264px;
}
.cf-guide-card__cover img {
height: 238px;
}
.cf-guide-card__body {
padding: 17px 17px 16px;
}
}
/* Curvafit dual icon marquee */
.cf-motion-marquee {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 54px 0 40px;
background:
radial-gradient(
ellipse at 50% 0,
rgba(123, 79, 184, 0.35),
transparent 52%
),
linear-gradient(125deg, #24104c 0%, #38166c 48%, #251049 100%);
color: #fff;
}
.cf-motion-marquee:before,
.cf-motion-marquee:after {
position: absolute;
z-index: -1;
content: "";
height: 1px;
left: 7%;
right: 7%;
background: linear-gradient(
90deg,
transparent,
rgba(248, 200, 226, 0.45),
rgba(183, 154, 224, 0.62),
transparent
);
}
.cf-motion-marquee:before {
top: 0;
}
.cf-motion-marquee:after {
bottom: 0;
}
.cf-motion-marquee__glow {
position: absolute;
z-index: -1;
top: 34%;
left: 50%;
width: min(680px, 80vw);
height: 160px;
border-radius: 50%;
background: rgba(232, 67, 135, 0.13);
filter: blur(70px);
transform: translateX(-50%);
}
.cf-motion-marquee__header {
position: relative;
z-index: 1;
margin: 0 auto 30px;
padding: 0 20px;
text-align: center;
}
.cf-motion-marquee__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
color: #f8c8e2;
font: 700 9px/1 var(--font-body, Inter, sans-serif);
letter-spacing: 0.22em;
}
.cf-motion-marquee__eyebrow i {
width: 20px;
height: 1px;
background: currentColor;
opacity: 0.75;
}
.cf-motion-marquee__header h2 {
margin: 12px 0 7px;
color: #fff;
font: 500 clamp(25px, 3.4vw, 40px)/1.15
var(--font-heading, Poppins, sans-serif);
letter-spacing: -0.035em;
}
.cf-motion-marquee__header h2 em {
color: #f6a7d2;
font-style: normal;
}
.cf-motion-marquee__header p {
margin: 0;
color: rgba(255, 255, 255, 0.7);
font: 400 12px/1.5 var(--font-body, Inter, sans-serif);
letter-spacing: 0.025em;
}
.cf-motion-marquee__lanes {
display: grid;
gap: 12px;
}
.cf-motion-lane {
width: 100%;
overflow: hidden;
mask-image: linear-gradient(
90deg,
transparent,
#000 6%,
#000 94%,
transparent
);
-webkit-mask-image: linear-gradient(
90deg,
transparent,
#000 6%,
#000 94%,
transparent
);
}
.cf-motion-track {
display: flex;
width: max-content;
will-change: transform;
animation: cf-motion-left 42s linear infinite;
}
.cf-motion-track--right {
animation-name: cf-motion-right;
animation-duration: 48s;
}
.cf-motion-marquee:hover .cf-motion-track {
animation-play-state: paused;
}
.cf-motion-group {
display: flex;
flex: none;
align-items: center;
gap: 13px;
padding: 0 6.5px;
}
.cf-motion-item {
display: inline-flex;
align-items: center;
gap: 11px;
min-height: 68px;
padding: 0 19px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background: linear-gradient(
115deg,
rgba(255, 255, 255, 0.09),
rgba(255, 255, 255, 0.035)
);
box-shadow:
inset 0 1px rgba(255, 255, 255, 0.08),
0 8px 22px rgba(11, 4, 29, 0.12);
color: rgba(255, 255, 255, 0.93);
white-space: nowrap;
font: 600 10px/1 var(--font-body, Inter, sans-serif);
letter-spacing: 0.105em;
}
.cf-motion-item svg {
width: 31px;
height: 31px;
flex: 0 0 31px;
fill: none;
stroke: #f6a7d2;
stroke-width: 1.65;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 8px rgba(232, 67, 135, 0.28));
}
.cf-motion-group:nth-child(2) .cf-motion-item {
background: linear-gradient(
115deg,
rgba(183, 154, 224, 0.13),
rgba(255, 255, 255, 0.035)
);
}
.cf-motion-group:nth-child(2) .cf-motion-item svg {
stroke: #d6c3ff;
}
.cf-motion-marquee__signature {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 22px;
color: rgba(255, 255, 255, 0.56);
font: 600 8px/1 var(--font-body, Inter, sans-serif);
letter-spacing: 0.24em;
}
.cf-motion-marquee__signature span {
color: #f6a7d2;
font-size: 11px;
}
@keyframes cf-motion-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@keyframes cf-motion-right {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
@media (max-width: 680px) {
.cf-motion-marquee {
padding: 38px 0 30px;
}
.cf-motion-marquee__header {
margin-bottom: 22px;
}
.cf-motion-marquee__eyebrow {
font-size: 8px;
}
.cf-motion-marquee__header h2 {
max-width: 360px;
margin: 11px auto 7px;
font-size: clamp(23px, 6.2vw, 30px);
}
.cf-motion-marquee__header p {
max-width: 310px;
margin: auto;
font-size: 11px;
}
.cf-motion-marquee__lanes {
gap: 9px;
}
.cf-motion-item {
min-height: 55px;
gap: 8px;
padding: 0 14px;
font-size: 8px;
letter-spacing: 0.08em;
}
.cf-motion-item svg {
width: 25px;
height: 25px;
flex-basis: 25px;
}
.cf-motion-group {
gap: 9px;
padding: 0 4.5px;
}
.cf-motion-marquee__signature {
margin-top: 17px;
font-size: 7px;
letter-spacing: 0.18em;
}
}
@media (prefers-reduced-motion: reduce) {
.cf-motion-track {
animation: none;
transform: none;
}
}
/* Shorter dual icon marquee */
.cf-motion-marquee {
padding-top: 34px;
padding-bottom: 24px;
}
.cf-motion-marquee__header {
margin-bottom: 19px;
}
.cf-motion-marquee__lanes {
gap: 8px;
}
.cf-motion-item {
min-height: 54px;
padding-right: 15px;
padding-left: 15px;
}
.cf-motion-item svg {
width: 27px;
height: 27px;
flex-basis: 27px;
}
.cf-motion-marquee__signature {
margin-top: 14px;
}
@media (max-width: 680px) {
.cf-motion-marquee {
padding-top: 26px;
padding-bottom: 20px;
}
.cf-motion-marquee__header {
margin-bottom: 16px;
}
.cf-motion-item {
min-height: 46px;
}
.cf-motion-item svg {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.cf-motion-marquee__signature {
margin-top: 12px;
}
}
/* Curvafit approach and guidance section */
.cf-approach {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(42px, 5vw, 68px) 24px;
background:
radial-gradient(
ellipse at 0 20%,
rgba(248, 200, 226, 0.28),
transparent 42%
),
linear-gradient(135deg, var(--cf-canvas) 0%, var(--cf-canvas-soft) 56%, var(--cf-canvas) 100%);
color: var(--cf-primary-strong);
}
.cf-approach__glow {
position: absolute;
z-index: -1;
top: 15%;
right: -160px;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(183, 154, 224, 0.18);
filter: blur(75px);
pointer-events: none;
}
.cf-approach__inner {
width: min(1160px, 100%);
margin: auto;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
column-gap: clamp(38px, 7vw, 94px);
row-gap: 28px;
align-items: center;
}
.cf-approach__intro {
max-width: 490px;
}
.cf-approach__eyebrow {
display: flex;
align-items: center;
gap: 9px;
color: var(--pink-600, #d6458f);
font: 700 9px/1 var(--font-body, Inter, sans-serif);
letter-spacing: 0.19em;
}
.cf-approach__eyebrow i {
width: 22px;
height: 1px;
background: currentColor;
}
.cf-approach__intro h2 {
margin: 16px 0 14px;
color: var(--purple-900, #2e0f6b);
font: 600 clamp(35px, 4vw, 51px)/1.08 var(--font-heading, Poppins, sans-serif);
letter-spacing: -0.045em;
}
.cf-approach__intro h2 em {
color: var(--pink-500, #e84387);
font-style: normal;
}
.cf-approach__lead {
max-width: 450px;
margin: 0;
color: var(--text-muted, #6b5c88);
font: 400 14px/1.75 var(--font-body, Inter, sans-serif);
}
.cf-approach__promise {
display: flex;
align-items: center;
gap: 15px;
margin-top: 24px;
padding: 16px;
border: 1px solid rgba(232, 67, 135, 0.16);
border-radius: 16px;
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 10px 30px rgba(46, 15, 107, 0.055);
}
.cf-approach__promise-icon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 14px;
background: linear-gradient(135deg, #f8e7f4, #ede5fb);
color: var(--purple-700, #3b1b7d);
}
.cf-approach__promise-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.cf-approach__promise strong,
.cf-approach__promise span:not(.cf-approach__promise-icon) {
display: block;
}
.cf-approach__promise strong {
margin-bottom: 4px;
color: var(--purple-900, #2e0f6b);
font: 700 11px/1.35 var(--font-body, Inter, sans-serif);
}
.cf-approach__promise div span {
color: var(--text-muted, #6b5c88);
font: 400 10px/1.5 var(--font-body, Inter, sans-serif);
}
.cf-approach__journey {
position: relative;
display: grid;
gap: 11px;
}
.cf-approach__journey:before {
position: absolute;
top: 35px;
bottom: 35px;
left: 26px;
width: 1px;
background: linear-gradient(
180deg,
rgba(232, 67, 135, 0.35),
rgba(123, 79, 184, 0.25)
);
content: "";
}
.cf-approach-step {
position: relative;
display: grid;
grid-template-columns: 52px 46px minmax(0, 1fr);
align-items: center;
gap: 13px;
min-height: 100px;
padding: 15px 18px;
border: 1px solid var(--cf-line);
border-radius: 18px;
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 9px 28px rgba(46, 15, 107, 0.045);
transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.cf-approach-step:hover {
transform: translateX(4px);
border-color: rgba(232, 67, 135, 0.25);
box-shadow: 0 13px 33px rgba(46, 15, 107, 0.085);
}
.cf-approach-step__number {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid rgba(232, 67, 135, 0.24);
border-radius: 50%;
background: #fff;
color: var(--pink-600, #d6458f);
font: 700 10px/1 var(--font-body, Inter, sans-serif);
letter-spacing: 0.04em;
}
.cf-approach-step__icon {
display: grid;
place-items: center;
width: 43px;
height: 43px;
border-radius: 14px;
background: linear-gradient(140deg, #f8edf8, #f0eaff);
color: var(--purple-700, #3b1b7d);
}
.cf-approach-step__icon svg {
width: 25px;
height: 25px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.cf-approach-step__label {
color: var(--pink-600, #d6458f);
font: 700 8px/1.3 var(--font-body, Inter, sans-serif);
letter-spacing: 0.15em;
}
.cf-approach-step h3 {
margin: 4px 0 3px;
color: var(--purple-900, #2e0f6b);
font: 600 15px/1.3 var(--font-heading, Poppins, sans-serif);
}
.cf-approach-step p {
margin: 0;
color: var(--text-muted, #6b5c88);
font: 400 10px/1.5 var(--font-body, Inter, sans-serif);
}
.cf-approach__closing {
grid-column: 1/-1;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 2px;
padding: 15px 20px;
border: 1px solid rgba(123, 79, 184, 0.15);
border-radius: 13px;
background: linear-gradient(
100deg,
rgba(243, 236, 251, 0.78),
rgba(255, 255, 255, 0.88),
rgba(248, 200, 226, 0.36)
);
color: var(--purple-800, #33107b);
text-align: center;
font: 700 9px/1.4 var(--font-body, Inter, sans-serif);
letter-spacing: 0.17em;
}
.cf-approach__closing span {
color: var(--pink-500, #e84387);
font-size: 12px;
}
@media (max-width: 800px) {
.cf-approach {
padding: 42px 22px;
}
.cf-approach__inner {
grid-template-columns: 1fr;
gap: 25px;
}
.cf-approach__intro {
max-width: 620px;
margin: auto;
text-align: center;
}
.cf-approach__eyebrow {
justify-content: center;
}
.cf-approach__lead {
margin: auto;
}
.cf-approach__promise {
text-align: left;
}
.cf-approach__journey {
width: min(620px, 100%);
margin: auto;
}
.cf-approach__closing {
margin-top: 0;
}
}
@media (max-width: 560px) {
.cf-approach {
padding: 36px 17px;
}
.cf-approach__intro h2 {
margin: 13px 0 10px;
font-size: clamp(32px, 8.5vw, 42px);
}
.cf-approach__lead {
font-size: 12px;
line-height: 1.65;
}
.cf-approach__promise {
gap: 11px;
margin-top: 18px;
padding: 13px;
}
.cf-approach__journey {
gap: 9px;
}
.cf-approach__journey:before {
left: 20px;
}
.cf-approach-step {
grid-template-columns: 40px 38px minmax(0, 1fr);
gap: 9px;
min-height: 88px;
padding: 12px 10px;
border-radius: 15px;
}
.cf-approach-step__number {
width: 34px;
height: 34px;
font-size: 9px;
}
.cf-approach-step__icon {
width: 36px;
height: 36px;
border-radius: 12px;
}
.cf-approach-step__icon svg {
width: 21px;
height: 21px;
}
.cf-approach-step__label {
font-size: 7px;
}
.cf-approach-step h3 {
font-size: 13px;
}
.cf-approach-step p {
font-size: 9px;
}
.cf-approach__closing {
gap: 7px;
padding: 13px 9px;
font-size: 7px;
letter-spacing: 0.11em;
}
}
@media (prefers-reduced-motion: reduce) {
.cf-approach-step {
transition: none;
}
}
/* Decorative Curvafit wave below the approach section */
.cf-approach-wave {
position: relative;
z-index: 1;
height: clamp(22px, 2.5vw, 32px);
margin-top: -1px;
overflow: hidden;
line-height: 0;
pointer-events: none;
background: var(--cf-canvas-soft, #faf6fe);
}
.cf-approach-wave svg {
display: block;
width: 100%;
height: 100%;
}
@media (max-width: 767px) {
.cf-approach-wave { height: 22px; }
}
/* Curvafit partner products showcase */
.cf-products {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(48px, 6vw, 82px) 22px;
background:
radial-gradient(
ellipse at 12% 0%,
rgba(232, 67, 135, 0.09),
transparent 35%
),
linear-gradient(145deg, var(--cf-canvas) 0%, var(--cf-canvas-soft) 52%, var(--cf-surface-tint) 100%);
color: var(--cf-ink);
}
.cf-products:before {
content: "";
position: absolute;
z-index: -1;
width: 520px;
height: 520px;
right: -250px;
bottom: -340px;
border: 1px solid rgba(93, 60, 144, 0.11);
border-radius: 50%;
box-shadow:
0 0 0 35px rgba(93, 60, 144, 0.025),
0 0 0 75px rgba(93, 60, 144, 0.02);
}
.cf-products__inner {
width: min(1120px, 100%);
margin: 0 auto;
}
.cf-products__heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 27px;
}
.cf-products__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--pink-600);
font: 700 0.68rem/1 var(--font-body);
letter-spacing: 0.19em;
}
.cf-products__eyebrow span {
font-size: 0.95rem;
}
.cf-products__heading h2 {
max-width: 650px;
margin: 12px 0 9px;
color: var(--purple-900);
font: 600 clamp(2rem, 4vw, 3.15rem)/1.08 var(--font-heading);
letter-spacing: -0.045em;
}
.cf-products__heading h2 em {
color: var(--pink-500);
font-weight: 500;
}
.cf-products__heading p {
margin: 0;
color: var(--text-muted);
font: 400 0.98rem/1.65 var(--font-body);
}
.cf-products__note {
display: flex;
align-items: center;
gap: 9px;
margin: 0 1px 7px;
color: var(--purple-700);
font: 600 0.76rem var(--font-body);
white-space: nowrap;
}
.cf-products__note span,
.cf-products__coming i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pink-500);
box-shadow: 0 0 0 4px rgba(232, 67, 135, 0.12);
}
.cf-products__showcase {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
min-height: 360px;
overflow: hidden;
border: 1px solid var(--cf-line);
border-radius: 26px;
background: var(--cf-card-surface);
box-shadow: 0 20px 55px rgba(46, 15, 107, 0.11), 0 3px 10px rgba(46, 15, 107, 0.04);
}
.cf-products__art {
position: relative;
display: grid;
place-items: center;
min-height: 360px;
overflow: hidden;
background: linear-gradient(145deg, var(--cf-primary-strong) 0%, var(--purple-700) 50%, var(--pink-600) 100%);
}
.cf-products__art:before,
.cf-products__art:after {
content: "";
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
}
.cf-products__art:before {
width: 340px;
height: 340px;
}
.cf-products__art:after {
width: 265px;
height: 265px;
}
.cf-products__art-orbit {
position: absolute;
display: block;
width: 420px;
height: 160px;
border: 1px solid rgba(248, 200, 226, 0.22);
border-radius: 50%;
transform: rotate(-34deg);
}
.cf-products__art-orbit--two {
width: 430px;
height: 190px;
transform: rotate(43deg);
border-color: rgba(255, 255, 255, 0.13);
}
.cf-products__art-glow {
position: absolute;
width: 220px;
height: 220px;
border-radius: 50%;
background: rgba(232, 67, 135, 0.42);
filter: blur(65px);
}
.cf-products__art-mark {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 148px;
height: 148px;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 50%;
color: white;
font: 500 5.2rem/1 var(--font-heading);
letter-spacing: -0.1em;
text-shadow: 0 4px 22px rgba(30, 6, 63, 0.26);
}
.cf-products__art-mark span {
color: #f8c8e2;
font-size: 2.2rem;
vertical-align: top;
}
.cf-products__art-caption {
position: absolute;
bottom: 35px;
color: rgba(255, 255, 255, 0.77);
font: 600 0.6rem var(--font-body);
letter-spacing: 0.25em;
}
.cf-products__art-spark {
position: absolute;
width: 27px;
fill: #f8c8e2;
opacity: 0.9;
}
.cf-products__art-spark--one {
top: 17%;
left: 19%;
}
.cf-products__art-spark--two {
right: 17%;
bottom: 23%;
width: 16px;
fill: #fff;
}
.cf-products__art-stamp {
position: absolute;
top: 20%;
right: 13%;
display: grid;
place-items: center;
width: 86px;
height: 86px;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
color: white;
text-align: center;
font: 600 0.55rem/1.35 var(--font-body);
letter-spacing: 0.1em;
transform: rotate(10deg);
}
.cf-products__copy {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 25px 31px 20px;
}
.cf-products__copy-top,
.cf-products__copy-bottom {
display: flex;
justify-content: space-between;
gap: 12px;
color: #8a7aa4;
font: 700 0.57rem var(--font-body);
letter-spacing: 0.13em;
}
.cf-products__copy-main {
max-width: 420px;
margin: 22px auto;
}
.cf-products__mini-mark {
display: grid;
place-items: center;
width: 38px;
height: 38px;
margin-bottom: 17px;
border-radius: 13px;
background: var(--gradient-brand);
color: #fff;
font: 600 1.35rem var(--font-heading);
box-shadow: 0 7px 18px rgba(93, 60, 144, 0.2);
}
.cf-products__copy h3 {
max-width: 360px;
margin: 0 0 12px;
color: var(--purple-900);
font: 600 clamp(1.65rem, 3vw, 2.2rem)/1.14 var(--font-heading);
letter-spacing: -0.035em;
}
.cf-products__copy-main p {
max-width: 380px;
margin: 0;
color: var(--text-muted);
font: 400 0.91rem/1.75 var(--font-body);
}
.cf-products__coming {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 21px;
padding: 10px 14px;
border: 1px solid rgba(93, 60, 144, 0.13);
border-radius: 999px;
background: #fbf8fe;
color: var(--purple-700);
font: 600 0.72rem var(--font-body);
}
.cf-products__coming i {
width: 6px;
height: 6px;
}
.cf-products__copy-bottom {
padding-top: 15px;
border-top: 1px solid rgba(93, 60, 144, 0.12);
}
.cf-products__foot {
display: flex;
align-items: center;
gap: 12px;
margin: 18px 3px 0;
color: #8a7aa4;
font: 700 0.57rem var(--font-body);
letter-spacing: 0.16em;
}
.cf-products__foot > span:first-child {
color: var(--pink-600);
}
.cf-products__foot-line {
width: 45px;
height: 1px;
background: linear-gradient(90deg, var(--pink-500), rgba(232, 67, 135, 0.12));
}
.cf-products__foot-spark {
margin-left: auto;
color: var(--pink-500);
font-size: 1rem;
}
@media (max-width: 700px) {
.cf-products {
padding: 42px 16px 46px;
}
.cf-products__heading {
display: block;
margin-bottom: 19px;
}
.cf-products__heading h2 {
font-size: 2rem;
}
.cf-products__heading p {
max-width: 34rem;
font-size: 0.9rem;
}
.cf-products__note {
margin-top: 14px;
font-size: 0.7rem;
}
.cf-products__showcase {
grid-template-columns: 1fr;
min-height: 0;
border-radius: 21px;
}
.cf-products__art {
min-height: 230px;
}
.cf-products__art:before {
width: 230px;
height: 230px;
}
.cf-products__art:after {
width: 185px;
height: 185px;
}
.cf-products__art-mark {
width: 105px;
height: 105px;
font-size: 3.8rem;
}
.cf-products__art-orbit {
width: 330px;
height: 130px;
}
.cf-products__art-orbit--two {
width: 340px;
height: 150px;
}
.cf-products__art-caption {
bottom: 19px;
font-size: 0.52rem;
}
.cf-products__art-stamp {
top: 16%;
right: 12%;
width: 69px;
height: 69px;
font-size: 0.47rem;
}
.cf-products__copy {
min-height: 255px;
padding: 19px 20px 17px;
}
.cf-products__copy-main {
margin: 20px 0 23px;
}
.cf-products__copy h3 {
font-size: 1.75rem;
}
.cf-products__copy-main p {
font-size: 0.85rem;
}
.cf-products__copy-top,
.cf-products__copy-bottom {
font-size: 0.49rem;
letter-spacing: 0.1em;
}
.cf-products__foot {
font-size: 0.5rem;
}
}
/* Curvafit five-card partner product shelf */
.cf-products__controls {
display: none;
align-items: center;
gap: 9px;
padding-bottom: 5px;
}
.cf-products__count {
margin-right: 9px;
color: #8a7aa4;
font: 700 0.68rem var(--font-body);
letter-spacing: 0.11em;
}
.cf-products__count i {
display: inline-block;
width: 24px;
height: 1px;
margin: 0 5px 3px;
background: var(--pink-400);
}
.cf-products__arrow {
display: grid;
place-items: center;
width: 39px;
height: 39px;
border: 1px solid rgba(93, 60, 144, 0.2);
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
color: var(--purple-800);
font-size: 1rem;
cursor: pointer;
transition:
background 0.2s,
color 0.2s,
transform 0.2s;
}
.cf-products__arrow:hover {
background: var(--purple-800);
color: #fff;
transform: translateY(-2px);
}
.cf-products__track {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 15px;
}
.cf-product-card {
min-width: 0;
overflow: hidden;
border: 1px solid rgba(93, 60, 144, 0.14);
border-radius: 18px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 10px 30px rgba(51, 16, 123, 0.07);
transition:
transform 0.25s,
box-shadow 0.25s;
}
.cf-product-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 36px rgba(51, 16, 123, 0.13);
}
.cf-product-card__visual {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 0.83;
overflow: hidden;
background:
radial-gradient(
circle at 50% 47%,
rgba(255, 255, 255, 0.22),
transparent 37%
),
linear-gradient(145deg, #3b1b7d, #7b4fb8 58%, #d6458f);
}
.cf-product-card__visual:before,
.cf-product-card__visual:after {
position: absolute;
content: "";
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
}
.cf-product-card__visual:before {
width: 76%;
aspect-ratio: 1;
}
.cf-product-card__visual:after {
width: 58%;
aspect-ratio: 1;
border-color: rgba(255, 255, 255, 0.16);
}
.cf-product-card__visual--2 {
background:
radial-gradient(
circle at 50% 47%,
rgba(255, 255, 255, 0.22),
transparent 37%
),
linear-gradient(145deg, #552184, #ad4b98 65%, #f06fa6);
}
.cf-product-card__visual--3 {
background:
radial-gradient(
circle at 50% 47%,
rgba(255, 255, 255, 0.22),
transparent 37%
),
linear-gradient(145deg, #2e0f6b, #6651a3 65%, #b79ae0);
}
.cf-product-card__visual--4 {
background:
radial-gradient(
circle at 50% 47%,
rgba(255, 255, 255, 0.22),
transparent 37%
),
linear-gradient(145deg, #682b82, #b04a98 65%, #f06fa6);
}
.cf-product-card__visual--5 {
background:
radial-gradient(
circle at 50% 47%,
rgba(255, 255, 255, 0.22),
transparent 37%
),
linear-gradient(145deg, #3b1b7d, #8660b5 65%, #d77cae);
}
.cf-product-card__label,
.cf-product-card__visual-note {
position: absolute;
z-index: 1;
left: 14px;
color: rgba(255, 255, 255, 0.78);
font: 700 0.48rem var(--font-body);
letter-spacing: 0.15em;
}
.cf-product-card__label {
top: 14px;
padding: 6px 9px;
border-radius: 4px;
background: rgba(62, 31, 116, 0.88);
color: #fff;
letter-spacing: 0.06em;
}
.cf-product-card__visual-note {
bottom: 14px;
letter-spacing: 0.17em;
}
.cf-product-card__seal {
position: absolute;
z-index: 2;
top: 15%;
right: 12%;
display: grid;
place-items: center;
width: 54px;
height: 54px;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 50%;
color: #fff;
text-align: center;
font: 600 0.43rem/1.25 var(--font-body);
letter-spacing: 0.06em;
transform: rotate(9deg);
}
.cf-product-card__monogram {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 76px;
height: 76px;
border: 1px solid rgba(255, 255, 255, 0.66);
border-radius: 50%;
color: #fff;
font: 500 2.9rem/1 var(--font-heading);
letter-spacing: -0.09em;
text-shadow: 0 3px 15px rgba(34, 9, 65, 0.28);
}
.cf-product-card__monogram span {
color: #f8c8e2;
font-size: 1rem;
align-self: start;
margin-top: 12px;
}
.cf-product-card__body {
padding: 13px 13px 14px;
}
.cf-product-card__meta {
display: flex;
justify-content: space-between;
color: #917da9;
font: 700 0.48rem var(--font-body);
letter-spacing: 0.11em;
}
.cf-product-card h3 {
margin: 10px 0 4px;
color: var(--purple-900);
font: 600 0.98rem/1.25 var(--font-heading);
}
.cf-product-card__body p {
min-height: 31px;
margin: 0;
color: var(--text-muted);
font: 400 0.68rem/1.45 var(--font-body);
}
.cf-product-card__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(93, 60, 144, 0.12);
}
.cf-product-card__price {
color: var(--purple-900);
font: 600 0.95rem var(--font-heading);
}
.cf-product-card[hidden] { display: none !important; }
.cf-product-card__image-link {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: inherit;
text-decoration: none;
}
.cf-product-card__image {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cf-product-card__image[hidden] { display: none; }
.cf-product-card__visual.has-image::before,
.cf-product-card__visual.has-image::after,
.cf-product-card__visual.has-image .cf-product-card__seal,
.cf-product-card__visual.has-image .cf-product-card__monogram,
.cf-product-card__visual.has-image .cf-product-card__visual-note { display: none; }
.cf-product-card__wishlist {
position: absolute;
z-index: 4;
top: 10px;
right: 10px;
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 7px;
border: 1px solid rgba(93, 60, 144, 0.14);
border-radius: 50%;
background: rgba(255, 255, 255, 0.94);
color: var(--purple-800);
cursor: pointer;
}
.cf-product-card__wishlist svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cf-product-card__wishlist .wishlist-icon-filled { display: none; fill: currentColor; }
.cf-product-card__wishlist.active .wishlist-icon-empty { display: none; }
.cf-product-card__wishlist.active .wishlist-icon-filled { display: block; }
.cf-product-card__wishlist:hover,
.cf-product-card__wishlist.active { color: var(--pink-600); }
.cf-product-card__body h3 a { color: inherit; text-decoration: none; }
.cf-product-card__body h3 a:hover { color: var(--pink-600); }
.cf-product-card__bottom { align-items: flex-end; }
.cf-product-card__pricing {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-start;
gap: 3px 7px;
min-width: 0;
}
.cf-product-card__compare { color: #8a7aa4; font: 400 0.65rem var(--font-body); }
.cf-product-card__discount {
display: inline-flex;
align-items: center;
padding: 3px 6px;
border-radius: 999px;
background: rgba(214, 69, 143, 0.11);
color: var(--pink-600);
font: 700 0.58rem/1 var(--font-body);
}
.cf-product-card__discount[hidden],
.cf-product-card__compare[hidden] { display: none; }
.cf-product-card__add {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
flex: 0 0 auto;
min-height: 32px;
padding: 0 9px;
border: 0;
border-radius: 7px;
background: var(--purple-800);
color: #fff;
font: 700 0.56rem var(--font-body);
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.cf-product-card__add:hover { background: var(--pink-600); transform: translateY(-1px); }
.cf-product-card__add i { font-size: 0.7rem; }
.cf-products__mobile-hint {
display: none;
}
@media (max-width: 950px) {
.cf-products__track {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 13px;
}
}
@media (max-width: 700px) {
.cf-products {
padding: 42px 16px 46px;
}
.cf-products__controls {
display: flex;
}
.cf-products__heading {
align-items: flex-end;
gap: 12px;
margin-bottom: 19px;
}
.cf-products__heading h2 {
font-size: 2rem;
}
.cf-products__heading p {
max-width: 34rem;
font-size: 0.88rem;
}
.cf-products__controls {
gap: 6px;
padding-bottom: 0;
}
.cf-products__count {
display: none;
}
.cf-products__arrow {
width: 35px;
height: 35px;
}
.cf-products__track {
display: flex;
gap: 13px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: rgba(93, 60, 144, 0.35) transparent;
padding: 0 1px 13px;
}
.cf-product-card,
.cf-product-card:nth-child(n + 4) {
display: block;
flex: 0 0 min(72vw, 255px);
scroll-snap-align: start;
}
.cf-product-card__visual {
aspect-ratio: 0.9;
}
.cf-product-card__body {
padding: 14px;
}
.cf-product-card h3 {
font-size: 1.05rem;
}
.cf-product-card__body p {
font-size: 0.73rem;
}
.cf-product-card__soon {
font-size: 0.5rem;
}
.cf-products__mobile-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin-top: 5px;
color: #8a7aa4;
font: 700 0.52rem var(--font-body);
letter-spacing: 0.15em;
}
.cf-products__mobile-hint span {
width: 16px;
height: 1px;
background: var(--pink-400);
}
}
@media (prefers-reduced-motion: reduce) {
.cf-product-card,
.cf-products__arrow {
transition: none;
}
}
/* Spacing and desktop card width refinement */
.cf-products {
padding-top: 34px;
padding-bottom: 34px;
margin-top: 0;
}
.cf-products__heading {
margin-bottom: 19px;
}
.cf-products__track {
gap: 10px;
}
@media (min-width: 951px) {
.cf-products__inner {
width: min(1220px, 100%);
}
.cf-products__track {
gap: 11px;
}
.cf-product-card__body {
padding-left: 15px;
padding-right: 15px;
}
}
@media (max-width: 700px) {
.cf-products {
padding-top: 25px;
padding-bottom: 27px;
}
.cf-products__heading {
margin-bottom: 14px;
}
}
/* Premium transition directly below the home hero */
.cf-home-wave {
position: relative;
z-index: 2;
height: clamp(42px, 5.5vw, 70px);
margin-top: -1px;
overflow: hidden;
line-height: 0;
pointer-events: none;
background: #faf6fe;
}
.cf-home-wave svg {
display: block;
width: 100%;
height: 100%;
}
.cf-home-wave__color {
fill: url(#cf-home-wave-gradient);
}
.cf-home-wave__fade {
fill: url(#cf-home-wave-fade);
}
.cf-home-wave__shine {
fill: none;
stroke: rgba(255, 255, 255, 0.74);
stroke-width: 2;
}
@media (max-width: 767px) {
.cf-home-wave {
height: 42px;
}
}
/* Premium Curvafit transition below the product shelf */
.cf-products-wave {
position: relative;
z-index: 1;
height: clamp(34px, 4vw, 52px);
margin-top: -1px;
overflow: hidden;
line-height: 0;
pointer-events: none;
background: #fff;
}
.cf-products-wave svg {
display: block;
width: 100%;
height: 100%;
}
.cf-products-wave__color {
fill: url(#cf-products-wave-gradient);
}
.cf-products-wave__fade {
fill: url(#cf-products-wave-fade);
}
.cf-products-wave__shine {
fill: none;
stroke: rgba(255, 255, 255, 0.78);
stroke-width: 1.6;
}
@media (max-width: 767px) {
.cf-products-wave {
height: 30px;
}
}
.has-scroll-reveal [data-scroll-reveal]:not(.scroll-revealed) {
opacity: 0;
translate: 0 16px;
transition:
opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
translate 620ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--scroll-reveal-delay, 0ms);
will-change: opacity, translate;
}
.has-scroll-reveal [data-scroll-reveal="fade"]:not(.scroll-revealed) {
translate: none;
}
.has-scroll-reveal [data-scroll-reveal="left"]:not(.scroll-revealed) {
translate: -22px 8px;
}
.has-scroll-reveal [data-scroll-reveal="right"]:not(.scroll-revealed) {
translate: 22px 8px;
}
.has-scroll-reveal [data-scroll-reveal].scroll-revealed {
opacity: 1;
translate: none;
will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
.has-scroll-reveal [data-scroll-reveal] {
opacity: 1 !important;
translate: none !important;
transition: none !important;
}
}
/* Keep affiliate areas hidden until the setting enables them, preventing a flash. */
html:not(.affiliate-program-enabled) .bbw-finale,
html:not(.affiliate-program-enabled) #affiliation-section {
display: none !important;
}
/* Curvafit newsletter palette and compact spacing — shared across pages. */
#newsletter-container .nl-section {
padding: 16px 0;
border-color: rgba(229, 66, 145, 0.42);
}
#newsletter-container .nl-bg-shimmer-top,
#newsletter-container .nl-bg-shimmer-bottom {
background: linear-gradient(90deg,
transparent 0%,
rgba(244, 91, 163, 0.72) 30%,
rgba(190, 123, 243, 0.92) 50%,
rgba(244, 91, 163, 0.72) 70%,
transparent 100%
);
}
#newsletter-container .nl-shimmer-line {
background: linear-gradient(90deg,
transparent 0%,
rgba(244, 91, 163, 0.36) 35%,
rgba(190, 123, 243, 0.56) 50%,
rgba(244, 91, 163, 0.36) 65%,
transparent 100%
);
}
#newsletter-container .nl-dot {
background-color: #f45ba3;
}
#newsletter-container .nl-pill i,
#newsletter-container .nl-stars {
color: #ff8fbe;
}
#newsletter-container .nl-title em {
color: #ff8fbe;
}
#newsletter-container .nl-pill {
border-color: rgba(224, 179, 255, 0.34);
color: rgba(255, 255, 255, 0.86);
}
#newsletter-container .nl-pill:hover {
border-color: #ff8fbe;
color: #fff;
}
#newsletter-container .nl-divider {
background: linear-gradient(to bottom, transparent, rgba(244, 91, 163, 0.48), transparent);
}
#newsletter-container .nl-input-wrap {
border-color: rgba(255, 143, 190, 0.55);
background: rgba(20, 12, 15, 0.42);
}
#newsletter-container .nl-input-wrap:focus-within {
border-color: #ff8fbe;
box-shadow: 0 0 0 3px rgba(244, 91, 163, 0.18);
}
#newsletter-container .nl-icon {
color: #ff8fbe;
}
#newsletter-container .nl-input::placeholder {
color: rgba(255, 255, 255, 0.68);
}
#newsletter-container .nl-btn {
background: linear-gradient(115deg, #f04b98, #c52f80);
color: #fff;
box-shadow: 0 3px 14px rgba(201, 47, 128, 0.35);
letter-spacing: 0.06em;
}
#newsletter-container .nl-btn:hover {
background: linear-gradient(115deg, #ff69ad, #d83f91);
}
#newsletter-container .nl-privacy,
#newsletter-container .nl-perk,
.newsletter-success-popup h3 {
color: #f1e7ff;
}
.newsletter-success-popup button {
color: #fff;
background: linear-gradient(115deg, #f04b98, #7041b5);
}
@media (max-width: 820px) {
#newsletter-container .nl-section { padding: 22px 0; }
}
/* Curvafit luxury bundle deal — home page */
body.home-page #bundle-deal.bundle-deal-section {
padding: clamp(58px, 7vw, 92px) 22px !important;
padding-bottom: 0 !important;
background:
radial-gradient(ellipse at 8% 12%, rgba(214, 69, 143, 0.09), transparent 34%),
radial-gradient(ellipse at 94% 85%, rgba(123, 79, 184, 0.10), transparent 36%),
linear-gradient(145deg, #fff 0%, #faf6fe 52%, #f3ecfb 100%) !important;
border-top: 1px solid rgba(93, 60, 144, 0.09);
}
body.home-page #bundle-deal .container {
width: min(1160px, 100%) !important;
margin: 0 auto !important;
padding: 0 !important;
}
body.home-page #bundle-deal .bd-header {
max-width: 720px !important;
margin: 0 auto 30px !important;
}
body.home-page #bundle-deal .bd-tag {
padding: 8px 16px !important;
color: #9c367b !important;
background: rgba(255, 255, 255, 0.76) !important;
border: 1px solid rgba(214, 69, 143, 0.22) !important;
border-radius: 999px !important;
box-shadow: 0 5px 18px rgba(46, 15, 107, 0.06) !important;
}
body.home-page #bundle-deal .bd-header h2 {
color: var(--purple-900, #2e0f6b) !important;
font-family: var(--font-heading, Poppins, sans-serif) !important;
font-style: normal !important;
letter-spacing: -0.045em !important;
font-size: clamp(2rem, 4vw, 3.2rem) !important;
}
body.home-page #bundle-deal .bd-header p {
color: var(--text-muted, #6b5c88) !important;
font-size: 0.96rem !important;
}
body.home-page #bundle-deal .bd-inner {
max-width: 1100px !important;
grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr) !important;
gap: clamp(22px, 4vw, 48px) !important;
align-items: stretch !important;
}
body.home-page #bundle-deal .bd-products {
gap: 11px !important;
}
body.home-page #bundle-deal .bd-product-item {
gap: 17px !important;
padding: 15px 18px !important;
border: 1px solid rgba(93, 60, 144, 0.13) !important;
border-radius: 15px !important;
background: rgba(255, 255, 255, 0.86) !important;
box-shadow: 0 8px 26px rgba(46, 15, 107, 0.055) !important;
transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important;
}
body.home-page #bundle-deal .bd-product-item:hover {
transform: translateY(-2px);
border-color: rgba(214, 69, 143, 0.3) !important;
box-shadow: 0 14px 32px rgba(46, 15, 107, 0.09) !important;
}
body.home-page #bundle-deal .bd-product-item img {
width: 78px !important;
height: 78px !important;
border: 1px solid rgba(123, 79, 184, 0.16) !important;
border-radius: 11px !important;
background: #faf6fe;
}
body.home-page #bundle-deal .bd-product-info strong {
color: var(--purple-900, #2e0f6b) !important;
font-family: var(--font-heading, Poppins, sans-serif) !important;
font-size: 0.98rem !important;
}
body.home-page #bundle-deal .bd-product-info span {
color: var(--text-muted, #6b5c88) !important;
line-height: 1.55 !important;
}
body.home-page #bundle-deal .bd-product-price {
color: var(--pink-600, #d6458f) !important;
font-size: 1rem !important;
}
body.home-page #bundle-deal .bd-plus {
display: grid !important;
place-items: center !important;
width: 28px !important;
height: 28px !important;
margin: -3px auto !important;
padding: 0 !important;
border: 1px solid rgba(214, 69, 143, 0.20) !important;
border-radius: 50% !important;
color: #b23f88 !important;
background: #fff !important;
font-size: 0.9rem !important;
box-shadow: 0 3px 12px rgba(46, 15, 107, 0.06) !important;
z-index: 1;
}
body.home-page #bundle-deal .bd-summary {
min-width: 0 !important;
justify-content: center !important;
gap: 20px !important;
padding: clamp(24px, 3vw, 34px) !important;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 20px !important;
background:
radial-gradient(ellipse at 100% 0%, rgba(232, 67, 135, 0.26), transparent 42%),
linear-gradient(145deg, #2e0f6b 0%, #3b1b7d 58%, #503078 100%) !important;
box-shadow: 0 20px 48px rgba(46, 15, 107, 0.18) !important;
}
body.home-page #bundle-deal .bd-summary::before {
height: 2px !important;
background: linear-gradient(90deg, #f8c8e2, #d6458f, #b79ae0) !important;
}
body.home-page #bundle-deal .bd-price-box {
gap: 9px !important;
padding-top: 16px !important;
border-color: rgba(255, 255, 255, 0.18) !important;
}
body.home-page #bundle-deal .bd-original,
body.home-page #bundle-deal .bd-total {
color: rgba(255, 255, 255, 0.72) !important;
}
body.home-page #bundle-deal .bd-original s {
color: rgba(255, 255, 255, 0.48) !important;
}
body.home-page #bundle-deal .bd-save {
color: #ffb8d7 !important;
}
body.home-page #bundle-deal .bd-total-price {
color: #fff !important;
font-size: clamp(2.35rem, 4vw, 3rem) !important;
letter-spacing: -0.045em !important;
}
body.home-page #bundle-deal .bd-benefits {
gap: 11px !important;
padding: 15px 16px !important;
border: 1px solid rgba(255, 255, 255, 0.13) !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.07) !important;
}
body.home-page #bundle-deal .bd-benefit {
color: rgba(255, 255, 255, 0.88) !important;
font-size: 0.78rem !important;
}
body.home-page #bundle-deal .bd-benefit::before {
width: 6px !important;
height: 6px !important;
background: #f06fa6 !important;
box-shadow: 0 0 10px rgba(240, 111, 166, 0.45);
}
body.home-page #bundle-deal .bd-cta {
padding: 16px 18px !important;
color: #fff !important;
background: linear-gradient(110deg, #d6458f, #a63d91 58%, #7b4fb8) !important;
border: 1px solid rgba(255, 255, 255, 0.24) !important;
border-radius: 11px !important;
box-shadow: 0 8px 22px rgba(12, 5, 31, 0.22) !important;
font-size: 0.78rem !important;
letter-spacing: 0.075em !important;
}
body.home-page #bundle-deal .bd-cta:hover {
color: #fff !important;
background: linear-gradient(110deg, #e84387, #b64a9e 58%, #8b61c4) !important;
transform: translateY(-1px);
}
@media (max-width: 900px) {
body.home-page #bundle-deal .bd-inner {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
body.home-page #bundle-deal .bd-summary { width: 100% !important; }
}
@media (max-width: 560px) {
body.home-page #bundle-deal.bundle-deal-section { padding: 48px 16px 0 !important; }
body.home-page #bundle-deal .bd-header { margin-bottom: 22px !important; }
body.home-page #bundle-deal .bd-product-item { gap: 12px !important; padding: 12px !important; }
body.home-page #bundle-deal .bd-product-item img { width: 64px !important; height: 64px !important; }
body.home-page #bundle-deal .bd-product-info strong { font-size: 0.86rem !important; }
body.home-page #bundle-deal .bd-product-info span { font-size: 0.7rem !important; }
body.home-page #bundle-deal .bd-product-price { font-size: 0.88rem !important; }
}
/* Curvafit palette for the cart drawer and wishlist modal. */
.cart-drawer {
background: var(--cf-canvas-soft);
box-shadow: -1px 0 0 var(--cf-line), -10px 0 55px rgba(46, 15, 107, 0.2), -36px 0 100px rgba(46, 15, 107, 0.12);
}
.cart-drawer::before { background: linear-gradient(90deg, transparent, var(--purple-500), var(--pink-400), var(--purple-500), transparent); }
.cart-drawer::after { background: linear-gradient(180deg, transparent, rgba(123, 79, 184, 0.34), rgba(232, 67, 135, 0.4), transparent); }
.cart-drawer .drawer-header {
background: linear-gradient(120deg, var(--purple-900), var(--purple-700) 62%, #79418d) !important;
}
.cart-drawer .drawer-header::before { background: radial-gradient(ellipse at 15% 0%, rgba(248, 200, 226, 0.18), transparent 58%); }
.cart-drawer .drawer-header::after { background: linear-gradient(90deg, transparent, rgba(183, 154, 224, 0.56), var(--pink-400), rgba(183, 154, 224, 0.56), transparent); }
.cart-drawer .drawer-header h3 { color: #fff !important; }
.cart-drawer .drawer-header h3::after { background: linear-gradient(90deg, var(--pink-400), transparent); }
.cart-drawer .drawer-header .bbw-globe-badge__text { fill: var(--pink-200); }
.cart-drawer__share-btn,
.close-drawer { border-color: rgba(248, 200, 226, 0.38); background: rgba(255, 255, 255, 0.08); color: var(--pink-200); }
.cart-drawer__share-btn:hover,
.close-drawer:hover { border-color: var(--pink-400); background: rgba(232, 67, 135, 0.2); box-shadow: 0 0 16px rgba(232, 67, 135, 0.22); }
.close-drawer::before { background: radial-gradient(circle at center, rgba(232, 67, 135, 0.24), transparent 70%); }
.cart-drawer__body { background: linear-gradient(180deg, #fff 0%, var(--lavender-50) 100%); scrollbar-color: rgba(123, 79, 184, 0.38) transparent; }
.cart-drawer__body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--purple-300), var(--pink-400)); }
.cart-drawer__footer { background: linear-gradient(180deg, #fff, #fff8fc); border-top-color: var(--cf-line); box-shadow: 0 -4px 24px rgba(93, 60, 144, 0.08); }
.cart-drawer__footer::before { background: linear-gradient(90deg, transparent, rgba(183, 154, 224, 0.3), var(--pink-400), rgba(183, 154, 224, 0.3), transparent); }
.subtotal { color: var(--cf-ink-muted); }
.subtotal strong,
.subtotal .subtotal-amount { color: var(--cf-ink); }
.cart-checkout-note { background: var(--lavender-100); border-color: var(--cf-line); color: var(--purple-800); }
.cart-checkout-note i { color: var(--pink-600); }
.checkout {
background: var(--gradient-brand);
color: #fff;
border-color: rgba(93, 60, 144, 0.24);
box-shadow: 0 7px 22px rgba(93, 60, 144, 0.2);
}
.checkout:hover { background: linear-gradient(135deg, var(--purple-800), var(--pink-600)); border-color: var(--pink-400); color: #fff; box-shadow: 0 10px 26px rgba(214, 69, 143, 0.24); }
.cart-drawer__countdown { background: linear-gradient(100deg, #fff, var(--lavender-50) 58%, #fff7fb); border-bottom-color: var(--cf-line); }
.cart-drawer__countdown::before { background: linear-gradient(90deg, transparent, rgba(183, 154, 224, 0.45), var(--pink-400), rgba(183, 154, 224, 0.45), transparent); }
.cart-drawer__countdown-text { color: var(--purple-600); }
.cart-drawer__countdown-time { color: var(--cf-ink); background: #fff; border-color: rgba(123, 79, 184, 0.22); box-shadow: 0 2px 10px rgba(93, 60, 144, 0.1), inset 0 1px 0 #fff; }
.cart-drawer__progress-container { background: linear-gradient(180deg, #fff, var(--lavender-50)); border-bottom-color: var(--cf-line); }
.cart-drawer__progress-message { color: var(--cf-ink-muted); }
.cart-drawer__progress-message strong { color: var(--purple-800); }
.cart-drawer__progress-bar { background: rgba(123, 79, 184, 0.12); }
.cart-drawer__progress-fill { background: var(--gradient-brand); box-shadow: 0 0 12px rgba(123, 79, 184, 0.24); }
.cart-drawer__progress-fill::after { background: radial-gradient(circle, var(--pink-400), var(--purple-600)); box-shadow: 0 0 0 3px rgba(214, 69, 143, 0.16), 0 0 8px rgba(214, 69, 143, 0.24); }
.cart-drawer__progress-truck { background: linear-gradient(135deg, var(--purple-700), var(--pink-600)); border-color: rgba(214, 69, 143, 0.42); box-shadow: 0 2px 12px rgba(93, 60, 144, 0.22); }
.cart-drawer__progress-truck svg { color: #fff; }
.cart-drawer .bbw-order-timeline { background: #fff; border-top-color: rgba(93, 60, 144, 0.12); border-bottom-color: rgba(93, 60, 144, 0.14); }
.cart-drawer .bbw-ot-line { background: rgba(123, 79, 184, 0.28); }
.cart-drawer .bbw-ot-icon { background: linear-gradient(145deg, var(--purple-800), var(--purple-600)); border-color: rgba(214, 69, 143, 0.42); box-shadow: 0 3px 14px rgba(93, 60, 144, 0.2); }
.cart-drawer .bbw-ot-icon svg { fill: #fff; }
.cart-drawer .bbw-ot-label { color: var(--purple-700); }
.cart-promo-message { background: linear-gradient(135deg, rgba(243, 236, 251, 0.92), rgba(255, 247, 251, 0.95)); border-bottom-color: var(--cf-line); }
.cart-promo-message::before { background: linear-gradient(180deg, var(--purple-500), var(--pink-400)); box-shadow: 1px 0 10px rgba(123, 79, 184, 0.2); }
.cart-items { background: var(--lavender-50); }
.cart-item { border-bottom-color: rgba(93, 60, 144, 0.12); }
.cart-item:hover { background: rgba(243, 236, 251, 0.72); box-shadow: 0 4px 20px rgba(93, 60, 144, 0.08); }
.cart-item img { border-color: rgba(93, 60, 144, 0.18); box-shadow: 0 4px 14px rgba(46, 15, 107, 0.08), 0 0 0 3px rgba(123, 79, 184, 0.05); }
.cart-item img:hover { border-color: rgba(214, 69, 143, 0.48); box-shadow: 0 6px 22px rgba(46, 15, 107, 0.12), 0 0 0 4px rgba(214, 69, 143, 0.1); }
.cart-item h4 { color: var(--cf-ink); }
.cart-item h4:hover { color: var(--pink-600); }
.cart-item p { color: var(--cf-ink); }
.item-variant { color: var(--cf-ink-muted); }
.quantity { background: #fff; border-color: rgba(123, 79, 184, 0.22); }
.quantity button { color: var(--purple-700); }
.quantity button:hover { background: var(--purple-700); color: #fff; box-shadow: 0 2px 10px rgba(46, 15, 107, 0.16); }
.quantity span { color: var(--cf-ink); }
.remove-item { color: rgba(214, 69, 143, 0.55); }
.remove-item:hover { color: var(--pink-600); background: rgba(214, 69, 143, 0.08); }
.wishlist-modal-backdrop { background: rgba(46, 15, 107, 0.64); }
.wishlist-modal .modal-content {
background: linear-gradient(160deg, #fff 0%, var(--lavender-50) 72%, #fff7fb 100%);
border-color: rgba(123, 79, 184, 0.2);
box-shadow: 0 40px 100px rgba(46, 15, 107, 0.26), 0 0 0 1px rgba(123, 79, 184, 0.08), inset 0 1px 0 #fff;
}
.wishlist-modal-shimmer { background: linear-gradient(90deg, transparent, var(--purple-300) 30%, var(--pink-400) 50%, var(--purple-300) 70%, transparent); }
.wishlist-modal .modal-content::before { background: radial-gradient(ellipse, rgba(232, 67, 135, 0.12), transparent 70%); }
.wishlist-modal .drawer-header { background: linear-gradient(120deg, #fff, var(--lavender-50) 65%, #fff4f9); border-bottom-color: rgba(93, 60, 144, 0.14); }
.wishlist-modal .wishlist-icon-wrap { background: linear-gradient(135deg, rgba(123, 79, 184, 0.14), rgba(232, 67, 135, 0.14)); border-color: rgba(123, 79, 184, 0.22); box-shadow: 0 4px 16px rgba(93, 60, 144, 0.12), inset 0 1px 0 #fff; }
.wishlist-modal .wishlist-icon-wrap svg { color: var(--pink-600); fill: currentColor; }
.wishlist-modal .drawer-header h3 { color: var(--cf-ink); }
.wishlist-modal .wishlist-subtitle { color: var(--pink-600); }
.wishlist-modal .close-modal { background: rgba(123, 79, 184, 0.08); border-color: rgba(123, 79, 184, 0.2); color: var(--purple-700); }
.wishlist-modal .close-modal:hover { background: var(--pink-500); border-color: var(--pink-500); color: #fff; box-shadow: 0 4px 16px rgba(214, 69, 143, 0.24); }
.wishlist-modal .wishlist-bar { background: rgba(123, 79, 184, 0.12); }
.wishlist-modal .wishlist-bar-fill { background: var(--gradient-brand); }
.wishlist-modal .wishlist-items { background: transparent; }
.wishlist-modal .wishlist-items .wishlist-item { background: rgba(255, 255, 255, 0.92); border-color: rgba(93, 60, 144, 0.14); box-shadow: 0 2px 10px rgba(46, 15, 107, 0.05); }
.wishlist-modal .wishlist-item::before { background: linear-gradient(to bottom, var(--purple-500), var(--pink-500)); }
.wishlist-modal .wishlist-item::after { background: linear-gradient(90deg, transparent, rgba(123, 79, 184, 0.07), transparent); }
.wishlist-modal .wishlist-item:hover { border-color: rgba(214, 69, 143, 0.3); box-shadow: 0 6px 20px rgba(46, 15, 107, 0.1), 0 0 0 1px rgba(214, 69, 143, 0.08); background: #fff; }
.wishlist-modal .wishlist-item img { border-color: rgba(93, 60, 144, 0.16); box-shadow: 0 4px 12px rgba(46, 15, 107, 0.08); }
.wishlist-modal .wishlist-item:hover img { border-color: rgba(214, 69, 143, 0.34); }
.wishlist-modal .wishlist-item h4 { color: var(--cf-ink); }
.wishlist-modal .wishlist-item .current-price { color: var(--pink-600) !important; -webkit-text-fill-color: var(--pink-600) !important; }
.wishlist-modal .wishlist-item .compare-price { color: var(--cf-ink-muted) !important; }
.wishlist-modal .remove-wishlist { background: rgba(123, 79, 184, 0.07); border-color: rgba(123, 79, 184, 0.17); color: var(--purple-600); }
.wishlist-modal .remove-wishlist:hover { background: var(--pink-500); border-color: var(--pink-500); color: #fff; box-shadow: 0 4px 12px rgba(214, 69, 143, 0.22); }
.wishlist-modal .wishlist-footer,
.wishlist-modal .wishlist-share-footer { background: linear-gradient(180deg, rgba(243, 236, 251, 0.3), rgba(255, 247, 251, 0.92)); border-top-color: rgba(93, 60, 144, 0.13); }
.wishlist-modal .add-all-to-cart { background: var(--gradient-brand); color: #fff; border-color: rgba(93, 60, 144, 0.2) !important; box-shadow: 0 6px 22px rgba(93, 60, 144, 0.18); }
.wishlist-modal .add-all-to-cart svg,
.wishlist-modal .add-all-to-cart span { color: #fff !important; }
.wishlist-modal .add-all-to-cart:hover { background: linear-gradient(135deg, var(--purple-800), var(--pink-600)); border-color: var(--pink-400) !important; box-shadow: 0 10px 28px rgba(214, 69, 143, 0.22); }
.wishlist-modal .add-all-to-cart:hover svg,
.wishlist-modal .add-all-to-cart:hover span { color: #fff !important; }
.wishlist-modal .wishlist-share-label { color: var(--cf-ink-muted); }
.wishlist-modal .wishlist-share-footer { border-top-color: rgba(93, 60, 144, 0.13); }
.wishlist-modal .wishlist-share-btn--copy { color: var(--pink-600); }
.wishlist-modal .wishlist-share-btn--copy::before { background: linear-gradient(135deg, var(--purple-600), var(--pink-600)); }
/* Remove the remaining black and gold styling from the cart drawer. */
.cart-drawer .bbw-globe-badge__core circle:first-child {
fill: var(--purple-900) !important;
}
.cart-drawer .bbw-globe-badge__core circle:nth-child(2) {
stroke: rgba(248, 200, 226, 0.72) !important;
}
.cart-drawer .bbw-globe-badge__core path {
stroke: rgba(183, 154, 224, 0.82) !important;
}
.cart-drawer .drawer-header .bbw-globe-badge__text { fill: var(--pink-200) !important; }
.cart-drawer__promo-slider {
background: linear-gradient(135deg, var(--purple-900), var(--purple-800) 58%, #643b87) !important;
border-color: rgba(183, 154, 224, 0.42) !important;
box-shadow: 0 8px 24px rgba(46, 15, 107, 0.18), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
.cart-drawer__promo-slider::before {
background: linear-gradient(90deg, transparent, var(--purple-300), var(--pink-400), var(--purple-300), transparent) !important;
}
.cart-drawer__promo-title { color: var(--pink-200) !important; text-shadow: 0 0 14px rgba(232, 67, 135, 0.26) !important; }
.cart-drawer__promo-text { color: rgba(255,255,255,0.72) !important; }
.cart-drawer__promo-text strong { color: #fff !important; }
.cart-drawer__promo-code {
color: #fff !important;
background: rgba(255,255,255,0.09) !important;
border-color: rgba(248,200,226,0.42) !important;
text-shadow: 0 0 14px rgba(232,67,135,0.25) !important;
}
.cart-drawer__promo-code:hover { background: rgba(255,255,255,0.15) !important; box-shadow: 0 0 20px rgba(214,69,143,0.2) !important; }
.cart-drawer__promo-copy-btn { border-color: rgba(248,200,226,0.32) !important; color: var(--pink-200) !important; }
.cart-drawer__promo-copy-btn:hover { background: rgba(214,69,143,0.24) !important; border-color: var(--pink-400) !important; box-shadow: 0 0 16px rgba(214,69,143,0.22) !important; }
.cart-drawer__promo-copy-btn svg { stroke: rgba(255,255,255,0.82) !important; }
.cart-drawer__promo-copy-btn:hover svg { stroke: #fff !important; }
.cart-drawer__promo-dot.active { background: var(--pink-500) !important; box-shadow: 0 0 10px rgba(232,67,135,0.45) !important; }
.cart-drawer .marquee-container { background: linear-gradient(90deg, var(--purple-900), var(--purple-700), var(--purple-900)) !important; border-color: rgba(183,154,224,0.38) !important; }
.cart-drawer .marquee-content,
.cart-drawer .marquee-content span { color: #fff !important; }
.cart-drawer .payment-icons { background: #fff !important; border-color: var(--cf-line) !important; }
.cart-drawer .payment-icons i { color: var(--purple-700) !important; }
.cart-drawer .payment-icons i:hover { color: var(--pink-600) !important; }
/* Curvafit accents for cart review cards and wishlist controls. */
.cart-drawer .bbw-mini-wish,
.cart-drawer .drawer-extra-card__img-wrap .bbw-mini-wish {
color: var(--pink-600) !important;
border-color: rgba(123,79,184,0.38) !important;
background: #fff !important;
}
.cart-drawer .bbw-mini-wish svg { color: var(--pink-600) !important; }
.cart-drawer .bbw-mini-wish.bbw-mw-active { background: var(--lavender-100) !important; border-color: var(--pink-500) !important; }
.cart-drawer .review-item-inner { border-color: rgba(123,79,184,0.22) !important; box-shadow: 0 4px 20px rgba(46,15,107,0.06), 0 1px 0 #fff inset !important; }
.cart-drawer .review-item-inner::before { background: linear-gradient(180deg, var(--purple-500), var(--pink-400), transparent) !important; }
.cart-drawer .review-avatar { border-color: rgba(123,79,184,0.32) !important; }
.cart-drawer .review-stars { color: var(--pink-500) !important; }
.cart-drawer .drawer-extra-header span { color: var(--purple-600) !important; }
.cart-drawer .drawer-extra-header span::before { color: var(--pink-500) !important; }
.cart-drawer .drawer-extra-arrow { color: var(--purple-700) !important; background: var(--lavender-50) !important; border-color: rgba(123,79,184,0.28) !important; }
.cart-drawer .drawer-extra-arrow:hover { color: #fff !important; background: var(--purple-700) !important; border-color: var(--pink-400) !important; }
.cart-drawer .drawer-extra-section { border-color: rgba(123,79,184,0.18) !important; }
/* Warmer pink/lilac balance for the cart drawer, matching the hero colors. */
.cart-drawer {
background: #fff8fc !important;
box-shadow: -1px 0 0 rgba(189,117,176,0.2), -12px 0 55px rgba(111,45,104,0.16), -36px 0 100px rgba(111,45,104,0.1) !important;
}
.cart-drawer::before { background: linear-gradient(90deg, transparent, #c779b9, #ed9acb, #c779b9, transparent) !important; }
.cart-drawer::after { background: linear-gradient(180deg, transparent, rgba(199,121,185,0.3), rgba(237,154,203,0.34), transparent) !important; }
.cart-drawer .drawer-header {
background: linear-gradient(118deg, #713477 0%, #91427f 56%, #b45191 100%) !important;
}
.cart-drawer .drawer-header::before { background: radial-gradient(ellipse at 18% 0%, rgba(255,224,242,0.24), transparent 62%) !important; }
.cart-drawer .drawer-header::after { background: linear-gradient(90deg, transparent, rgba(255,220,241,0.62), #f2a4d0, rgba(255,220,241,0.62), transparent) !important; }
.cart-drawer .drawer-header .bbw-globe-badge__text { fill: #ffe0f1 !important; }
.cart-drawer .bbw-globe-badge__core circle:first-child { fill: #713477 !important; }
.cart-drawer .bbw-globe-badge__core circle:nth-child(2) { stroke: rgba(255,220,241,0.72) !important; }
.cart-drawer .bbw-globe-badge__core path { stroke: rgba(242,164,208,0.8) !important; }
.cart-drawer__share-btn,
.cart-drawer .close-drawer { color: #ffe3f2 !important; border-color: rgba(255,224,242,0.46) !important; }
.cart-drawer__share-btn:hover,
.cart-drawer .close-drawer:hover { background: rgba(237,154,203,0.22) !important; border-color: #f2a4d0 !important; }
.cart-drawer__body { background: linear-gradient(180deg, #fff 0%, #fff8fc 100%) !important; }
.cart-drawer__footer { background: linear-gradient(180deg, #fff, #fff6fb) !important; }
.cart-drawer__countdown,
.cart-drawer__progress-container { background: linear-gradient(105deg, #fff, #fff4fa 58%, #fffafd) !important; }
.cart-drawer__countdown-text { color: #9b4e8c !important; }
.cart-drawer__countdown-time { border-color: rgba(193,107,174,0.28) !important; box-shadow: 0 2px 10px rgba(153,69,137,0.1), inset 0 1px 0 #fff !important; }
.cart-drawer__progress-bar { background: rgba(199,121,185,0.16) !important; }
.cart-drawer__progress-fill { background: linear-gradient(90deg, #a24c91, #df78b3, #f0a0cd) !important; }
.cart-drawer__progress-truck { background: linear-gradient(135deg, #93417f, #cf65a5) !important; border-color: rgba(242,164,208,0.62) !important; }
.cart-drawer .bbw-order-timeline { background: #fff !important; border-color: rgba(193,107,174,0.16) !important; }
.cart-drawer .bbw-ot-line { background: rgba(193,107,174,0.34) !important; }
.cart-drawer .bbw-ot-icon { background: linear-gradient(145deg, #91427f, #c35c9c) !important; border-color: rgba(242,164,208,0.62) !important; }
.cart-drawer .bbw-ot-label { color: #91427f !important; }
.cart-drawer__promo-slider {
background: linear-gradient(135deg, #fff 0%, #fff3fa 56%, #f8eafa 100%) !important;
border-color: rgba(193,107,174,0.28) !important;
box-shadow: 0 7px 22px rgba(111,45,104,0.1), inset 0 1px 0 #fff !important;
}
.cart-drawer__promo-slider::before { background: linear-gradient(90deg, transparent, #c779b9, #ed9acb, #c779b9, transparent) !important; }
.cart-drawer__promo-title { color: #91427f !important; text-shadow: none !important; }
.cart-drawer__promo-text,
.cart-drawer__promo-text strong { color: #74516d !important; }
.cart-drawer__promo-code { color: #853b79 !important; background: rgba(193,107,174,0.09) !important; border-color: rgba(163,78,145,0.3) !important; text-shadow: none !important; }
.cart-drawer__promo-code:hover { background: rgba(223,120,179,0.15) !important; }
.cart-drawer__promo-copy-btn { color: #91427f !important; background: rgba(255,255,255,0.78) !important; border-color: rgba(193,107,174,0.25) !important; }
.cart-drawer__promo-copy-btn svg { stroke: #91427f !important; }
.cart-drawer__promo-dot.active { background: #d86eaa !important; box-shadow: 0 0 10px rgba(216,110,170,0.42) !important; }
.cart-drawer .marquee-container { background: linear-gradient(90deg, #7d3977, #a34b88, #7d3977) !important; border-color: rgba(237,154,203,0.34) !important; }
.cart-drawer .cart-items { background: #fff8fc !important; }
.cart-drawer .cart-item { border-bottom-color: rgba(193,107,174,0.16) !important; }
.cart-drawer .cart-item:hover { background: rgba(255,241,249,0.8) !important; }
.cart-drawer .quantity { border-color: rgba(193,107,174,0.26) !important; }
.cart-drawer .quantity button { color: #91427f !important; }
.cart-drawer .quantity button:hover { background: #91427f !important; }
.cart-drawer .bbw-mini-wish { color: #d6458f !important; border-color: rgba(193,107,174,0.38) !important; }
.cart-drawer .bbw-mini-wish.bbw-mw-active { background: #fff0f7 !important; border-color: #d86eaa !important; }
.cart-drawer .review-item-inner { border-color: rgba(193,107,174,0.26) !important; }
.cart-drawer .review-item-inner::before { background: linear-gradient(180deg, #b55a9d, #ed9acb, transparent) !important; }
.cart-drawer .review-avatar { border-color: rgba(193,107,174,0.36) !important; }
.cart-drawer .review-stars { color: #c45c99 !important; }
.cart-drawer .drawer-extra-header span { color: #91427f !important; }
.cart-drawer .drawer-extra-header span::before { color: #d86eaa !important; }
.cart-drawer .drawer-extra-arrow { color: #91427f !important; border-color: rgba(193,107,174,0.3) !important; background: #fff7fc !important; }
.cart-drawer .drawer-extra-arrow:hover { color: #fff !important; background: #a34b88 !important; border-color: #ed9acb !important; }
.cart-drawer .drawer-extra-section { border-color: rgba(193,107,174,0.2) !important; }
/* Final pink accents for drawer icons, banner indicators and checkout action. */
.cart-drawer .cart-drawer__paul-banner .paul-banner-indicator.active,
.cart-drawer .paul-banner-video-overlay .paul-banner-indicator.active {
background: #df78b3 !important;
box-shadow: 0 0 10px rgba(223,120,179,0.55) !important;
}
.cart-drawer .cart-drawer__paul-banner .paul-banner-indicator,
.cart-drawer .paul-banner-video-overlay .paul-banner-indicator {
border-color: rgba(255,232,245,0.82) !important;
}
.cart-drawer .bbw-mini-wish .bbw-mw-filled {
fill: #d6458f !important;
stroke: #d6458f !important;
}
.cart-drawer .bbw-mini-wish.bbw-mw-active {
color: #d6458f !important;
background: #fff0f7 !important;
border-color: #d86eaa !important;
}
.cart-drawer .cart-drawer__footer .checkout {
color: #fff !important;
background: linear-gradient(105deg, #9b4386 0%, #c64f96 55%, #df68a8 100%) !important;
border-color: rgba(157,66,132,0.5) !important;
box-shadow: 0 7px 20px rgba(157,66,132,0.2) !important;
}
.cart-drawer .cart-drawer__footer .checkout:hover {
background: linear-gradient(105deg, #863974 0%, #b5448a 55%, #d7559c 100%) !important;
border-color: #d77caf !important;
box-shadow: 0 9px 24px rgba(157,66,132,0.28) !important;
}
.cart-drawer .cart-drawer__footer .checkout i,
.cart-drawer .cart-drawer__footer .checkout svg { color: #fff !important; fill: currentColor; }
/* Refine contrast: reduce repeated mauve and give the banner and CTA more character. */
.cart-drawer .cart-drawer__paul-banner .paul-banner-title,
.cart-drawer .paul-banner-video-text.active {
background: linear-gradient(105deg, rgba(71,36,59,0.84), rgba(112,49,83,0.78), rgba(76,42,75,0.82)) !important;
border: 1px solid rgba(247,178,212,0.72) !important;
box-shadow: 0 4px 20px rgba(60,24,49,0.28), 0 0 0 1px rgba(255,230,242,0.14) !important;
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
}
.cart-drawer .cart-drawer__paul-banner .paul-banner-indicator.active,
.cart-drawer .paul-banner-video-overlay .paul-banner-indicator.active {
background: #f08ab6 !important;
box-shadow: 0 0 9px rgba(240,138,182,0.58) !important;
}
.cart-drawer .bbw-order-timeline .bbw-ot-icon {
background: linear-gradient(145deg, #a74d87, #e17cae) !important;
border-color: rgba(246,183,212,0.7) !important;
}
.cart-drawer .payment-icons i { color: #704b70 !important; }
.cart-drawer .cart-drawer__footer .checkout {
background: linear-gradient(108deg, #c83f83 0%, #e35c98 52%, #f08aab 100%) !important;
border: 1px solid rgba(190,54,119,0.52) !important;
box-shadow: 0 8px 22px rgba(194,58,122,0.24), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.cart-drawer .cart-drawer__footer .checkout:hover {
background: linear-gradient(108deg, #b63375 0%, #d64c8d 52%, #e879a0 100%) !important;
box-shadow: 0 10px 26px rgba(194,58,122,0.3) !important;
}
/* Raspberry header instead of mauve. */
.cart-drawer .drawer-header {
background: linear-gradient(112deg, #84264f 0%, #ad2f68 54%, #cc477d 100%) !important;
}
.cart-drawer .drawer-header::before {
background: radial-gradient(ellipse at 18% 0%, rgba(255,224,236,0.22), transparent 62%) !important;
}
.cart-drawer .drawer-header::after {
background: linear-gradient(90deg, transparent, rgba(255,222,237,0.58), #f3a0bf, rgba(255,222,237,0.58), transparent) !important;
}
.cart-drawer .drawer-header .bbw-globe-badge__core circle:first-child { fill: #84264f !important; }
/* Compact the cart drawer header vertically. */
.cart-drawer .drawer-header {
min-height: 66px !important;
padding: 8px 18px !important;
box-sizing: border-box !important;
}
.cart-drawer .drawer-header .bbw-globe-badge {
width: 48px !important;
height: 48px !important;
}
.cart-drawer .drawer-header h3 { line-height: 1 !important; }
.cart-drawer .drawer-header__actions { gap: 7px !important; }
.cart-drawer .drawer-header .cart-drawer__share-btn,
.cart-drawer .drawer-header .close-drawer {
width: 36px !important;
height: 36px !important;
}
@media (max-width: 480px) {
.cart-drawer .drawer-header { min-height: 60px !important; padding: 6px 14px !important; }
.cart-drawer .drawer-header .bbw-globe-badge { width: 42px !important; height: 42px !important; }
.cart-drawer .drawer-header .cart-drawer__share-btn,
.cart-drawer .drawer-header .close-drawer { width: 34px !important; height: 34px !important; }
}
/* Balanced rose, violet and blue-lavender header gradient. */
.cart-drawer .drawer-header {
background: linear-gradient(112deg, #c44783 0%, #914b9e 50%, #5d72b5 100%) !important;
}
.cart-drawer .drawer-header::before {
background: radial-gradient(ellipse at 22% 0%, rgba(255,230,244,0.24), transparent 62%) !important;
}
.cart-drawer .drawer-header::after {
background: linear-gradient(90deg, transparent, rgba(255,222,239,0.65), rgba(202,190,245,0.82), rgba(205,224,255,0.66), transparent) !important;
}
.cart-drawer .drawer-header .bbw-globe-badge__core circle:first-child { fill: #7c458f !important; }
/* Distinct Curvafit empty-cart icon and call to action. */
.cart-drawer .empty-cart__icon {
width: 76px;
height: 76px;
display: grid;
place-items: center;
margin: 0 auto 22px;
border: 1px solid rgba(123, 79, 184, 0.2);
border-radius: 23px;
background: linear-gradient(145deg, #f3ecfb 0%, #fff0f7 100%);
color: var(--purple-700);
font-size: 2rem;
filter: none;
box-shadow: 0 8px 22px rgba(93, 60, 144, 0.12), inset 0 1px 0 #fff;
animation: iconFloat 4s ease-in-out infinite;
}
.cart-drawer .empty-cart__icon i { color: inherit; }
.cart-drawer .empty-cart .cta,
.cart-drawer .empty-cart__cta {
background: linear-gradient(120deg, #3b1b7d 0%, #7445a8 52%, #e84387 100%) !important;
color: #fff !important;
border: 1px solid rgba(123, 79, 184, 0.24) !important;
border-radius: 12px !important;
box-shadow: 0 8px 22px rgba(93, 60, 144, 0.2) !important;
letter-spacing: 0.11em;
}
.cart-drawer .empty-cart .cta:hover,
.cart-drawer .empty-cart__cta:hover {
background: linear-gradient(120deg, #301462 0%, #63368f 52%, #d83278 100%) !important;
color: #fff !important;
border-color: #e84387 !important;
box-shadow: 0 11px 26px rgba(93, 60, 144, 0.26) !important;
}
/* Curvafit palette for the floating widget dock and its account/chat tips. */
#bbw-widgets-dock .bbw-dock-icon,
#bbw-widgets-dock-toggle,
.paul-indicator,
#cf-chat-toggle,
.bbw-bday-gift-btn {
background: linear-gradient(145deg, #8a3d68 0%, #6d2b55 62%, #53203f 100%) !important;
border-color: rgba(230, 173, 202, 0.68) !important;
color: #ffe3ef !important;
box-shadow: 0 5px 18px rgba(83, 32, 63, 0.28), 0 0 12px rgba(214, 69, 143, 0.16) !important;
}
#bbw-widgets-dock .bbw-dock-icon:hover,
#bbw-widgets-dock-toggle:hover,
.paul-indicator:hover,
#cf-chat-toggle:hover,
.bbw-bday-gift-btn:hover,
.bbw-bday-gift-btn:focus-visible {
background: linear-gradient(145deg, #a94f7e 0%, #843a66 62%, #64284c 100%) !important;
border-color: #f0a8cb !important;
color: #ffffff !important;
box-shadow: 0 7px 22px rgba(83, 32, 63, 0.32), 0 0 16px rgba(214, 69, 143, 0.20) !important;
}
.paul-tooltip,
#cf-chat-toggle .cf-toggle-label {
background: linear-gradient(135deg, #6d2b55 0%, #53203f 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(230, 173, 202, 0.72) !important;
box-shadow: 0 6px 20px rgba(83, 32, 63, 0.28) !important;
}
/* Match cart and wishlist count badges to the pink header badge. */
#bbw-widgets-dock .bbw-badge {
background: #d6458f !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.72) !important;
box-shadow: 0 2px 8px rgba(83, 32, 63, 0.24) !important;
}
/* Floating navigation: warm plum controls with rose accents. */
#floating-nav .fnav-toggle {
color: #ffffff !important;
background: linear-gradient(145deg, #8a3d68 0%, #6d2b55 58%, #53203f 100%) !important;
border-color: rgba(240, 168, 203, 0.76) !important;
box-shadow: 0 6px 20px rgba(83, 32, 63, 0.32), 0 0 14px rgba(214, 69, 143, 0.20) !important;
}
#floating-nav .fnav-toggle::before {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent) !important;
}
#floating-nav .fnav-btn:not(.fnav-refresh) {
color: #f8c8e2 !important;
background: linear-gradient(145deg, #6d2b55 0%, #53203f 62%, #421a33 100%) !important;
border-color: rgba(230, 173, 202, 0.42) !important;
box-shadow: 0 4px 14px rgba(83, 32, 63, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#floating-nav .fnav-refresh {
color: #ffffff !important;
background: linear-gradient(145deg, #d6458f 0%, #b93479 100%) !important;
border-color: rgba(255, 255, 255, 0.68) !important;
box-shadow: 0 4px 16px rgba(181, 47, 118, 0.34) !important;
}
#floating-nav .fnav-btn:hover,
#floating-nav .fnav-refresh:hover {
color: #ffffff !important;
background: linear-gradient(145deg, #a94f7e 0%, #843a66 62%, #64284c 100%) !important;
border-color: #f0a8cb !important;
box-shadow: 0 8px 22px rgba(83, 32, 63, 0.34), 0 0 14px rgba(214, 69, 143, 0.20) !important;
}
#floating-nav .fnav-btn::before {
background: radial-gradient(ellipse, rgba(240, 168, 203, 0.18) 0%, transparent 70%) !important;
}
#floating-nav .fnav-btn::after {
background: linear-gradient(135deg, #6d2b55, #53203f) !important;
color: #ffffff !important;
border-color: rgba(230, 173, 202, 0.62) !important;
}
/* Restore the login/signup popup to the Curvafit berry and rose palette. */
#paulPopup .paul-popup {
background: linear-gradient(155deg, #4b2146 0%, #351b35 56%, #26182b 100%) !important;
border-color: rgba(240, 168, 203, 0.62) !important;
box-shadow: 0 28px 76px rgba(20, 8, 23, 0.58), 0 0 0 1px rgba(214, 69, 143, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
#paulPopup .paul-popup::before {
background: linear-gradient(90deg, transparent, #d6458f 28%, #f3a0bf 50%, #d6458f 72%, transparent) !important;
}
#paulPopup .paul-popup::after {
background: linear-gradient(90deg, transparent, rgba(240, 168, 203, 0.10), rgba(214, 69, 143, 0.48), rgba(240, 168, 203, 0.10), transparent) !important;
}
#paulPopup .paul-offer-title {
background: linear-gradient(115deg, #ffe5f0 0%, #f3a0bf 48%, #f7d6a3 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
}
#paulPopup .paul-offer-title::after,
#paulPopup .auth-form h3::after {
background: linear-gradient(90deg, transparent, #e878a8, #f3a0bf, transparent) !important;
}
#paulPopup .paul-offer-subtitle,
#paulPopup .auth-form label,
#paulPopup .switch-link {
color: rgba(255, 237, 246, 0.76) !important;
}
#paulPopup .auth-form h3 {
background: linear-gradient(120deg, #ffe5f0, #f3a0bf 58%, #f7d6a3) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
}
#paulPopup .auth-form input:not([type="checkbox"]) {
color: #fff7fb !important;
background: rgba(255, 255, 255, 0.075) !important;
border-color: rgba(240, 168, 203, 0.30) !important;
}
#paulPopup .auth-form input:not([type="checkbox"])::placeholder {
color: rgba(255, 237, 246, 0.48) !important;
}
#paulPopup .auth-form input:not([type="checkbox"]):focus {
background: rgba(255, 255, 255, 0.11) !important;
border-color: #e878a8 !important;
box-shadow: 0 0 0 3px rgba(214, 69, 143, 0.18) !important;
}
#paulPopup .auth-form input[type="checkbox"] {
accent-color: #d6458f !important;
}
#paulPopup .paul-btn-login,
#paulPopup .paul-btn-register {
color: #ffffff !important;
background: linear-gradient(110deg, #b93479 0%, #d6458f 52%, #e878a8 100%) !important;
box-shadow: 0 6px 20px rgba(214, 69, 143, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
#paulPopup .paul-btn-login:hover,
#paulPopup .paul-btn-register:hover {
background: linear-gradient(110deg, #a92c6d 0%, #c43d83 52%, #d95f96 100%) !important;
box-shadow: 0 8px 24px rgba(214, 69, 143, 0.36) !important;
}
#paulPopup .switch-link span,
#paulPopup .paul-policy-link a,
#paulPopup #forgot-password,
#paulPopup .forgot-password {
color: #f3a0bf !important;
border-bottom-color: rgba(243, 160, 191, 0.48) !important;
}
#paulPopup .switch-link span:hover,
#paulPopup .paul-policy-link a:hover,
#paulPopup #forgot-password:hover,
#paulPopup .forgot-password:hover,
#paulPopup .password-toggle:hover {
color: #ffe5f0 !important;
}
#paulPopup .paul-close,
#paulPopup .popup-close {
color: rgba(255, 229, 240, 0.66) !important;
}
#paulPopup .paul-close:hover,
#paulPopup .popup-close:hover {
color: #ffffff !important;
}
/* Chat palette restored to the site's berry and plum brand colors. */
#cf-chat-widget .cf-chat-window {
background: #fff8fb !important;
border-color: rgba(164, 47, 105, 0.34) !important;
box-shadow: 0 24px 72px rgba(73, 23, 54, 0.22), 0 8px 24px rgba(214, 69, 143, 0.12) !important;
}
#cf-chat-widget .cf-chat-header {
background: linear-gradient(135deg, #35152f 0%, #542043 58%, #70284f 100%) !important;
border-bottom-color: rgba(243, 160, 191, 0.42) !important;
}
#cf-chat-widget .cf-chat-header::after {
background: linear-gradient(90deg, transparent, #e58ab0, #d6458f, transparent) !important;
}
#cf-chat-widget .cf-header-avatar img,
#cf-chat-widget .cf-avatar-fallback {
border-color: #e58ab0 !important;
}
#cf-chat-widget .cf-avatar-fallback {
background: rgba(214, 69, 143, 0.2) !important;
color: #ffe3ef !important;
}
#cf-chat-widget .cf-header-info h3 { color: #f3a0bf !important; }
#cf-chat-widget .cf-header-info p { color: rgba(255, 236, 244, 0.76) !important; }
#cf-chat-widget .cf-ai-badge {
background: rgba(214, 69, 143, 0.2) !important;
color: #ffd4e5 !important;
border-color: rgba(243, 160, 191, 0.55) !important;
}
#cf-chat-widget .cf-header-close {
background: rgba(243, 160, 191, 0.1) !important;
border-color: rgba(243, 160, 191, 0.48) !important;
color: #ffe3ef !important;
}
#cf-chat-widget .cf-header-close:hover {
background: #d6458f !important;
border-color: #f3a0bf !important;
color: #fff !important;
}
#cf-chat-widget .cf-quick-chips {
background: #f6e6ee !important;
border-bottom-color: rgba(164, 47, 105, 0.18) !important;
}
#cf-chat-widget .cf-chip {
background: #a8326c !important;
border-color: #c95a8c !important;
color: #fff7fb !important;
}
#cf-chat-widget .cf-chip:hover {
background: #79244f !important;
border-color: #79244f !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(121, 36, 79, 0.24) !important;
}
#cf-chat-widget .cf-messages { background: #fff9fc !important; }
#cf-chat-widget .cf-messages::-webkit-scrollbar-thumb { background: rgba(164, 47, 105, 0.35) !important; }
#cf-chat-widget .cf-message--ai .cf-msg-bubble {
background: #fffdfd !important;
border-color: rgba(164, 47, 105, 0.2) !important;
color: #40243b !important;
}
#cf-chat-widget .cf-message--ai .cf-msg-bubble strong { color: #a8326c !important; }
#cf-chat-widget .cf-message--user .cf-msg-bubble {
background: linear-gradient(135deg, #a8326c, #d6458f) !important;
border-color: #d6458f !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(121, 36, 79, 0.2) !important;
}
#cf-chat-widget .cf-link-btn {
background: #a8326c !important;
border-color: #c95a8c !important;
color: #fff !important;
}
#cf-chat-widget .cf-input-area { background: #f7eaf0 !important; border-top-color: rgba(164, 47, 105, 0.2) !important; }
#cf-chat-widget .cf-input-wrapper {
background: #fffdfd !important;
border-color: rgba(164, 47, 105, 0.24) !important;
}
#cf-chat-widget .cf-input-wrapper:focus-within {
background: #fff !important;
border-color: #c43d83 !important;
box-shadow: 0 0 0 3px rgba(196, 61, 131, 0.12) !important;
}
#cf-chat-widget #cf-input { color: #40243b !important; }
#cf-chat-widget #cf-input::placeholder,
#cf-chat-widget .cf-image-btn { color: #9a7188 !important; }
#cf-chat-widget .cf-send-btn {
background: #a8326c !important;
border-color: #a8326c !important;
box-shadow: 0 3px 10px rgba(121, 36, 79, 0.2) !important;
}
#cf-chat-widget .cf-send-btn svg { color: #fff !important; fill: #fff !important; }
#cf-chat-widget .cf-send-btn:not(:disabled):hover { background: #79244f !important; box-shadow: 0 6px 18px rgba(121, 36, 79, 0.3) !important; }
#cf-chat-widget .cf-send-btn:not(:disabled):hover svg { color: #fff !important; fill: #fff !important; }
#cf-chat-widget .cf-subscribe-btn {
background: linear-gradient(135deg, #a8326c, #d6458f) !important;
border-color: #c95a8c !important;
color: #fff !important;
box-shadow: 0 3px 10px rgba(121, 36, 79, 0.2) !important;
}
#cf-chat-widget .cf-subscribe-btn:hover { box-shadow: 0 5px 16px rgba(121, 36, 79, 0.3) !important; }
#cf-chat-widget .cf-image-btn { border-color: rgba(164, 47, 105, 0.24) !important; }
#cf-chat-widget .cf-image-btn:hover { color: #a8326c !important; border-color: #c43d83 !important; background: rgba(214, 69, 143, 0.08) !important; }
#cf-chat-widget .cf-image-preview { background: #fffdfd !important; border-color: rgba(164, 47, 105, 0.24) !important; }
/* Birthday gift popup: restore the vivid berry/plum look and readable contrast. */
#bbwBdayOverlay {
background: rgba(35, 15, 31, 0.78) !important;
}
#bbwBdayModal {
--bday-rose: #d6458f;
--bday-gold: #f0a8cb;
--bday-plum: #35152f;
--bday-light: #fff7fb;
--bday-shadow: rgba(73, 23, 54, 0.4);
background: linear-gradient(155deg, #562044 0%, #3f1838 52%, #2d142c 100%) !important;
color: #fff7fb !important;
box-shadow: 0 0 0 1px rgba(243, 160, 191, 0.42), 0 24px 80px rgba(24, 8, 21, 0.68), 0 0 60px rgba(214, 69, 143, 0.14) inset !important;
}
#bbwBdayModal::before {
background: conic-gradient(from 0deg, transparent 0%, rgba(243,160,191,.58) 25%, rgba(214,69,143,.52) 50%, rgba(243,160,191,.58) 75%, transparent 100%) !important;
}
#bbwBdayModal .bbw-bday-marquee-wrap {
background: linear-gradient(100deg, #8e2c60 0%, #c43d83 48%, #8e2c60 100%) !important;
color: #fff7fb !important;
}
#bbwBdayModal .bbw-bday-marquee-item { color: #fff7fb !important; }
#bbwBdayModal .bbw-bday-main-title {
background: linear-gradient(90deg, #f3a0bf, #fff7fb 45%, #f3a0bf) !important;
background-size: 200% auto !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
#bbwBdayModal .bbw-bday-card {
background: linear-gradient(145deg, rgba(255,247,251,.10), rgba(255,247,251,.045)) !important;
border-color: rgba(243, 160, 191, 0.62) !important;
color: #fff7fb !important;
}
#bbwBdayModal .bbw-bday-card::before {
background: radial-gradient(circle at 50% 0%, rgba(243,160,191,.15) 0%, transparent 68%) !important;
}
#bbwBdayModal .bbw-bday-avatar {
background: linear-gradient(135deg, #a8326c, #542043) !important;
border-color: #f0a8cb !important;
box-shadow: 0 4px 18px rgba(214, 69, 143, 0.35) !important;
}
#bbwBdayModal .bbw-bday-name { color: #f3a0bf !important; }
#bbwBdayModal .bbw-bday-age-badge {
background: linear-gradient(90deg, #a8326c, #70284f) !important;
color: #fff !important;
}
#bbwBdayModal .bbw-bday-message { color: rgba(255, 247, 251, 0.88) !important; }
#bbwBdayModal .bbw-bday-promo-wrap {
background: rgba(255, 247, 251, 0.09) !important;
border-color: rgba(243, 160, 191, 0.58) !important;
}
#bbwBdayModal .bbw-bday-promo-label { color: rgba(255, 231, 241, 0.74) !important; }
#bbwBdayModal .bbw-bday-promo-code { color: #f3a0bf !important; text-shadow: 0 0 12px rgba(214,69,143,.28) !important; }
#bbwBdayModal .bbw-bday-promo-discount { color: #b9edcf !important; }
#bbwBdayModal .bbw-bday-copy-btn {
background: linear-gradient(135deg, #a8326c, #d6458f) !important;
color: #fff !important;
}
#bbwBdayModal .bbw-bday-copy-btn:hover { box-shadow: 0 4px 14px rgba(214,69,143,.34) !important; }
#bbwBdayModal .bbw-bday-arrow {
background: rgba(53, 21, 47, 0.88) !important;
border-color: rgba(243, 160, 191, 0.45) !important;
color: #fff !important;
}
#bbwBdayModal .bbw-bday-arrow:hover { background: #a8326c !important; }
#bbwBdayModal .bbw-bday-footer { border-top-color: rgba(243, 160, 191, 0.2) !important; }
#bbwBdayModal .bbw-bday-subscribe-btn {
background: linear-gradient(110deg, #a8326c, #d6458f 58%, #e878a8) !important;
color: #fff !important;
box-shadow: 0 6px 20px rgba(121, 36, 79, 0.38) !important;
}
#bbwBdayModal .bbw-bday-subscribe-btn:hover { box-shadow: 0 10px 28px rgba(121, 36, 79, 0.48) !important; }
#bbwBdayModal .bbw-bday-footer-note { color: rgba(255, 231, 241, 0.7) !important; }
#bbwBdayModal .bbw-bday-close {
background: rgba(255, 247, 251, 0.12) !important;
border-color: rgba(255, 231, 241, 0.48) !important;
color: #fff7fb !important;
}
#bbwBdayModal .bbw-bday-close:hover { background: #d6458f !important; border-color: #f3a0bf !important; }