/** Shopify CDN: Minification failed
Line 2642:0 All "@import" rules must come first
**/
/* ═══════════════════════════════════════════════════════════════
HOME V2 · designer edition
═══════════════════════════════════════════════════════════════ */
.mhv2 {
/* Brand color tokens — derived from --wy-* globals (theme.liquid) with hard fallbacks for non-themed contexts */
--mhv2-bordeaux: var(--wy-bordeaux, #6B1E32);
--mhv2-bordeaux-deep: var(--wy-bordeaux-deep, #4A0F20);
--mhv2-cream: var(--wy-cream, #FAF3E7);
--mhv2-cream-warm: var(--wy-cream-warm, #F4E8D5);
--mhv2-amber: var(--wy-amber, #FFA628);
--mhv2-gold: var(--wy-gold, #C9A961);
--mhv2-ink: var(--wy-ink, #241611);
--mhv2-line: #E6DAC8; --mhv2-line-soft: #F0E6D3;
--mhv2-ink-soft: #6B5A52; --mhv2-ink-muted: #9A8B81;
--mhv2-gold-soft: #E6D4A6; --mhv2-amber-soft: #FFE0B0; --mhv2-amber-tint: #FFF5E6;
--mhv2-sage: #A5B39A; --mhv2-bordeaux-tint: #F5E8EC;
--mhv2-f-display: 'Cormorant Garamond', Georgia, serif;
--mhv2-f-body: 'Inter', -apple-system, sans-serif;
--mhv2-f-hand: 'Caveat', cursive;
--mhv2-ease: cubic-bezier(.22,1,.36,1);
--mhv2-ease-bounce: cubic-bezier(.34,1.56,.64,1);
--mhv2-r-sm: 10px; --mhv2-r-md: 18px; --mhv2-r-lg: 28px; --mhv2-r-xl: 40px;
--mhv2-shadow-sm: 0 2px 6px rgba(36,22,17,.06);
--mhv2-shadow-md: 0 6px 16px rgba(36,22,17,.08), 0 2px 4px rgba(36,22,17,.04);
--mhv2-shadow-lg: 0 24px 48px rgba(36,22,17,.12), 0 8px 16px rgba(36,22,17,.06);
font-family: var(--mhv2-f-body);
color: var(--mhv2-ink);
background:
radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,166,40,.06), transparent 70%),
var(--mhv2-cream);
overflow-x: hidden;
}
.mhv2 *, .mhv2 *::before, .mhv2 *::after { box-sizing: border-box; }
.mhv2 h1, .mhv2 h2, .mhv2 h3 { font-family: var(--mhv2-f-display); font-weight: 500; line-height: 1.08; letter-spacing: -.015em; margin: 0; }
.mhv2 p { margin: 0; }
.mhv2 a { color: inherit; text-decoration: none; }
.mhv2 button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.mhv2 img, .mhv2 svg { display: block; max-width: 100%; }
.mhv2__container { max-width: 1320px; margin: 0 auto; padding: 0 24px; position: relative; }
@media (max-width: 600px) { .mhv2__container { padding: 0 18px; } }
.mhv2-icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* SCROLL REVEAL */
.mhv2-r { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--mhv2-ease), transform 1s var(--mhv2-ease); }
.mhv2-r.in { opacity: 1; transform: none; }
.mhv2-r-d1 { transition-delay: .1s; }
.mhv2-r-d2 { transition-delay: .2s; }
.mhv2-r-d3 { transition-delay: .3s; }
.mhv2-r-d4 { transition-delay: .4s; }
/* HAND-DRAWN UNDERLINE */
.mhv2-underline { position: relative; display: inline-block; }
.mhv2-underline::after {
content: ''; position: absolute; left: -4px; right: -4px; bottom: -10px; height: 12px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 Q 50 1, 100 6 T 197 7' stroke='%236B1E32' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
transform: scaleX(0); transform-origin: left;
transition: transform 1.1s var(--mhv2-ease) .4s;
}
.mhv2-r.in .mhv2-underline::after, .mhv2-underline.in::after { transform: scaleX(1); }
.mhv2-underline--amber::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 Q 50 1, 100 6 T 197 7' stroke='%23FFA628' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.mhv2-underline--subtle::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M3 6 Q 50 2, 100 5 T 197 6' stroke='%236B1E32' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E");
height: 8px;
bottom: -6px;
}
.mhv2__section--bordeaux .mhv2-underline::after,
.mhv2__cta .mhv2-underline::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 Q 50 1, 100 6 T 197 7' stroke='%23FFA628' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.mhv2__eyebrow { font-family: var(--mhv2-f-hand); font-size: clamp(22px, 2.2vw, 30px); color: var(--mhv2-bordeaux); display: inline-block; margin-bottom: 10px; transform: rotate(-1deg); }
.mhv2__eyebrow--light { color: var(--mhv2-amber); }
.mhv2__section-heading { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.mhv2__section-heading h2 { font-size: clamp(36px, 5vw, 58px); color: var(--mhv2-bordeaux-deep); }
.mhv2__section-sub { font-size: 17px; color: var(--mhv2-ink-soft); max-width: 560px; margin: 16px auto 0; line-height: 1.65; }
/* ═══════════════════════════════════════════════════════════════
HERO · dramatic with organic blobs + wavy bottom
═══════════════════════════════════════════════════════════════ */
.mhv2__hero {
position: relative; min-height: var(--mhv2-hero-min-h-d, 120vh);
display: grid; place-items: center; overflow: hidden;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,166,40,.22), transparent 60%),
radial-gradient(ellipse 70% 50% at 30% 100%, rgba(255,166,40,.14), transparent 55%),
radial-gradient(ellipse 60% 50% at 80% 80%, rgba(201,169,97,.12), transparent 55%),
linear-gradient(170deg, var(--mhv2-bordeaux-deep) 0%, var(--mhv2-bordeaux) 65%, #5C1828 100%);
color: var(--mhv2-cream);
padding: 100px 0 180px;
}
.mhv2__hero-bg { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.mhv2__hero-bg img { width: 100%; height: 110%; object-fit: cover; object-position: center 12%; animation: mhv2HeroPan 40s ease-in-out infinite alternate; }
@keyframes mhv2HeroPan { 0% { transform: scale(1.05) translateX(-1.5%); } 100% { transform: scale(1.12) translateX(1.5%); } }
.mhv2__hero-overlay {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 50% 35%, rgba(74,15,32,.15) 0%, var(--mhv2-hero-overlay-color, #4A0F20) 75%);
opacity: var(--mhv2-hero-overlay-opacity, .42);
z-index: 1;
}
.mhv2__blob { position: absolute; z-index: 1; pointer-events: none; }
.mhv2__blob--1 { width: 520px; top: -10%; right: -10%; animation: mhv2Blob1 18s ease-in-out infinite; }
.mhv2__blob--2 { width: 440px; bottom: -15%; left: -12%; animation: mhv2Blob2 22s ease-in-out infinite; }
@keyframes mhv2Blob1 { 0%, 100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-20px,30px) rotate(12deg); } }
@keyframes mhv2Blob2 { 0%, 100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(30px,-20px) rotate(-10deg); } }
.mhv2__hero-content { position: relative; z-index: 2; text-align: center; max-width: 900px; margin-left: auto !important; margin-right: auto !important; padding: 0 20px; left: 0; right: 0; }
.mhv2__hero-eyebrow { font-family: var(--mhv2-f-hand); font-size: clamp(28px, 3vw, 42px); color: var(--mhv2-amber); display: inline-block; transform: rotate(-2deg); margin-bottom: 4px; }
/* ═══════ Hero announcement pill ═══════ */
.mhv2__hero-ann {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
background: var(--ann-bg, #FFA628);
color: var(--ann-color, #4A0F20);
border-radius: 99px;
font-family: var(--mhv2-f-body);
font-size: 13.5px;
font-weight: 700;
letter-spacing: .01em;
margin-bottom: 22px;
box-shadow: 0 6px 18px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.25) inset;
animation: mhv2AnnPulse 2.6s ease-in-out infinite;
max-width: 92%;
line-height: 1.25;
text-align: left;
}
.mhv2__hero-ann-icon { font-size: 15px; line-height: 1; flex-shrink: 0; }
.mhv2__hero-ann-text { white-space: normal; }
@keyframes mhv2AnnPulse {
0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.25) inset; }
50% { transform: scale(1.025); box-shadow: 0 10px 26px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.25) inset; }
}
.mhv2__hero-title { font-size: clamp(34px, 5.5vw, 74px); color: var(--mhv2-cream); margin: 8px auto 22px; max-width: 26ch; line-height: 1.1; font-weight: 500; }
.mhv2__hero-title .mhv2-underline--amber::after {
height: 14px;
bottom: -12px;
background-image: none;
background-color: var(--mhv2-hero-underline-color, #FFA628);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 Q 50 1, 100 6 T 197 7' stroke='%23000' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 Q 50 1, 100 6 T 197 7' stroke='%23000' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.mhv2__hero { text-align: center; }
.mhv2__hero-sub { font-size: clamp(15px, 1.4vw, 17px); max-width: 500px; margin-left: auto !important; margin-right: auto !important; margin-bottom: 44px; opacity: .88; line-height: 1.65; text-align: center !important; padding: 0 20px; display: block; width: 100%; box-sizing: border-box; }
.mhv2__hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.mhv2__btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 16px; font-weight: 500; font-size: 14.5px; letter-spacing: .02em; transition: all .25s cubic-bezier(.2,.8,.3,1); cursor: pointer; position: relative; border: 1px solid transparent; white-space: nowrap; }
.mhv2__btn--primary { background: var(--mhv2-amber); color: var(--mhv2-ink); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 2px 4px rgba(0,0,0,.2), 0 8px 24px rgba(36,22,17,.35); font-weight: 600; }
.mhv2__btn--primary:hover { background: #FFB844; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 3px 6px rgba(0,0,0,.22), 0 12px 32px rgba(36,22,17,.42); }
.mhv2__btn--ghost { background: rgba(250,243,231,.08); color: var(--mhv2-cream); border: 1.5px solid rgba(250,243,231,.35); backdrop-filter: blur(10px); }
.mhv2__btn--ghost:hover { background: rgba(250,243,231,.18); border-color: var(--mhv2-cream); }
.mhv2__btn--amber-sm { background: var(--mhv2-bordeaux); color: var(--mhv2-cream); padding: 10px 20px; font-size: 13px; margin-top: 14px; border-radius: 12px; box-shadow: 0 4px 12px rgba(74,15,32,.2); }
.mhv2__btn--amber-sm:hover { background: var(--mhv2-bordeaux-deep); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(74,15,32,.28); }
.mhv2__btn--amber-lg { background: var(--mhv2-amber); color: var(--mhv2-ink); padding: 18px 40px; font-size: 15.5px; border-radius: 16px; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 2px 4px rgba(0,0,0,.2), 0 8px 24px rgba(36,22,17,.35); font-weight: 600; }
.mhv2__btn--amber-lg:hover { background: #FFB844; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 3px 6px rgba(0,0,0,.22), 0 12px 32px rgba(36,22,17,.42); }
.mhv2__btn .mhv2-icon { transition: transform .3s var(--mhv2-ease); }
.mhv2__btn:hover .mhv2-icon { transform: translateX(4px); }
.mhv2__proof { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin: 44px auto 0; padding-top: 32px; max-width: 680px; border-top: 1px solid rgba(250,243,231,.18); }
.mhv2__proof-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mhv2-cream); opacity: .95; font-weight: 500; }
.mhv2__proof-icon { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 600px) { .mhv2__proof { gap: 14px; font-size: 12.5px; } }
/* Scroll cue — clickable. Lifted off the very bottom edge so the arrow
isn't clipped by the wave / safe area, and made interactive (auto
pointer-events, hover halo, ARIA label). Tap/click smooth-scrolls
past the hero to the first content section. */
.mhv2__hero-scroll {
position: absolute;
bottom: 64px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
font-family: var(--mhv2-f-hand);
font-size: 14px;
color: var(--mhv2-cream);
opacity: .7;
display: flex; flex-direction: column; align-items: center;
gap: 6px;
padding: 6px 14px 4px;
border-radius: 999px;
background: transparent;
border: 0;
cursor: pointer;
pointer-events: auto;
animation: mhv2ScrollBounce 2.4s ease-in-out infinite;
transition: opacity .25s ease, background .25s ease, transform .25s ease;
}
.mhv2__hero-scroll:hover,
.mhv2__hero-scroll:focus-visible {
opacity: 1;
background: rgba(250, 243, 231, .12);
outline: 0;
}
.mhv2__hero-scroll svg {
width: 20px; height: 20px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
@media (max-width: 900px) {
.mhv2__hero-scroll {
bottom: 78px;
font-size: 13px;
}
}
@keyframes mhv2ScrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } }
.mhv2__hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; color: #FFFFFF; line-height: 0; pointer-events: none; }
.mhv2__hero-wave svg { width: 100%; height: 90px; display: block; }
@media (max-width: 700px) { .mhv2__hero-wave svg { height: 56px; } }
/* ═══════════════════════════════════════════════════════════════
INTRO MANIFESTO
═══════════════════════════════════════════════════════════════ */
.mhv2__intro { padding: 60px 0 70px; background: #FFFFFF; position: relative; overflow: hidden; }
.mhv2__intro-wrap { max-width: 880px; margin: 0 auto; text-align: center; position: relative; }
/* Decorative standalone illustrations (inline SVG) */
.mhv2__deco { position: absolute; color: var(--mhv2-bordeaux); opacity: .13; pointer-events: none; z-index: 0; }
.mhv2__deco--dandelion { top: 36px; right: 6%; width: 72px; height: 72px; transform: rotate(-8deg); }
.mhv2__deco--heart { top: 60px; left: 4%; width: 58px; height: 58px; transform: rotate(-10deg); opacity: .08; }
.mhv2__deco--pencil { bottom: 40px; right: 5%; width: 62px; height: 62px; transform: rotate(12deg); opacity: .09; }
.mhv2__deco--sparkle { top: 40px; right: 8%; width: 56px; height: 56px; transform: rotate(6deg); opacity: .11; color: var(--mhv2-amber); }
@media (max-width: 700px) {
.mhv2__deco--dandelion { width: 44px; height: 44px; right: 4%; top: 18px; opacity: .1; }
.mhv2__deco--heart { width: 36px; height: 36px; top: 26px; left: 4%; }
.mhv2__deco--pencil { width: 38px; height: 38px; bottom: 30px; right: 4%; }
.mhv2__deco--sparkle { width: 36px; height: 36px; top: 18px; right: 5%; }
}
/* Ensure sections containing illustrations clip overflow + are positioned for absolute decos */
.mhv2__story, .mhv2__values, .mhv2__intro { position: relative; overflow: hidden; }
/* ═══════════════════════════════════════════════════════════════
SHAPE DIVIDERS between sections (wave, scallop, arc)
═══════════════════════════════════════════════════════════════ */
.mhv2__shape-divider { position: absolute; left: 0; right: 0; line-height: 0; pointer-events: none; z-index: 2; }
.mhv2__shape-divider svg { display: block; width: 100%; height: 100%; }
.mhv2__shape-divider--scallop { bottom: 0; height: 28px; }
.mhv2__shape-divider--scallop svg { height: 28px; }
@media (max-width: 700px) { .mhv2__shape-divider--scallop, .mhv2__shape-divider--scallop svg { height: 18px; } }
.mhv2__shape-divider--wave { height: 60px; }
.mhv2__shape-divider--wave svg { height: 60px; }
/* ═══════════════════════════════════════════════════════════════
EMAIL SIGNUP — Birthday reminder on white bg (breathing-space card)
═══════════════════════════════════════════════════════════════ */
.mhv2__es { padding: 70px 0 80px; background: #FFFFFF; position: relative; }
.mhv2__es-card {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 48px;
padding: 44px 48px;
background: linear-gradient(180deg, #FFFFFF 0%, var(--mhv2-cream) 100%);
border-radius: 28px;
border: 1px solid rgba(107,30,50,.08);
box-shadow: 0 20px 50px rgba(74,15,32,.08), 0 2px 8px rgba(36,22,17,.04);
position: relative;
overflow: hidden;
align-items: center;
}
.mhv2__es-card::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 240px; height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,166,40,.22), transparent 70%);
pointer-events: none;
}
.mhv2__es-card::after {
content: '';
position: absolute;
bottom: -60px; left: -60px;
width: 180px; height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(107,30,50,.12), transparent 70%);
pointer-events: none;
}
@media (max-width: 900px) {
.mhv2__es { padding: 50px 0 60px; }
.mhv2__es-card { grid-template-columns: 1fr; gap: 28px; padding: 30px 22px; }
}
.mhv2__es-left, .mhv2__es-right { position: relative; z-index: 1; }
.mhv2__es-badge {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 14px 6px 10px;
background: var(--mhv2-amber);
color: var(--mhv2-ink);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
box-shadow: 0 6px 14px rgba(255,166,40,.35);
margin-bottom: 16px;
}
.mhv2__es-badge-emoji { font-size: 15px; line-height: 1; }
.mhv2__es-heading {
font-family: var(--mhv2-f-display);
font-size: clamp(26px, 3.2vw, 38px);
font-weight: 500;
color: var(--mhv2-bordeaux-deep);
line-height: 1.15;
margin: 0 0 14px;
letter-spacing: -.01em;
}
.mhv2__es-sub {
font-size: 15px;
color: var(--mhv2-ink-soft);
line-height: 1.6;
margin: 0 0 22px;
}
.mhv2__es-perks {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.mhv2__es-perks li {
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
color: var(--mhv2-ink);
}
.mhv2__es-perk-icon {
display: inline-grid;
place-items: center;
width: 28px; height: 28px;
background: rgba(107,30,50,.08);
border-radius: 50%;
flex-shrink: 0;
font-size: 14px;
}
/* Form */
.mhv2__es-form {
background: white;
padding: 26px 26px 24px;
border-radius: 20px;
border: 1px solid rgba(107,30,50,.08);
box-shadow: 0 8px 24px rgba(36,22,17,.06);
display: flex;
flex-direction: column;
gap: 14px;
}
.mhv2__es-form-title {
font-family: var(--mhv2-f-display);
font-size: 18px;
font-weight: 600;
color: var(--mhv2-bordeaux-deep);
margin: 0;
}
.mhv2__es-form-sub {
font-size: 12.5px;
color: var(--mhv2-ink-soft);
margin: -10px 0 4px;
}
.mhv2__es-field {
display: flex;
flex-direction: column;
gap: 5px;
}
.mhv2__es-field label {
font-size: 11.5px;
font-weight: 600;
color: var(--mhv2-ink-soft);
letter-spacing: .04em;
text-transform: uppercase;
}
.mhv2__es-field input,
.mhv2__es-field select {
border: 1.5px solid rgba(107,30,50,.12);
border-radius: 10px;
padding: 11px 13px;
font-family: var(--mhv2-f-body);
font-size: 14px;
color: var(--mhv2-ink);
background: white;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
width: 100%;
box-sizing: border-box;
}
.mhv2__es-field input:focus,
.mhv2__es-field select:focus {
border-color: var(--mhv2-amber);
box-shadow: 0 0 0 3px rgba(255,166,40,.18);
}
.mhv2__es-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 500px) {
.mhv2__es-row { grid-template-columns: 1fr; }
}
.mhv2 .mhv2__es-submit,
button.mhv2__es-submit,
.mhv2__es-submit {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
padding: 14px 22px !important;
background: var(--mhv2-bordeaux, #6B1E32) !important;
background-color: var(--mhv2-bordeaux, #6B1E32) !important;
color: #fff !important;
font-family: var(--mhv2-f-body) !important;
font-size: 14.5px !important;
font-weight: 700 !important;
border: 0 !important;
border-radius: 12px !important;
cursor: pointer !important;
margin-top: 4px !important;
min-width: 0 !important;
min-height: 0 !important;
text-transform: none !important;
letter-spacing: normal !important;
box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 16px rgba(74,15,32,.32) !important;
transition: box-shadow .25s ease, transform .2s ease !important;
}
.mhv2__es-submit span { color: #fff !important; }
.mhv2__es-submit svg { stroke: #fff !important; }
.mhv2__es-submit svg path { stroke: #fff !important; }
.mhv2__es-submit svg {
width: 16px; height: 16px;
transition: transform .3s cubic-bezier(.25,.8,.25,1);
}
.mhv2__es-submit:hover svg { transform: translateX(5px); }
.mhv2__es-submit:hover {
box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 8px 20px rgba(74,15,32,.4);
}
.mhv2__es-submit svg { width: 16px; height: 16px; }
.mhv2__es-privacy {
font-size: 11px;
color: var(--mhv2-ink-soft);
margin: 2px 0 0;
line-height: 1.4;
text-align: center;
}
.mhv2__es-privacy a { color: var(--mhv2-bordeaux); text-decoration: underline; }
.mhv2__es-ok {
padding: 16px 18px;
background: rgba(159,229,168,.2);
border: 1px solid rgba(159,229,168,.4);
border-radius: 12px;
color: #2C6E3A;
font-size: 14px;
text-align: center;
font-weight: 600;
}
.mhv2__es-ok span { color: #2C6E3A; font-weight: 800; margin-right: 4px; }
.mhv2__es-err {
padding: 10px 14px;
background: rgba(244,164,164,.15);
border: 1px solid rgba(244,164,164,.4);
border-radius: 10px;
color: #A43A3A;
font-size: 12.5px;
}
/* ═══════════════════════════════════════════════════════════════
LIVE ENGRAVING PREVIEW — bordeaux stage with floating amber orbs
Replaces CTA "Започни тук" — same vibe, now interactive.
═══════════════════════════════════════════════════════════════ */
.mhv2__lep {
position: relative;
padding: 110px 0 120px;
background: linear-gradient(135deg, var(--mhv2-lep-bg-1, var(--mhv2-bordeaux-deep)) 0%, var(--mhv2-lep-bg-2, var(--mhv2-bordeaux)) 100%);
color: var(--mhv2-cream);
overflow: hidden;
isolation: isolate;
}
.mhv2__lep > .mhv2__container { position: relative; z-index: 3; }
/* Asymmetric multi-lobe irregular edges — different from waves/blobs */
.mhv2__lep-edge { position: absolute; left: 0; right: 0; line-height: 0; pointer-events: none; z-index: 2; height: 70px; }
.mhv2__lep-edge svg { width: 100%; height: 100%; display: block; }
.mhv2__lep-edge--top { top: 0; }
.mhv2__lep-edge--bottom { bottom: 0; }
@media (max-width: 700px) { .mhv2__lep-edge { height: 44px; } }
/* Floating amber orbs — like CTA "балони" drifting inside */
.mhv2__lep-orb { position: absolute; pointer-events: none; z-index: 1; filter: blur(.5px); }
.mhv2__lep-orb--1 { top: -8%; right: -6%; width: 460px; animation: mhv2LepOrb1 22s ease-in-out infinite; }
.mhv2__lep-orb--2 { bottom: -14%; left: -8%; width: 400px; animation: mhv2LepOrb2 26s ease-in-out infinite; }
.mhv2__lep-orb--3 { top: 32%; left: 28%; width: 160px; animation: mhv2LepOrb3 18s ease-in-out infinite; }
.mhv2__lep-orb--4 { bottom: 20%; right: 22%; width: 120px; animation: mhv2LepOrb4 20s ease-in-out infinite; }
@media (max-width: 700px) {
.mhv2__lep-orb--1 { width: 280px; }
.mhv2__lep-orb--2 { width: 240px; }
.mhv2__lep-orb--3, .mhv2__lep-orb--4 { display: none; }
}
@keyframes mhv2LepOrb1 { 0%, 100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-30px, 40px) rotate(8deg); } }
@keyframes mhv2LepOrb2 { 0%, 100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(40px, -30px) rotate(-6deg); } }
@keyframes mhv2LepOrb3 { 0%, 100% { transform: translate(0,0); } 33% { transform: translate(20px, -15px); } 66% { transform: translate(-10px, 25px); } }
@keyframes mhv2LepOrb4 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-25px, -20px); } }
.mhv2__lep-heading { margin-bottom: 44px; }
.mhv2__lep-heading h2 { color: var(--mhv2-cream); font-family: var(--mhv2-f-display); font-size: clamp(32px, 4vw, 52px); font-weight: 500; line-height: 1.12; margin-bottom: 14px; }
.mhv2__lep-heading .mhv2__eyebrow { color: var(--mhv2-amber); }
.mhv2__lep-sub { font-size: 15px; color: rgba(250,243,231,.82); line-height: 1.55; max-width: 560px; margin-left: auto !important; margin-right: auto !important; text-align: center !important; display: block; padding: 0 12px; box-sizing: border-box; width: 100%; }
.mhv2__lep-wrap {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
max-width: 1120px;
margin: 0 auto;
align-items: center;
}
@media (max-width: 900px) {
.mhv2__lep { padding: 86px 0 96px; }
.mhv2__lep-wrap { grid-template-columns: 1fr; gap: 28px; max-width: 540px; }
}
.mhv2__lep-stage {
position: relative;
aspect-ratio: 4/3;
border-radius: 24px;
overflow: hidden;
background: var(--mhv2-cream-warm);
box-shadow:
0 24px 60px rgba(0,0,0,.35),
0 4px 14px rgba(0,0,0,.2),
0 0 0 1px rgba(255,166,40,.2),
0 0 0 8px rgba(250,243,231,.06);
}
.mhv2__lep-bg { width: 100%; height: 100%; object-fit: cover; display: block; }
.mhv2__lep-placeholder {
display: grid; place-items: center; height: 100%;
font-family: var(--mhv2-f-body); font-size: 13px; color: var(--mhv2-ink-soft);
padding: 20px; text-align: center;
}
.mhv2__lep-engraving {
position: absolute;
transform: translate(-50%, -50%);
font-family: 'Sunday', 'Caveat', 'Cormorant Garamond', cursive;
font-weight: 400;
text-align: center;
line-height: 1.15;
pointer-events: none;
word-break: break-word;
letter-spacing: .01em;
text-shadow:
0 1px 0 rgba(255,255,255,.35),
0 -1px 1px rgba(0,0,0,.25),
1px 0 1px rgba(0,0,0,.08);
filter: drop-shadow(0 1px 2px rgba(0,0,0,.12));
transition: text-shadow .3s ease;
-webkit-font-smoothing: antialiased;
font-synthesis: none;
}
@media (max-width: 700px) {
.mhv2__lep-engraving {
font-family: 'Sunday', 'Caveat', cursive;
}
}
/* SVG overlay — used only when Sunday font is active.
Glyphs are rendered as vector paths via opentype.js so the look is
identical across OS rasterizers (no native font rendering involved).
Positioned identically to .mhv2__lep-engraving div. */
.mhv2 .mhv2__lep-svg {
position: absolute;
transform: translate(-50%, -50%);
pointer-events: none;
display: none;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.12));
height: auto;
}
.mhv2 .mhv2__lep-svg.is-active { display: block; pointer-events: auto; cursor: grab; touch-action: none; }
.mhv2 .mhv2__lep-svg.is-active.is-dragging { cursor: grabbing; }
.mhv2 .mhv2__lep-engraving.is-hidden { visibility: hidden; }
.mhv2 .mhv2__lep-engraving { cursor: grab; touch-action: none; pointer-events: auto; }
.mhv2 .mhv2__lep-engraving.is-dragging { cursor: grabbing; }
/* Drag affordance — make it OBVIOUS the engraving is movable.
Dashed amber outline always visible; brightens to solid on hover/drag.
Plus a small "✥" badge above the text that gently bobs to invite interaction. */
.mhv2 .mhv2__lep-engraving:not(.is-hidden),
.mhv2 .mhv2__lep-svg.is-active {
outline: 1.5px dashed rgba(255, 166, 40, .85);
outline-offset: 8px;
border-radius: 6px;
transition: outline-color .25s ease, outline-offset .25s ease, outline-style .15s ease;
}
.mhv2 .mhv2__lep-engraving:not(.is-hidden):hover,
.mhv2 .mhv2__lep-svg.is-active:hover {
outline-color: var(--wy-amber, #FFA628);
outline-offset: 10px;
outline-style: solid;
}
.mhv2 .mhv2__lep-engraving.is-dragging,
.mhv2 .mhv2__lep-svg.is-active.is-dragging {
outline-color: var(--wy-amber, #FFA628);
outline-style: solid;
outline-offset: 10px;
}
/* Move-icon badge — positioned above the engraving via ::before pseudo on the text div.
Visible only when text variant is active (i.e., not :is-hidden). When SVG is active,
we render the same badge via a sibling rule on .mhv2__lep-svg.is-active. */
.mhv2 .mhv2__lep-engraving:not(.is-hidden)::before {
content: '';
position: absolute;
top: -38px;
left: 50%;
width: 30px; height: 30px;
margin-left: -15px;
background:
var(--wy-amber, #FFA628)
url("data:image/svg+xml;utf8,")
no-repeat center / 16px 16px;
border-radius: 999px;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
animation: lepMovePulse 2.4s ease-in-out infinite;
}
@keyframes lepMovePulse {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.mhv2 .mhv2__lep-engraving.is-dragging::before { animation-play-state: paused; }
/* MOBILE drag affordance — desktop has hover state to discover that
the engraving is movable; touch devices don't. Make the outline
thicker + the move-icon badge bigger and brighter, AND add a small
"Премести" pill underneath the engraving so the gesture is obvious
even at first glance. */
@media (max-width: 700px) {
.mhv2 .mhv2__lep-engraving:not(.is-hidden),
.mhv2 .mhv2__lep-svg.is-active {
outline-width: 2.5px !important;
outline-style: solid !important;
outline-color: rgba(255, 166, 40, .9) !important;
outline-offset: 6px !important;
border-radius: 8px !important;
}
.mhv2 .mhv2__lep-engraving:not(.is-hidden)::before,
.mhv2 .mhv2__lep-svg.is-active::before {
top: -42px !important;
width: 38px !important;
height: 38px !important;
margin-left: -19px !important;
background-size: 22px 22px !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 255, 255, .15) !important;
}
/* Helper pill below the text — "✥ Премести текста" */
.mhv2 .mhv2__lep-engraving:not(.is-hidden)::after,
.mhv2 .mhv2__lep-svg.is-active::after {
content: 'Премести';
position: absolute;
bottom: -32px;
left: 50%;
transform: translateX(-50%);
background: var(--wy-amber, #FFA628);
color: #4A0F20;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
text-shadow: none;
line-height: 1.2;
animation: lepMovePulse 2.4s ease-in-out infinite;
animation-delay: .2s;
}
.mhv2 .mhv2__lep-engraving.is-dragging::after,
.mhv2 .mhv2__lep-svg.is-active.is-dragging::after { animation-play-state: paused; }
}
/* LEP size slider — brand styled range input */
.mhv2 .mhv2__lep-size {
display: flex; align-items: center; gap: 12px;
margin: 6px 0 0;
padding: 10px 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: var(--wy-radius-md, 14px);
}
.mhv2 .mhv2__lep-size-label {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 12.5px; font-weight: 600;
color: rgba(255,255,255,.78);
letter-spacing: .04em; text-transform: uppercase;
flex-shrink: 0;
}
.mhv2 .mhv2__lep-size-slider {
flex: 1;
-webkit-appearance: none; appearance: none;
background: rgba(255,255,255,.18);
height: 4px; border-radius: 999px;
cursor: pointer;
}
.mhv2 .mhv2__lep-size-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px;
background: var(--wy-amber, #FFA628);
border: 2px solid var(--wy-bordeaux-deep, #4A0F20);
border-radius: 50%; cursor: grab;
box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.mhv2 .mhv2__lep-size-slider::-moz-range-thumb {
width: 18px; height: 18px;
background: var(--wy-amber, #FFA628);
border: 2px solid var(--wy-bordeaux-deep, #4A0F20);
border-radius: 50%; cursor: grab;
}
.mhv2 .mhv2__lep-size-val {
min-width: 28px; text-align: center;
font-family: 'Inter', monospace;
font-size: 13px; font-weight: 600;
color: var(--wy-amber, #FFA628);
background: rgba(0,0,0,.18);
padding: 4px 8px; border-radius: 999px;
}
.mhv2__lep-controls {
display: flex;
flex-direction: column;
gap: 14px;
padding: 4px 4px;
}
.mhv2__lep-label {
font-family: var(--mhv2-f-body);
font-size: 12.5px;
font-weight: 600;
color: rgba(250,243,231,.85);
letter-spacing: .08em;
text-transform: uppercase;
}
.mhv2__lep-inputwrap {
position: relative;
display: flex;
align-items: center;
}
.mhv2__lep-input {
flex: 1;
width: 100%;
border: 2px solid rgba(250,243,231,.22);
border-radius: 16px;
padding: 18px 78px 18px 20px;
font-family: 'Sunday', 'Caveat', cursive;
font-size: 26px;
color: var(--mhv2-cream);
background: rgba(250,243,231,.06);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
outline: none;
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.mhv2__lep-input:focus {
border-color: var(--mhv2-amber);
background: rgba(250,243,231,.1);
box-shadow: 0 0 0 4px rgba(255,166,40,.22), 0 8px 24px rgba(0,0,0,.25);
}
.mhv2__lep-input::placeholder { color: rgba(250,243,231,.4); }
.mhv2__lep-counter {
position: absolute;
right: 14px;
font-family: var(--mhv2-f-body);
font-size: 11px;
color: rgba(250,243,231,.7);
background: rgba(255,166,40,.18);
padding: 4px 10px;
border-radius: 999px;
pointer-events: none;
letter-spacing: .02em;
}
.mhv2__lep-hint {
font-family: var(--mhv2-f-body);
font-size: 13px;
color: rgba(250,243,231,.72);
line-height: 1.55;
margin: 2px 0 4px;
}
.mhv2__lep-btn { align-self: flex-start; margin-top: 8px; background: var(--mhv2-lep-cta-bg, var(--mhv2-amber)) !important; color: var(--mhv2-lep-cta-color, var(--mhv2-ink)) !important; }
.mhv2__lep-btn:hover { background: var(--mhv2-lep-cta-bg, var(--mhv2-amber)) !important; filter: brightness(1.08); }
@media (max-width: 700px) {
.mhv2__lep-input { font-size: 22px; padding: 16px 72px 16px 18px; }
.mhv2__lep-hint { font-size: 12px; }
.mhv2__lep-heading { margin-bottom: 30px; }
.mhv2__lep-heading h2 { font-size: clamp(26px, 6vw, 34px); }
}
.mhv2__shape-divider--top { top: 0; transform: rotate(180deg); }
@media (max-width: 700px) { .mhv2__shape-divider--wave, .mhv2__shape-divider--wave svg { height: 40px; } }
.mhv2__shape-divider--arc { bottom: -1px; height: 50px; }
.mhv2__shape-divider--arc svg { height: 50px; }
/* ═══════════════════════════════════════════════════════════════
WAVY section dividers (irregular hand-drawn wave)
═══════════════════════════════════════════════════════════════ */
.mhv2__wave { position: absolute; left: 0; right: 0; line-height: 0; pointer-events: none; z-index: 2; height: 40px; }
.mhv2__wave svg { width: 100%; height: 100%; display: block; }
.mhv2__wave--top { top: 0; }
.mhv2__wave--bottom { bottom: 0; }
/* Layered (double-wave) variant — taller container to fit back wave */
.mhv2__wave--layered { height: 56px; }
.mhv2__wave--layered svg { width: 100%; height: 100%; }
@media (max-width: 700px) {
.mhv2__wave { height: 26px; }
.mhv2__wave--layered { height: 36px; }
}
/* ═══════════════════════════════════════════════════════════════
KID-DRAWN DOODLES — playful background decorations
═══════════════════════════════════════════════════════════════ */
.mhv2__kd {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
color: #B86E7E; /* washed-out bordeaux */
}
.mhv2__kd-doodle {
position: absolute;
opacity: .22;
}
/* Scatter positions — used inside any section that renders the snippet */
.mhv2__kd--heart-1 { top: 8%; left: 4%; width: 46px; height: 46px; transform: rotate(-8deg); }
.mhv2__kd--smile { top: 18%; right: 6%; width: 52px; height: 52px; transform: rotate(6deg); opacity: .18; }
.mhv2__kd--sun { top: 48%; left: 8%; width: 56px; height: 56px; transform: rotate(0); opacity: .2; }
.mhv2__kd--star { top: 32%; right: 12%; width: 44px; height: 44px; transform: rotate(12deg); }
.mhv2__kd--flower { top: 70%; right: 5%; width: 54px; height: 54px; transform: rotate(-5deg); opacity: .2; }
.mhv2__kd--note { top: 82%; left: 10%; width: 48px; height: 48px; transform: rotate(8deg); opacity: .22; }
.mhv2__kd--gift { top: 6%; right: 38%; width: 42px; height: 42px; transform: rotate(-10deg); opacity: .18; }
.mhv2__kd--squiggle { top: 42%; right: 28%; width: 90px; height: 30px; transform: rotate(-3deg); opacity: .2; }
.mhv2__kd--heart-2 { top: 62%; left: 36%; width: 26px; height: 26px; transform: rotate(14deg); opacity: .25; }
.mhv2__kd--spiral { top: 92%; right: 22%; width: 40px; height: 40px; transform: rotate(-6deg); opacity: .18; }
.mhv2__kd--cloud { top: 22%; left: 32%; width: 62px; height: 36px; transform: rotate(-2deg); opacity: .18; }
.mhv2__kd--star-2 { top: 78%; right: 42%; width: 28px; height: 28px; transform: rotate(8deg); opacity: .22; }
@media (max-width: 900px) {
.mhv2__kd--gift, .mhv2__kd--cloud, .mhv2__kd--star-2, .mhv2__kd--spiral { display: none; }
.mhv2__kd-doodle { opacity: .18; }
.mhv2__kd--heart-1 { width: 32px; height: 32px; }
.mhv2__kd--smile { width: 36px; height: 36px; }
.mhv2__kd--sun { width: 38px; height: 38px; }
.mhv2__kd--star { width: 28px; height: 28px; }
.mhv2__kd--flower { width: 36px; height: 36px; }
.mhv2__kd--note { width: 32px; height: 32px; }
.mhv2__kd--squiggle { width: 60px; height: 20px; }
.mhv2__kd--heart-2 { width: 20px; height: 20px; }
}
/* Ensure sections that render doodles clip them + content sits on top */
.mhv2__kf, .mhv2__values, .mhv2__story { position: relative; overflow: hidden; }
.mhv2__kf > .mhv2__container,
.mhv2__values > .mhv2__container,
.mhv2__story > .mhv2__container { position: relative; z-index: 1; }
/* ═══════════════════════════════════════════════════════════════
KNOWLEDGE FACTS — "Знаеш ли, че..." (mymunche-style)
═══════════════════════════════════════════════════════════════ */
.mhv2__kf {
padding: 82px 0 90px;
background: var(--mhv2-kf-bg, var(--mhv2-cream));
}
.mhv2__kf-item { border-radius: var(--mhv2-kf-radius, 16px); }
.mhv2__kf-eyebrow { color: var(--mhv2-kf-eyebrow-color, var(--mhv2-bordeaux)) !important; }
.mhv2__kf-heading h2 {
font-family: var(--mhv2-f-display);
font-size: clamp(28px, 3.4vw, 42px);
color: var(--mhv2-bordeaux-deep);
text-align: center;
font-weight: 500;
letter-spacing: -.01em;
margin-bottom: 32px;
}
.mhv2__kf-carousel { position: relative; padding: 0 52px; max-width: 1080px; margin: 0 auto; box-sizing: border-box; width: 100%; }
@media (max-width: 700px) { .mhv2__kf-carousel { padding: 0 8px; } }
/* Carousel tween override — JS adds this class while running the
programmatic next/prev animation. Disables snap + native smooth so
the custom RAF tween renders without scroll-snap pin-jitter. */
.mhv2-carousel--animating {
scroll-snap-type: none !important;
scroll-behavior: auto !important;
}
.mhv2__kf-track {
display: flex;
justify-content: flex-start;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 8px 0 16px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
width: 100%;
box-sizing: border-box;
}
.mhv2__kf-track::-webkit-scrollbar { display: none; }
.mhv2__kf-item {
flex: 0 0 100%;
min-width: 100%;
scroll-snap-align: center;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 40px;
align-items: center;
background: white;
border-radius: 22px;
padding: 32px;
box-shadow: 0 10px 30px rgba(36,22,17,.08);
border: 1px solid rgba(107,30,50,.05);
position: relative;
box-sizing: border-box;
}
@media (max-width: 700px) {
/* Compact KF cards on mobile — square hero image was making each
"Знаеш ли че" card scroll a full screen height. Switch to a wider
image aspect, tighten paddings, and trim text leading so the card
fits in roughly half the previous height. */
.mhv2__kf-item {
grid-template-columns: 1fr;
gap: 12px;
padding: 14px;
flex: 0 0 90%;
min-width: 90%;
border-radius: 18px;
}
.mhv2__kf-img { aspect-ratio: 16 / 10; border-radius: 14px; }
.mhv2__kf-img::before { inset: 6px; border-radius: 10px; }
.mhv2__kf-text { gap: 6px; }
.mhv2__kf-eyebrow { font-size: 13px; }
.mhv2__kf-h3 { font-size: 20px; line-height: 1.2; }
.mhv2__kf-body { font-size: 13.5px; line-height: 1.45; }
.mhv2__kf-body p { margin: 0 0 4px; }
}
.mhv2__kf-img {
aspect-ratio: 1;
border-radius: 18px;
overflow: hidden;
background: var(--mhv2-cream-warm);
position: relative;
}
.mhv2__kf-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mhv2__kf-img::before {
content: '';
position: absolute; inset: 10px;
border: 2px solid rgba(107,30,50,.1);
border-radius: 14px;
pointer-events: none;
z-index: 1;
}
.mhv2__kf-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mhv2__kf-eyebrow {
font-family: var(--mhv2-f-body);
font-size: 13px;
font-weight: 600;
color: var(--mhv2-ink-soft);
letter-spacing: .04em;
text-transform: uppercase;
}
.mhv2__kf-h3 {
font-family: var(--mhv2-f-display);
font-size: clamp(22px, 2.6vw, 34px);
line-height: 1.15;
color: var(--mhv2-bordeaux-deep);
font-weight: 500;
margin: 0;
}
.mhv2__kf-body {
font-size: 14.5px;
line-height: 1.65;
color: var(--mhv2-ink-soft);
}
.mhv2__kf-body p { margin: 0 0 8px; }
/* Amber accent heart above item */
.mhv2__kf-item::before {
content: '♥';
position: absolute;
font-family: var(--mhv2-f-hand);
font-size: 28px;
color: var(--mhv2-amber);
top: -14px; left: 50%;
transform: translateX(-50%);
opacity: .55;
}
/* Carousel buttons styled consistent with popular products */
.mhv2__kf-carousel .mhv2__carousel-btn {
background: var(--mhv2-bordeaux);
color: var(--mhv2-cream);
width: 42px; height: 42px;
box-shadow: 0 6px 18px rgba(74,15,32,.25);
border: 0;
}
.mhv2__kf-carousel .mhv2__carousel-btn:hover { background: var(--mhv2-bordeaux-deep); }
.mhv2__kf-carousel .mhv2__carousel-btn--prev { left: 0; }
.mhv2__kf-carousel .mhv2__carousel-btn--next { right: 0; }
@media (max-width: 700px) {
.mhv2__kf-carousel .mhv2__carousel-btn { width: 36px; height: 36px; }
}
.mhv2__intro-text { font-family: var(--mhv2-f-display); font-size: clamp(24px, 3vw, 38px); color: var(--mhv2-bordeaux-deep); line-height: 1.35; font-weight: 500; font-style: italic; }
.mhv2__intro-squiggle { width: 200px; height: 20px; margin: 28px auto 0; color: var(--mhv2-amber); display: block; stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 2s ease-out .5s; }
.mhv2-r.in .mhv2__intro-squiggle, .mhv2__intro-wrap.in .mhv2__intro-squiggle { stroke-dashoffset: 0; }
/* ═══════════════════════════════════════════════════════════════
ZIGZAG STORY CARDS
═══════════════════════════════════════════════════════════════ */
.mhv2__story { padding: 50px 0 60px; background: var(--mhv2-story-bg, #FFFFFF); }
.mhv2__zigzag { display: grid; gap: 40px; }
.mhv2__zz-card { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.mhv2__zz-card:nth-child(even) { direction: rtl; }
.mhv2__zz-card:nth-child(even) > * { direction: ltr; }
@media (max-width: 900px) { .mhv2__zz-card, .mhv2__zz-card:nth-child(even) { grid-template-columns: 1fr; gap: 18px; direction: ltr; } }
.mhv2__zz-visual { position: relative; aspect-ratio: 5/3; border-radius: var(--mhv2-story-radius, var(--mhv2-r-xl)); overflow: hidden; box-shadow: var(--mhv2-shadow-lg); transition: transform .6s var(--mhv2-ease); background: linear-gradient(135deg, var(--mhv2-cream-warm) 0%, var(--mhv2-cream) 100%); display: block; }
.mhv2__zz-visual--link { cursor: pointer; text-decoration: none; color: inherit; }
.mhv2__zz-visual--link:hover .mhv2__zz-img { transform: scale(1.04); }
.mhv2__zz-card:nth-child(odd) .mhv2__zz-visual { transform: perspective(1400px) rotateY(-2.5deg) translateX(-6px); }
.mhv2__zz-card:nth-child(even) .mhv2__zz-visual { transform: perspective(1400px) rotateY(2.5deg) translateX(6px); }
.mhv2__zz-card:hover .mhv2__zz-visual { transform: perspective(1400px) rotateY(0) translateX(0) translateY(-4px); box-shadow: 0 32px 64px rgba(36,22,17,.18); }
.mhv2__zz-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--mhv2-ease); will-change: transform; }
.mhv2__zz-card:hover .mhv2__zz-img { transform: scale(1.06); }
.mhv2__zz-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(74,15,32,.22)); pointer-events: none; }
.mhv2__zz-badge { position: absolute; bottom: 22px; left: 22px; z-index: 2; background: rgba(36,22,17,.72); color: var(--mhv2-cream); backdrop-filter: blur(14px); padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,166,40,.35); }
.mhv2__zz-badge svg { width: 14px; height: 14px; stroke: var(--mhv2-amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.mhv2__zz-number { position: absolute; top: 20px; right: 24px; z-index: 2; font-family: var(--mhv2-f-display); font-size: 120px; font-weight: 700; color: var(--mhv2-story-number-color, rgba(250,243,231,.22)); opacity: .22; line-height: 1; }
.mhv2__zz-content { display: flex; flex-direction: column; gap: 18px; }
.mhv2__zz-eyebrow { font-family: var(--mhv2-f-hand); font-size: 30px; color: var(--mhv2-amber); transform: rotate(-1deg); display: inline-block; }
.mhv2__zz-heading { font-size: clamp(32px, 4vw, 46px); color: var(--mhv2-bordeaux-deep); line-height: 1.08; }
.mhv2__zz-text { font-size: 16px; color: var(--mhv2-ink-soft); line-height: 1.75; }
.mhv2__zz-text p { margin-bottom: 10px; }
.mhv2__zz-text p:last-child { margin-bottom: 0; }
.mhv2__zz-link { display: inline-flex; align-items: center; gap: 10px; background: var(--mhv2-bordeaux); color: var(--mhv2-cream) !important; font-family: var(--mhv2-f-body); font-weight: 500; font-size: 14px; padding: 12px 22px; border-radius: 14px; align-self: flex-start; position: relative; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 1px 2px rgba(36,22,17,.1), 0 6px 18px rgba(74,15,32,.18); transition: all .25s cubic-bezier(.25,.8,.25,1); letter-spacing: .02em; margin-top: 8px; }
.mhv2__zz-link:hover { gap: 14px; }
.mhv2__zz-link svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: transform .3s; }
.mhv2__zz-link:hover svg { transform: translateX(4px); }
/* ═══════════════════════════════════════════════════════════════
VALUE PROPS
═══════════════════════════════════════════════════════════════ */
.mhv2__values { padding: 72px 0 80px; background: var(--mhv2-vp-bg, var(--mhv2-cream)); border: 0; }
.mhv2__values-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
@media (max-width: 1200px) { .mhv2__values-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (max-width: 900px) { .mhv2__values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .mhv2__values-grid { grid-template-columns: 1fr; } }
.mhv2__value { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.mhv2__value-icon { width: 52px; height: 52px; border-radius: var(--mhv2-vp-icon-radius, 50%); background: var(--mhv2-vp-icon-bg, var(--mhv2-cream)); color: var(--mhv2-vp-icon-color, var(--mhv2-bordeaux)); display: grid; place-items: center; flex-shrink: 0; border: 1px solid rgba(107,30,50,.12); transition: all .3s var(--mhv2-ease-bounce); }
.mhv2__value:hover .mhv2__value-icon { transform: scale(1.1) rotate(-6deg); background: var(--mhv2-amber); color: white; }
.mhv2__value-icon .mpv2-icon, .mhv2__value-icon svg { width: 22px; height: 22px; stroke-width: 2; }
.mhv2__value-text { width: 100%; }
.mhv2__value-text strong { display: block; font-size: 14px; font-weight: 700; color: var(--mhv2-ink); margin-bottom: 2px; line-height: 1.25; }
.mhv2__value-sub { font-size: 12.5px; color: var(--mhv2-ink-soft); line-height: 1.4; }
/* ═══════════════════════════════════════════════════════════════
PRODUCT GRID (2×4 on desktop)
═══════════════════════════════════════════════════════════════ */
.mhv2__grid-wrap { padding: 52px 0; background: #FFFFFF; }
.mhv2__pgrid-wrap { position: relative; padding: 0 20px; }
.mhv2__pgrid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); gap: 16px; overflow: hidden; transition: opacity .3s ease; }
.mhv2__pgrid.page-loading { opacity: .3; }
@media (max-width: 900px) { .mhv2__pgrid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 8px 4px 16px; scrollbar-width: none; grid-template-columns: none; grid-template-rows: none; } .mhv2__pgrid::-webkit-scrollbar { display: none; } .mhv2__pgrid-wrap { padding: 0; } }
.mhv2__pg-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; background: white; color: var(--mhv2-bordeaux); box-shadow: var(--mhv2-shadow-md); display: grid; place-items: center; z-index: 3; cursor: pointer; transition: all .2s; border: 0; }
.mhv2__pg-nav:hover { background: var(--mhv2-amber); color: var(--mhv2-ink); transform: translateY(-50%) scale(1.1); }
.mhv2__pg-nav:disabled { opacity: .3; cursor: not-allowed; }
.mhv2__pg-nav svg { width: 22px; height: 22px; }
.mhv2__pg-prev { left: -10px; } .mhv2__pg-next { right: -10px; }
@media (max-width: 900px) { .mhv2__pg-nav { display: none; } }
.mhv2__pcard { background: white; border-radius: var(--mhv2-r-lg); overflow: hidden; box-shadow: var(--mhv2-shadow-sm); transition: all .4s var(--mhv2-ease); display: block; }
.mhv2__pcard.page-hidden { display: none; }
@media (max-width: 900px) { .mhv2__pcard { flex: 0 0 calc(50% - 6px); scroll-snap-align: start; } .mhv2__pcard.page-hidden { display: block; } }
@media (max-width: 500px) { .mhv2__pcard { flex: 0 0 78%; } }
.mhv2__pcard:hover { transform: translateY(-8px); box-shadow: var(--mhv2-shadow-lg); }
.mhv2__pcard-img { position: relative; aspect-ratio: 1; background: var(--mhv2-cream-warm); overflow: hidden; }
.mhv2__pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--mhv2-ease); }
.mhv2__pcard:hover .mhv2__pcard-img img { transform: scale(1.1); }
.mhv2__pcard-badge { position: absolute; top: 12px; left: 12px; background: var(--mhv2-amber); color: var(--mhv2-ink); padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; box-shadow: 0 4px 10px rgba(255,166,40,.4); z-index: 2; }
.mhv2__pcard-soldout {
position: absolute;
top: 12px; left: 12px;
z-index: 3;
padding: 6px 12px;
background: var(--mhv2-bordeaux-deep);
color: var(--mhv2-cream);
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: .02em;
box-shadow: 0 4px 12px rgba(74,15,32,.45);
text-transform: uppercase;
}
.mhv2__pcard.is-soldout .mhv2__pcard-img img { filter: grayscale(.75) brightness(.88); }
.mhv2__pcard.is-soldout .mhv2__pcard-name,
.mhv2__pcard.is-soldout .mhv2__pcard-price span { opacity: .6; }
.mhv2__pcard-info { padding: 16px 18px 20px; }
.mhv2__pcard-name { font-family: var(--mhv2-f-display); font-size: 18px; font-weight: 500; color: var(--mhv2-bordeaux-deep); line-height: 1.2; margin-bottom: 8px; min-height: 44px; }
.mhv2__pcard-price { display: flex; align-items: baseline; gap: 10px; }
.mhv2__pcard-price span:first-child { font-size: 20px; font-weight: 700; color: var(--mhv2-bordeaux); }
.mhv2__pcard-price:has(.mhv2__pcard-was) span:first-child { font-size: 24px; font-weight: 800; color: var(--mhv2-bordeaux-deep); letter-spacing: -.01em; }
.mhv2__pcard-was { font-size: 14px; color: var(--mhv2-ink-muted); text-decoration: line-through; }
/* "Спестяваш X €" pill — sage-green chip directly under price.
Renders on every product card (homepage popular products + related). */
.mhv2__pcard-savings {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-top: 6px;
padding: 3px 10px;
font-family: 'Inter', -apple-system, sans-serif;
font-size: 12px;
font-weight: 600;
color: #4A0F20;
background: color-mix(in oklab, #4A0F20 10%, #fff);
border: 1px solid color-mix(in oklab, #4A0F20 28%, transparent);
border-radius: 999px;
/* Fixed width so €1 / €10 / €100 all render identical. */
width: 160px;
box-sizing: border-box;
line-height: 1.3;
letter-spacing: .005em;
white-space: nowrap;
}
.mhv2__pcard-savings svg { color: #4A0F20; flex-shrink: 0; }
.mhv2__pcard-savings strong { font-weight: 800; }
/* ── Card uniformity — every popular-products card is the same height,
every name uses exactly 2 lines, every savings pill same size.
Cards without a savings pill get an invisible spacer so all cards
across all rows have the SAME total height. */
.mhv2__pgrid { grid-auto-rows: 1fr; }
.mhv2__pgrid > .mhv2__pcard { display: flex; flex-direction: column; height: 100%; }
.mhv2__pgrid > .mhv2__pcard .mhv2__pcard-info {
display: flex;
flex-direction: column;
flex: 1 1 auto;
/* Reserve space at the bottom for a savings pill — invisible spacer
that's identical in height to the rendered pill (28px = pill height
including its top margin of 6px). Cards WITH savings render the pill
on top of this reserved space; cards WITHOUT savings show the empty
reserved area. Total result: every card aligns to the same height. */
padding-bottom: 28px;
position: relative;
}
.mhv2__pgrid > .mhv2__pcard .mhv2__pcard-savings {
position: absolute;
bottom: 14px;
left: 14px;
}
.mhv2__pgrid > .mhv2__pcard .mhv2__pcard-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* Force exactly 2 visual lines — same min and max so the title row
never collapses on short titles or overflows on long ones. */
min-height: 2.4em;
max-height: 2.4em;
}
/* ═══════════════════════════════════════════════════════════════
TESTIMONIALS
═══════════════════════════════════════════════════════════════ */
.mhv2__test-wrap { padding: 40px 0; background: #FFFFFF; position: relative; }
.mhv2__test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .mhv2__test-grid { grid-template-columns: 1fr; } }
.mhv2__test { background: var(--mhv2-test-card-bg, white); padding: 20px 22px 18px; border-radius: var(--mhv2-test-card-radius, var(--mhv2-r-lg)); box-shadow: var(--mhv2-shadow-md); position: relative; transition: all .4s var(--mhv2-ease); margin: 0; font-size: 15px; }
.mhv2__test:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: var(--mhv2-shadow-lg); }
.mhv2__test:nth-child(even):hover { transform: translateY(-6px) rotate(.5deg); }
.mhv2__test-quote { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; color: var(--mhv2-amber-soft); opacity: .7; }
.mhv2__test-stars { color: var(--mhv2-amber); display: flex; gap: 2px; margin-bottom: 14px; }
.mhv2__test-stars svg { width: 16px; height: 16px; }
.mhv2__test-text { font-family: var(--mhv2-f-display); font-size: 15px; line-height: 1.5; color: var(--mhv2-ink); font-style: italic; margin: 0 0 14px; flex: 1; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.mhv2__test-author { display: flex; align-items: center; gap: 12px; }
.mhv2__test-avatar { width: 44px; height: 44px; border-radius: 999px; background: linear-gradient(135deg, var(--mhv2-bordeaux), var(--mhv2-amber)); color: white; font-weight: 600; display: grid; place-items: center; font-size: 17px; }
.mhv2__test-name { font-weight: 600; font-size: 14px; color: var(--mhv2-ink); }
.mhv2__test-meta { font-size: 12px; color: var(--mhv2-ink-muted); margin-top: 2px; }
/* ═══════════════════════════════════════════════════════════════
BEFORE / AFTER
═══════════════════════════════════════════════════════════════ */
.mhv2__ba-wrap {
padding: 110px 0 120px;
background: linear-gradient(135deg, var(--mhv2-ba-bg-1, var(--mhv2-bordeaux-deep)) 0%, var(--mhv2-ba-bg-2, var(--mhv2-bordeaux)) 100%);
color: var(--mhv2-cream);
position: relative;
overflow: hidden;
isolation: isolate;
}
.mhv2__ba-wrap > .mhv2__container { position: relative; z-index: 3; }
.mhv2__ba-heading h2 { color: var(--mhv2-cream); }
.mhv2__ba-heading .mhv2__eyebrow { color: var(--mhv2-amber); }
/* Asymmetric irregular edges — same treatment as LEP */
.mhv2__ba-edge { position: absolute; left: 0; right: 0; line-height: 0; pointer-events: none; z-index: 2; height: 70px; }
.mhv2__ba-edge svg { width: 100%; height: 100%; display: block; }
.mhv2__ba-edge--top { top: 0; }
.mhv2__ba-edge--bottom { bottom: 0; }
@media (max-width: 700px) { .mhv2__ba-edge { height: 44px; } }
/* Floating amber orbs — same "балони" as LEP */
.mhv2__ba-orb { position: absolute; pointer-events: none; z-index: 1; filter: blur(.5px); }
.mhv2__ba-orb--1 { top: -10%; left: -8%; width: 420px; animation: mhv2BaOrb1 22s ease-in-out infinite; }
.mhv2__ba-orb--2 { bottom: -12%; right: -8%; width: 380px; animation: mhv2BaOrb2 26s ease-in-out infinite; }
.mhv2__ba-orb--3 { top: 36%; right: 18%; width: 160px; animation: mhv2BaOrb3 18s ease-in-out infinite; }
@media (max-width: 700px) {
.mhv2__ba-orb--1 { width: 260px; }
.mhv2__ba-orb--2 { width: 220px; }
.mhv2__ba-orb--3 { display: none; }
}
@keyframes mhv2BaOrb1 { 0%, 100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(35px, 40px) rotate(-8deg); } }
@keyframes mhv2BaOrb2 { 0%, 100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-30px, -25px) rotate(6deg); } }
@keyframes mhv2BaOrb3 { 0%, 100% { transform: translate(0,0); } 33% { transform: translate(-20px, 15px); } 66% { transform: translate(15px, -20px); } }
.mhv2__ba { position: relative; aspect-ratio: 16/9; max-width: 1120px; margin: 0 auto; border-radius: var(--mhv2-r-xl); overflow: hidden; box-shadow: var(--mhv2-shadow-lg); cursor: ew-resize; user-select: none; background: var(--mhv2-bordeaux-deep); }
.mhv2__ba-after { position: absolute; inset: 0; }
.mhv2__ba-after img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mhv2__ba-before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; z-index: 2; clip-path: inset(0 50% 0 0); -webkit-clip-path: inset(0 50% 0 0); will-change: clip-path; }
.mhv2__ba-before img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; pointer-events: none; }
.mhv2__ba-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 999px; background: white; color: var(--mhv2-ba-handle-color, var(--mhv2-amber)); display: grid; place-items: center; box-shadow: 0 10px 28px rgba(0,0,0,.3); z-index: 3; cursor: ew-resize; }
.mhv2__ba-handle::before, .mhv2__ba-handle::after { content: ''; position: absolute; left: 50%; width: 2px; background: white; box-shadow: 0 0 8px rgba(0,0,0,.35); }
.mhv2__ba-handle::before { top: -500%; bottom: 50%; margin-bottom: 27px; transform: translateX(-50%); }
.mhv2__ba-handle::after { top: 50%; bottom: -500%; margin-top: 27px; transform: translateX(-50%); }
.mhv2__ba-handle svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.mhv2__ba-lbl { position: absolute; top: 20px; padding: 8px 16px; background: rgba(36,22,17,.72); color: var(--mhv2-cream); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; border-radius: 999px; backdrop-filter: blur(10px); z-index: 2; pointer-events: none; }
.mhv2__ba-lbl--before { left: 20px; }
.mhv2__ba-lbl--after { right: 20px; }
/* ═══════════════════════════════════════════════════════════════
FAQ · editorial
═══════════════════════════════════════════════════════════════ */
.mhv2__faq-wrap { padding: 80px 0 88px; background: var(--mhv2-faq-bg, linear-gradient(180deg, var(--mhv2-cream) 0%, var(--mhv2-cream-warm) 100%)); position: relative; overflow: hidden; }
.mhv2__faq-item { border-radius: var(--mhv2-faq-radius, var(--mhv2-r-lg)) !important; }
.mhv2__faq-item::before { background: var(--mhv2-faq-accent, var(--mhv2-amber)) !important; }
.mhv2__faq-icon { color: var(--mhv2-faq-accent, var(--mhv2-amber)) !important; background: color-mix(in srgb, var(--mhv2-faq-accent, var(--mhv2-amber)) 15%, transparent) !important; }
.mhv2__faq-wrap > .mhv2__container { position: relative; z-index: 1; }
.mhv2__faq { max-width: 880px; margin: 0 auto; display: grid; gap: 14px; }
.mhv2__faq-item { background: white; border-radius: var(--mhv2-r-lg); box-shadow: var(--mhv2-shadow-md); overflow: hidden; position: relative; transition: all .3s var(--mhv2-ease); }
.mhv2__faq-item::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--mhv2-amber); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--mhv2-ease); }
.mhv2__faq-item:hover, .mhv2__faq-item[data-expanded="true"] { box-shadow: var(--mhv2-shadow-lg); transform: translateY(-2px); }
.mhv2__faq-item:hover::before, .mhv2__faq-item[data-expanded="true"]::before { transform: scaleY(1); }
.mhv2__faq-q { list-style: none; padding: 20px 24px 20px 34px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--mhv2-f-display); font-weight: 500; font-size: clamp(16px, 1.7vw, 18px); color: var(--mhv2-bordeaux-deep); cursor: pointer; transition: color .2s; line-height: 1.3; }
.mhv2__faq-q { width: 100%; background: transparent; border: 0; text-align: left; }
.mhv2__faq-q:hover { color: var(--mhv2-amber); }
.mhv2__faq-icon { width: 40px; height: 40px; border-radius: 999px; background: var(--mhv2-amber-tint); display: grid; place-items: center; color: var(--mhv2-amber); transition: all .4s var(--mhv2-ease-bounce); font-family: var(--mhv2-f-display); font-size: 24px; flex-shrink: 0; }
.mhv2__faq-item[data-expanded="true"] .mhv2__faq-icon { transform: rotate(135deg); background: var(--mhv2-amber); color: white; box-shadow: 0 6px 16px rgba(255,166,40,.35); }
.mhv2__faq-a { color: var(--mhv2-ink-soft); font-size: 14px; line-height: 1.7; }
/* Force display: grid so browser doesn't hide children when is closed */
.mhv2__faq-item .mhv2__faq-a {
display: grid;
grid-template-rows: 0fr;
padding: 0 24px 0 34px;
transition: grid-template-rows .45s cubic-bezier(.25,.8,.25,1), padding .35s ease;
will-change: grid-template-rows;
}
.mhv2__faq-item .mhv2__faq-a > div {
overflow: hidden;
min-height: 0;
border-top: 1px solid transparent;
transition: border-color .3s ease, padding-top .35s ease;
padding-top: 0;
}
.mhv2__faq-item[data-expanded="true"] .mhv2__faq-a {
grid-template-rows: 1fr;
padding: 0 24px 20px 34px;
}
.mhv2__faq-item[data-expanded="true"] .mhv2__faq-a > div {
border-top-color: var(--mhv2-line-soft);
padding-top: 16px;
}
.mhv2__faq-a > div { border-top: 1px solid var(--mhv2-line-soft); padding-top: 18px; }
.mhv2__faq-a strong { color: var(--mhv2-bordeaux); font-weight: 600; }
.mhv2__faq-a p { margin-bottom: 8px; }
/* ═══════════════════════════════════════════════════════════════
PARTNERS MARQUEE
═══════════════════════════════════════════════════════════════ */
.mhv2__partners { padding: 42px 0; background: var(--mhv2-partners-bg, white); border-top: 1px solid var(--mhv2-line-soft); border-bottom: 1px solid var(--mhv2-line-soft); }
.mhv2__partner span { color: var(--mhv2-partners-text, var(--mhv2-bordeaux-deep)) !important; }
.mhv2__marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); margin-top: 32px; }
.mhv2__marquee-track { display: flex; gap: 60px; animation: mhv2Marquee 50s linear infinite; width: max-content; align-items: center; }
@keyframes mhv2Marquee { from { transform: translateX(0); } to { transform: translateX(-25%); } }
.mhv2__partner { flex-shrink: 0; height: 80px; display: grid; place-items: center; filter: grayscale(.5); opacity: .75; transition: all .3s; padding: 0 12px; }
.mhv2__partner:hover { filter: grayscale(0); opacity: 1; }
.mhv2__partner img { max-height: 60px; width: auto; object-fit: contain; }
.mhv2__partner span { font-family: var(--mhv2-f-display); font-size: 20px; color: var(--mhv2-bordeaux-deep); font-weight: 600; }
/* ═══════════════════════════════════════════════════════════════
MAP + COMPANY — premium business card with wavy cream island
═══════════════════════════════════════════════════════════════ */
.mhv2__map-wrap {
position: relative;
padding: 82px 0 90px;
background: var(--mhv2-cream);
overflow: hidden;
}
.mhv2__map-wrap > .mhv2__container { position: relative; z-index: 1; }
.mhv2__map {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 28px;
align-items: stretch;
}
@media (max-width: 900px) { .mhv2__map { grid-template-columns: 1fr; gap: 20px; } }
.mhv2__map-info {
position: relative;
padding: 44px 40px 40px;
background: #fff;
border-radius: var(--mhv2-r-xl);
box-shadow: 0 12px 32px rgba(74,15,32,.09), 0 2px 8px rgba(36,22,17,.04);
font-size: 15px;
overflow: hidden;
}
.mhv2__map-accent {
position: absolute;
top: 0; left: 0; right: 0;
height: 6px;
background: linear-gradient(90deg, var(--mhv2-bordeaux-deep) 0%, var(--mhv2-bordeaux) 50%, var(--mhv2-amber) 100%);
}
.mhv2__map-info h3 {
font-family: var(--mhv2-f-display);
font-size: clamp(28px, 3vw, 38px);
color: var(--mhv2-bordeaux-deep);
font-weight: 500;
letter-spacing: -.01em;
margin: 4px 0 14px;
line-height: 1.1;
}
.mhv2__map-company {
font-family: var(--mhv2-f-body);
font-size: 17px;
color: var(--mhv2-ink);
font-weight: 700;
letter-spacing: .01em;
margin: 0 0 22px;
padding-bottom: 20px;
border-bottom: 1px dashed rgba(107,30,50,.22);
}
.mhv2__map-details {
list-style: none;
padding: 0;
margin: 0 0 26px;
display: flex;
flex-direction: column;
gap: 14px;
}
.mhv2__map-details li {
display: grid;
grid-template-columns: 40px 1fr;
gap: 14px;
align-items: center;
}
.mhv2__map-ico {
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 12px;
background: linear-gradient(140deg, rgba(255,166,40,.18), rgba(107,30,50,.10));
color: var(--mhv2-bordeaux);
flex-shrink: 0;
}
.mhv2__map-ico svg { width: 18px; height: 18px; }
.mhv2__map-details li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mhv2__map-lbl {
font-family: var(--mhv2-f-hand);
font-size: 14px;
color: var(--mhv2-bordeaux);
line-height: 1;
transform: rotate(-.5deg);
transform-origin: left;
}
.mhv2__map-val {
font-size: 15px;
color: var(--mhv2-ink);
font-weight: 600;
word-break: break-word;
}
.mhv2__map-details a {
font-size: 15px;
color: var(--mhv2-bordeaux-deep);
font-weight: 700;
text-decoration: none;
border-bottom: 1px dashed rgba(107,30,50,.3);
align-self: flex-start;
transition: color .2s, border-color .2s;
}
.mhv2__map-details a:hover { color: var(--mhv2-amber); border-bottom-color: var(--mhv2-amber); }
.mhv2__map-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 22px;
background: var(--mhv2-amber, var(--mhv2-gold, #FFA628));
color: var(--mhv2-bordeaux-deep, #4A0F20);
font-family: var(--mhv2-f-body);
font-size: 14.5px;
font-weight: 700;
letter-spacing: .01em;
border-radius: 12px;
text-decoration: none;
box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 16px rgba(74,15,32,.28);
transition: box-shadow .25s ease, transform .2s ease;
}
.mhv2__map-cta svg { width: 16px; height: 16px; stroke: var(--mhv2-bordeaux-deep, #4A0F20); flex-shrink: 0; }
.mhv2__map-cta .mhv2__map-arrow { transition: transform .3s cubic-bezier(.25,.8,.25,1); }
.mhv2__map-cta:hover {
background: #FDB84A;
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 12px 24px -8px rgba(255,166,40,.55);
transform: translateY(-1px);
}
.mhv2__map-cta:hover .mhv2__map-arrow { transform: translateX(4px); }
.mhv2__map-visual {
position: relative;
min-height: 340px;
border-radius: var(--mhv2-r-xl);
overflow: hidden;
box-shadow: 0 12px 32px rgba(74,15,32,.12), 0 2px 8px rgba(36,22,17,.05);
background: var(--mhv2-cream-warm);
}
.mhv2__map-visual img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; display: block; }
.mhv2__map-visual .mhv2__map-iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.mhv2__map-placeholder {
display: grid;
place-items: center;
height: 100%;
min-height: 340px;
color: var(--mhv2-amber);
background: radial-gradient(circle at center, rgba(255,166,40,.15), transparent 70%), var(--mhv2-cream-warm);
}
.mhv2__map-placeholder svg { width: 80px; height: 80px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; opacity: .7; }
.mhv2__map-corner {
position: absolute;
top: 14px; right: 14px;
width: 52px; height: 52px;
background: var(--mhv2-bordeaux);
border-radius: 14px;
box-shadow: 0 6px 16px rgba(74,15,32,.35);
z-index: 2;
}
.mhv2__map-corner::before,
.mhv2__map-corner::after {
content: '';
position: absolute;
background: var(--mhv2-amber);
}
.mhv2__map-corner::before {
top: 50%; left: 14px; right: 14px; height: 2px;
transform: translateY(-50%);
border-radius: 1px;
}
.mhv2__map-corner::after {
top: 14px; bottom: 14px; left: 50%; width: 2px;
transform: translateX(-50%);
border-radius: 1px;
}
/* ═══════════════════════════════════════════════════════════════
CTA BANNER
═══════════════════════════════════════════════════════════════ */
.mhv2__cta { padding: 68px 0; background: linear-gradient(135deg, var(--mhv2-bordeaux-deep), var(--mhv2-bordeaux)); color: var(--mhv2-cream); text-align: center; position: relative; overflow: hidden; }
.mhv2__cta-orb { position: absolute; pointer-events: none; }
.mhv2__cta-orb--1 { top: -15%; right: -8%; width: 420px; animation: mhv2Orb 20s ease-in-out infinite; }
.mhv2__cta-orb--2 { bottom: -20%; left: -10%; width: 380px; animation: mhv2Orb 24s ease-in-out infinite reverse; }
@keyframes mhv2Orb { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(40px,-20px); } }
.mhv2__cta-wrap { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.mhv2__cta-wrap h2 { font-size: clamp(40px, 5.5vw, 64px); color: var(--mhv2-cream); margin-bottom: 20px; }
.mhv2__cta-wrap p { font-size: 17px; opacity: .88; margin-bottom: 36px; line-height: 1.6; }
/* ═══════════════════════════════════════════════════════════════
MOBILE RESPONSIVE FIXES
═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
.mhv2__hero { min-height: var(--mhv2-hero-min-h-m, 89vh) !important; padding: 46px 0 87px !important; overflow: hidden; }
.mhv2__hero-bg {
inset: 0 !important;
height: auto !important;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
}
.mhv2__hero-bg img { height: 100% !important; object-position: center 30% !important; }
.mhv2__hero-content { padding: 0 14px !important; max-width: 100% !important; width: 100%; box-sizing: border-box; }
.mhv2__hero-eyebrow { font-size: clamp(20px, 5.5vw, 26px) !important; margin-bottom: 2px; }
.mhv2__hero-title {
font-size: clamp(22px, 6.5vw, 32px) !important;
max-width: 100% !important;
margin: 4px auto 14px !important;
line-height: 1.15 !important;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
padding: 0 4px;
}
.mhv2__hero-sub {
font-size: 12.5px !important;
margin-bottom: 18px !important;
max-width: 100% !important;
padding: 0 6px !important;
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: break-word;
}
.mhv2__hero-actions { gap: 8px !important; margin-top: 16px !important; padding: 0 8px; }
.mhv2__hero-actions .mhv2__btn { padding: 10px 14px !important; font-size: 12.5px !important; }
.mhv2__hero-actions .mhv2__btn span { white-space: normal; }
.mhv2__hero-bg img { height: 100%; }
.mhv2__proof-carousel { margin-top: 24px !important; padding-top: 18px !important; }
.mhv2__btn { padding: 12px 20px; font-size: 13px; }
.mhv2__hero-actions { gap: 10px; }
.mhv2__proof { margin-top: 28px; padding-top: 22px; gap: 10px 18px; font-size: 12px; }
.mhv2__proof-item { font-size: 12px; }
.mhv2__hero-wave svg { height: 50px; }
.mhv2__blob--1, .mhv2__blob--2 { opacity: .5; }
.mhv2__intro { padding: 32px 0 22px; }
.mhv2__intro-text { font-size: 20px; line-height: 1.4; }
.mhv2__story { padding: 28px 0 32px; }
.mhv2__zigzag { gap: 24px; }
.mhv2__zz-heading { font-size: clamp(24px, 6vw, 32px); }
.mhv2__zz-text { font-size: 14.5px; }
.mhv2__zz-number { font-size: 70px; top: 12px; right: 16px; }
.mhv2__values { padding: 22px 0; }
.mhv2__values-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
.mhv2__value-icon { width: 42px; height: 42px; }
.mhv2__value-text strong { font-size: 13px; }
.mhv2__value-sub { font-size: 11.5px; }
.mhv2__grid-wrap { padding: 28px 0; }
.mhv2__pcard-name { font-size: 14px; min-height: 34px; margin-bottom: 4px; }
.mhv2__pcard-price span:first-child { font-size: 14px; }
.mhv2__pcard-info { padding: 10px 12px 12px; }
.mhv2__test-wrap { padding: 32px 0; }
.mhv2__test { padding: 22px 20px 20px; }
.mhv2__test-text { font-size: 15px; line-height: 1.5; margin-bottom: 16px; }
.mhv2__test-avatar { width: 36px; height: 36px; font-size: 14px; }
.mhv2__test-name { font-size: 13px; }
.mhv2__test-meta { font-size: 11px; }
.mhv2__test-quote { width: 32px; height: 32px; top: 14px; right: 14px; }
.mhv2__ba-wrap { padding: 32px 0; }
.mhv2__ba { aspect-ratio: 4/3; }
.mhv2__ba-handle { width: 40px; height: 40px; }
.mhv2__ba-handle svg { width: 16px; height: 16px; }
.mhv2__ba-lbl { font-size: 10px; padding: 5px 10px; top: 12px; }
.mhv2__ba-lbl--before { left: 12px; } .mhv2__ba-lbl--after { right: 12px; }
.mhv2__faq-wrap { padding: 32px 0; }
.mhv2__faq-q { padding: 18px 22px 18px 28px; font-size: 15px; gap: 14px; }
.mhv2__faq-icon { width: 30px; height: 30px; font-size: 18px; }
.mhv2__faq-a { padding: 0 22px 18px 28px; font-size: 14px; line-height: 1.6; }
.mhv2__partners { padding: 44px 0; }
.mhv2__partner { height: 60px; }
.mhv2__partner img { max-height: 44px; }
.mhv2__map-wrap { padding: 62px 0 70px; }
.mhv2__map-info { padding: 32px 22px 26px; }
.mhv2__map-info h3 { font-size: 26px; }
.mhv2__map-company { font-size: 15px; margin-bottom: 18px; padding-bottom: 16px; }
.mhv2__map-details { gap: 12px; margin-bottom: 20px; }
.mhv2__map-ico { width: 36px; height: 36px; border-radius: 10px; }
.mhv2__map-ico svg { width: 16px; height: 16px; }
.mhv2__map-lbl { font-size: 13px; }
.mhv2__map-val, .mhv2__map-details a { font-size: 14px; }
.mhv2__map-cta { padding: 12px 18px; font-size: 13.5px; }
.mhv2__map-visual, .mhv2__map-placeholder { min-height: 260px; }
.mhv2__map-visual img { min-height: 260px; }
.mhv2__map-corner { width: 42px; height: 42px; top: 10px; right: 10px; border-radius: 11px; }
.mhv2__map-corner::before { left: 11px; right: 11px; }
.mhv2__map-corner::after { top: 11px; bottom: 11px; }
.mhv2__section-heading { margin-bottom: 34px; }
.mhv2__section-heading h2 { font-size: clamp(26px, 7vw, 38px); }
.mhv2__eyebrow { font-size: 20px; }
}
/* Zigzag empty-image placeholder — renders subtle gradient so empty cards don't look broken */
.mhv2__zz-visual::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 28% 38%, rgba(255,166,40,0.10) 0%, transparent 48%),
radial-gradient(circle at 72% 68%, rgba(107,30,50,0.08) 0%, transparent 48%);
pointer-events: none;
z-index: 0;
}
.mhv2__zz-visual:has(.mhv2__zz-img) { background: transparent; }
.mhv2__zz-visual:has(.mhv2__zz-img)::before { display: none; }
/* Mobile story cards — shorter aspect */
@media (max-width: 700px) {
.mhv2__zz-visual { aspect-ratio: 16/10; }
}
/* ═══════ CAROUSEL (testimonials + trust band) ═══════ */
.mhv2__carousel { position: relative; padding: 0 42px; }
@media (max-width: 700px) { .mhv2__carousel { padding: 0 8px; } }
.mhv2__carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px; height: 48px;
background: rgba(255,255,255,.85);
backdrop-filter: blur(12px) saturate(1.4);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
border-radius: 999px;
box-shadow: 0 2px 4px rgba(74,15,32,.08), 0 12px 32px rgba(74,15,32,.16);
border: 1px solid rgba(107,30,50,.1);
display: grid; place-items: center;
color: var(--mhv2-bordeaux);
cursor: pointer;
z-index: 3;
transition: all .3s cubic-bezier(.25,.8,.25,1);
}
.mhv2__carousel-btn:hover {
background: var(--mhv2-bordeaux);
color: var(--mhv2-cream);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 2px 4px rgba(74,15,32,.12), 0 16px 40px rgba(74,15,32,.28);
}
.mhv2__carousel-btn svg { width: 20px; height: 20px; }
.mhv2__carousel-btn--prev { left: -8px; }
.mhv2__carousel-btn--next { right: -8px; }
@media (max-width: 700px) {
.mhv2__carousel-btn { width: 36px; height: 36px; }
.mhv2__carousel-btn--prev { left: -4px; }
.mhv2__carousel-btn--next { right: -4px; }
}
/* Vertical buffer so hover lift + shadow don't clip */
.mhv2__test-carousel, [data-carousel] { margin: -24px 0; }
/* Testimonials track */
.mhv2__test-track {
display: flex;
gap: 24px;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 40px 48px 56px;
scrollbar-width: none;
-ms-overflow-style: none;
/* Soft edge fade — cards flow off naturally */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}
.mhv2__test-track::-webkit-scrollbar { display: none; }
.mhv2__test-track > .mhv2__test {
flex: 0 0 clamp(260px, 34%, 380px);
scroll-snap-align: center;
box-sizing: border-box;
min-width: 0;
max-height: 280px;
overflow: hidden;
display: flex;
flex-direction: column;
opacity: .55;
transform: scale(.94);
transition: opacity .5s cubic-bezier(.25,.8,.25,1), transform .5s cubic-bezier(.25,.8,.25,1), box-shadow .3s ease;
will-change: transform, opacity;
}
.mhv2__test-track > .mhv2__test.is-active {
opacity: 1;
transform: scale(1);
box-shadow: 0 24px 56px rgba(36,22,17,.18), 0 8px 20px rgba(36,22,17,.08);
}
@media (max-width: 900px) {
.mhv2__test-track > .mhv2__test { flex: 0 0 72%; max-height: 260px; }
}
@media (max-width: 600px) {
.mhv2__test-track > .mhv2__test { flex: 0 0 82%; }
.mhv2__test-track { padding: 28px 24px 40px; -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); }
}
@media (max-width: 600px) {
.mhv2__test-track > .mhv2__test { flex: 0 0 calc(85% - 10px); }
}
/* ═══════ PROOF / TRUST BADGES carousel (in hero) ═══════ */
.mhv2__proof-carousel { margin: 44px auto 0; padding-top: 28px; max-width: 820px; border-top: 1px solid rgba(250,243,231,.18); position: relative; }
/* Auto-only variant — no manual buttons */
.mhv2__proof-carousel--auto .mhv2__carousel--inline { padding: 0; }
.mhv2__proof-carousel--auto .mhv2__carousel-btn { display: none !important; }
.mhv2__carousel--inline { padding: 0 52px; }
@media (max-width: 700px) { .mhv2__carousel--inline { padding: 0 40px; } }
.mhv2__carousel--inline .mhv2__carousel-btn {
background: rgba(250,243,231,.12);
color: var(--mhv2-cream);
border: 1px solid rgba(250,243,231,.25);
box-shadow: none;
backdrop-filter: blur(8px);
width: 36px; height: 36px;
}
.mhv2__carousel--inline .mhv2__carousel-btn:hover {
background: var(--mhv2-amber);
color: var(--mhv2-ink);
border-color: var(--mhv2-amber);
}
.mhv2__carousel--inline .mhv2__carousel-btn--prev { left: 0; }
.mhv2__carousel--inline .mhv2__carousel-btn--next { right: 0; }
.mhv2__proof-track {
display: flex;
gap: 40px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 4px 0;
scrollbar-width: none;
}
.mhv2__proof-track::-webkit-scrollbar { display: none; }
.mhv2__proof-track > .mhv2__proof-item {
flex: 0 0 calc(33.333% - 16px);
scroll-snap-align: start;
scroll-snap-stop: always;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--mhv2-cream);
opacity: .95;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
min-width: 0;
border-radius: var(--mhv2-hero-trust-radius, 10px);
padding: 6px 10px;
}
.mhv2__proof-track .mhv2__proof-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.mhv2__proof-track .mhv2__proof-icon svg { width: 100%; height: 100%; }
@media (max-width: 700px) {
.mhv2__proof-track {
gap: 10px;
padding: 4px 0;
scroll-snap-type: x mandatory;
}
.mhv2__proof-track > .mhv2__proof-item {
flex: 0 0 calc(50% - 5px);
min-width: 0;
font-size: 11px;
white-space: normal;
max-width: none;
justify-content: center;
text-align: center;
gap: 5px;
background: transparent;
padding: 0 4px;
scroll-snap-align: start;
scroll-snap-stop: always;
line-height: 1.25;
}
.mhv2__proof-track .mhv2__proof-icon { width: 14px; height: 14px; flex-shrink: 0; }
.mhv2__proof-track .mhv2__proof-text { overflow: visible; text-overflow: clip; word-break: break-word; }
.mhv2__carousel--inline { padding: 0 12px; }
}
/* ═══════ Header-group height reduction (announcement + rotating bar) ═══════ */
.rotating-text-bar, .rotating_text_bar {
padding-top: 4px !important;
padding-bottom: 4px !important;
min-height: 26px !important;
}
.rotating-text-bar__marquee, .rotating_text_bar__marquee,
.rotating-text-bar a, .rotating-text-bar span, .rotating-text-bar p {
font-size: 12px !important;
line-height: 1.2 !important;
}
.announcement-bar {
padding: 4px 14px !important;
min-height: 24px !important;
}
.announcement-bar__message, .announcement-bar p {
font-size: 11px !important;
line-height: 1.2 !important;
margin: 0 !important;
}
/* Mobile — announcement bar 20% thinner */
@media (max-width: 700px) {
.rotating-text-bar, .rotating_text_bar {
padding-top: 3px !important;
padding-bottom: 3px !important;
min-height: 21px !important;
}
.rotating-text-bar__marquee, .rotating_text_bar__marquee,
.rotating-text-bar a, .rotating-text-bar span, .rotating-text-bar p {
font-size: 10px !important;
}
.announcement-bar {
padding: 3px 10px !important;
min-height: 19px !important;
}
.announcement-bar__message, .announcement-bar p {
font-size: 9.5px !important;
}
}
/* ═══════ Testimonial separator line fix — the horizontal line between stars and text ═══════ */
.mhv2__test-stars { border-bottom: none !important; padding-bottom: 0 !important; }
.mhv2__test::before { display: none !important; }
/* Pause marquee on hover (let user inspect a logo) */
.mhv2__marquee:hover .mhv2__marquee-track { animation-play-state: paused; }
/* Active press effect — tactile modern feel */
.mhv2__btn:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
.mhv2__btn:focus-visible { outline: 2px solid var(--mhv2-amber); outline-offset: 3px; }
/* ═══════ VALUE PROPS — desktop grid + mobile carousel ═══════ */
.mhv2__values-carousel { display: none; }
@media (max-width: 700px) {
.mhv2__values-grid--desktop { display: none; }
.mhv2__values-carousel { display: block; padding: 0 42px; position: relative; }
}
.mhv2__values-track {
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 8px 4px 14px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.mhv2__values-track::-webkit-scrollbar { display: none; }
.mhv2__values-track > .mhv2__value {
flex: 0 0 calc(50% - 6px);
scroll-snap-align: start;
box-sizing: border-box;
min-width: 0;
background: transparent;
padding: 10px 8px;
border-radius: 0;
border: 0;
text-align: center;
}
.mhv2__values-track .mhv2__value-icon { display: grid; place-items: center; width: 62px; height: 62px; color: var(--mhv2-bordeaux); margin: 0 auto 12px; background: transparent; border: 0; }
.mhv2__values-track .mhv2__value-icon svg { width: 100%; height: 100%; stroke-width: 1.6; }
.mhv2__values-track .mhv2__value-text strong { font-family: var(--mhv2-f-display); font-size: 15px; color: var(--mhv2-bordeaux-deep); font-weight: 600; display: block; margin-bottom: 4px; }
.mhv2__values-track .mhv2__value-sub { font-size: 12.5px; color: var(--mhv2-ink-soft); line-height: 1.45; }
/* Card — 15% smaller vs original (was ~270px; now ~230px) */
.mhv2__pgrid > .mhv2__pcard {
scroll-snap-align: start;
min-width: 0;
box-sizing: border-box;
}
@media (max-width: 1100px) {
.mhv2__pgrid { grid-auto-columns: calc(33.333% - 12px); }
}
@media (max-width: 900px) {
.mhv2__pgrid { grid-auto-columns: calc(50% - 8px); grid-template-rows: repeat(2, auto) !important; }
}
@media (max-width: 600px) {
.mhv2__pgrid { grid-auto-columns: 72%; grid-template-rows: repeat(2, auto) !important; gap: 10px; }
}
/* Smaller text/padding inside card (-15%) — extra bottom padding reserves
space for the savings pill on EVERY card (visible on cards with savings,
empty space on cards without). Keeps all cards visually identical height. */
.mhv2__pgrid > .mhv2__pcard .mhv2__pcard-info { padding: 12px 14px 42px; }
.mhv2__pgrid > .mhv2__pcard .mhv2__pcard-name { font-size: 15px; min-height: 38px; }
.mhv2__pgrid > .mhv2__pcard .mhv2__pcard-price { font-size: 14.5px; }
.mhv2__pgrid > .mhv2__pcard .mhv2__pcard-badge { font-size: 10px; padding: 4px 9px; }
/* Popular products — more visible carousel buttons */
.mhv2__pgrid-carousel .mhv2__carousel-btn {
background: var(--mhv2-bordeaux);
color: var(--mhv2-cream);
width: 52px; height: 52px;
box-shadow: 0 2px 4px rgba(36,22,17,.1), 0 14px 36px rgba(74,15,32,.28);
border: 0;
}
.mhv2__pgrid-carousel .mhv2__carousel-btn:hover {
background: var(--mhv2-bordeaux-deep);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 2px 4px rgba(36,22,17,.14), 0 20px 44px rgba(74,15,32,.38);
}
.mhv2__pgrid-carousel .mhv2__carousel-btn svg { width: 24px; height: 24px; stroke-width: 2.5; }
.mhv2__pgrid-carousel .mhv2__carousel-btn--prev { left: -6px; }
.mhv2__pgrid-carousel .mhv2__carousel-btn--next { right: -6px; }
@media (max-width: 700px) {
.mhv2__pgrid-carousel .mhv2__carousel-btn { width: 44px; height: 44px; }
.mhv2__pgrid-carousel .mhv2__carousel-btn--prev { left: -10px; }
.mhv2__pgrid-carousel .mhv2__carousel-btn--next { right: -10px; }
}
/* ═══════ PGRID carousel (popular products) ═══════ */
.mhv2__pgrid-carousel { position: relative; padding: 0 52px; }
@media (max-width: 700px) { .mhv2__pgrid-carousel { padding: 0 8px; } }
.mhv2__pgrid {
display: flex;
gap: 14px;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
scroll-padding: 0 24px;
padding: 8px 6px 16px;
scrollbar-width: none;
}
.mhv2__pgrid::after { content: ''; flex: 0 0 1px; }
.mhv2__pgrid::-webkit-scrollbar { display: none; }
/* Column wrapper = 2 stacked cards.
Full-width carousel — more cols on larger viewports so 2 rows fit:
≥1700px → 7 cols / 1400-1700 → 6 cols / 1200-1400 → 5 cols
1000-1200 → 4 cols / 800-1000 → 3 cols / 600-800 → 2 cols. */
.mhv2__pcol {
flex: 0 0 calc(14.285% - 12px);
display: flex;
flex-direction: column;
gap: 10px;
scroll-snap-align: start;
min-width: 0;
box-sizing: border-box;
}
@media (max-width: 1700px) { .mhv2__pcol { flex: 0 0 calc(16.666% - 11px); } }
@media (max-width: 1400px) { .mhv2__pcol { flex: 0 0 calc(20% - 11px); } }
@media (max-width: 1200px) { .mhv2__pcol { flex: 0 0 calc(25% - 10px); } }
@media (max-width: 1000px) { .mhv2__pcol { flex: 0 0 calc(33.333% - 9px); } }
@media (max-width: 800px) { .mhv2__pcol { flex: 0 0 calc(50% - 8px); } }
/* Image aspect adjusted for full-width — keeps cards from blowing up while
still showing the product clearly. 5:4 = slightly landscape (height = 80% of
width). At 225px col: 180px image (vs 225 square) → saves ~45px per card. */
.mhv2__pgrid-carousel--full .mhv2__pcard-img { aspect-ratio: 5 / 4; }
/* Mobile pop-products overrides moved to "FINAL MOBILE OVERRIDES" block at end of file */
.mhv2__pcol .mhv2__pcard {
display: block;
background: white;
border-radius: var(--mhv2-r-lg);
overflow: hidden;
box-shadow: var(--mhv2-shadow-sm);
transition: all .35s var(--mhv2-ease);
border: 1px solid rgba(107,30,50,.06);
}
.mhv2__pcol .mhv2__pcard:hover { transform: translateY(-4px); box-shadow: var(--mhv2-shadow-lg); }
/* Card uniformity for popular products carousel — every card same height,
savings pill always reserves 28px so €1 vs €10 vs no-savings cards align. */
.mhv2__pcol .mhv2__pcard-info {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 12px 14px 42px;
position: relative;
}
.mhv2__pcol .mhv2__pcard-savings {
position: absolute;
bottom: 12px;
left: 14px;
margin-top: 0;
}
.mhv2__pcol .mhv2__pcard-name {
font-size: 14.5px;
margin-bottom: 6px;
font-family: var(--mhv2-f-display);
color: var(--mhv2-bordeaux-deep);
font-weight: 500;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 2.4em;
max-height: 2.4em;
}
.mhv2__pcol .mhv2__pcard-price { font-size: 16.5px; color: var(--mhv2-bordeaux); font-family: var(--mhv2-f-display); font-weight: 700; display: flex; gap: 10px; align-items: baseline; min-height: 29px; line-height: 1.2; }
.mhv2__pcol .mhv2__pcard-price:has(.mhv2__pcard-was) span:first-child {
font-size: 20px;
font-weight: 800;
color: var(--mhv2-bordeaux-deep);
letter-spacing: -.01em;
}
.mhv2__pcol .mhv2__pcard-was { font-size: 13px; color: var(--mhv2-ink-soft); text-decoration: line-through; font-weight: 400; }
.mhv2__pcol .mhv2__pcard-badge { position: absolute; top: 10px; left: 10px; background: var(--mhv2-amber); color: var(--mhv2-ink); padding: 4px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; z-index: 2; }
/* Highly visible carousel buttons on pgrid */
.mhv2__pgrid-carousel .mhv2__carousel-btn {
background: var(--mhv2-bordeaux) !important;
color: var(--mhv2-cream) !important;
width: 52px; height: 52px;
box-shadow: 0 2px 4px rgba(36,22,17,.1), 0 14px 36px rgba(74,15,32,.28) !important;
border: 0 !important;
backdrop-filter: none;
}
.mhv2__pgrid-carousel .mhv2__carousel-btn:hover {
background: var(--mhv2-bordeaux-deep) !important;
transform: translateY(-50%) scale(1.1);
box-shadow: 0 2px 4px rgba(36,22,17,.14), 0 20px 44px rgba(74,15,32,.38) !important;
}
.mhv2__pgrid-carousel .mhv2__carousel-btn svg { width: 22px; height: 22px; stroke-width: 2.5; }
.mhv2__pgrid-carousel .mhv2__carousel-btn--prev { left: 0; }
.mhv2__pgrid-carousel .mhv2__carousel-btn--next { right: 0; }
@media (max-width: 700px) {
.mhv2__pgrid-carousel .mhv2__carousel-btn { width: 42px; height: 42px; }
}
/* Modern pgrid swipe — card hover lift + image zoom on hover */
.mhv2__pcol .mhv2__pcard { position: relative; }
.mhv2__pcol .mhv2__pcard-img { overflow: hidden; }
.mhv2__pcol .mhv2__pcard-img img { transition: transform .7s cubic-bezier(.25,.8,.25,1); }
.mhv2__pcol .mhv2__pcard:hover .mhv2__pcard-img img { transform: scale(1.06); }
/* Visual polish — subtle gradient on card bottom for depth */
.mhv2__pcol .mhv2__pcard::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
background: linear-gradient(90deg, var(--mhv2-amber), var(--mhv2-bordeaux));
opacity: 0; transition: opacity .3s ease;
}
.mhv2__pcol .mhv2__pcard:hover::after { opacity: 1; }
/* ═══════ Modern swipe effect — fade + slide on scroll enter ═══════ */
@keyframes mhv2-pcol-reveal {
from { opacity: .4; transform: scale(.96) translateY(4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.mhv2__pcol {
animation: mhv2-pcol-reveal .55s cubic-bezier(.25,.8,.25,1) both;
animation-timeline: view();
animation-range: entry 0% entry 50%;
}
/* Fallback for browsers without view() timeline */
@supports not (animation-timeline: view()) {
.mhv2__pcol { animation: none; }
}
/* Soft side dimming via pseudo-element (smoother than mask-image) */
.mhv2__pgrid-carousel::before,
.mhv2__pgrid-carousel::after {
content: '';
position: absolute; top: 0; bottom: 0; width: 64px;
pointer-events: none; z-index: 2;
}
.mhv2__pgrid-carousel::before { left: 50px; background: linear-gradient(90deg, var(--mhv2-cream), transparent); }
.mhv2__pgrid-carousel::after { right: 50px; background: linear-gradient(270deg, var(--mhv2-cream), transparent); }
@media (max-width: 700px) {
.mhv2__pgrid-carousel::before, .mhv2__pgrid-carousel::after { width: 24px; }
.mhv2__pgrid-carousel::before { left: 0; }
.mhv2__pgrid-carousel::after { right: 0; }
}
/* ═══════ "Нашите подаръци" — full-width breakout ═══════
Carousel breaks out of .mhv2__container to span the entire viewport.
Heading stays centered inside the container above. Buttons are floating
elegant pills tucked against the viewport edges. */
.mhv2__container--full {
max-width: none;
width: 100%;
padding: 0;
margin: 0;
}
.mhv2__pgrid-carousel--full {
padding: 0 18px;
margin: 0;
}
/* Tighter spacing for full-width section so 2 rows + heading fit on screen */
.mhv2__grid-wrap--full { padding: 32px 0; }
.mhv2__grid-wrap--full .mhv2__section-heading { margin: 0 auto 28px; }
@media (max-width: 700px) {
.mhv2__grid-wrap--full { padding: 24px 0; }
.mhv2__grid-wrap--full .mhv2__section-heading { margin: 0 auto 18px; }
}
.mhv2__pgrid-carousel--full .mhv2__pgrid {
padding: 12px 6px 24px;
scroll-padding: 0 18px;
}
/* Buttons tucked against viewport edges with a soft halo */
.mhv2__pgrid-carousel--full .mhv2__carousel-btn--prev { left: 18px !important; }
.mhv2__pgrid-carousel--full .mhv2__carousel-btn--next { right: 18px !important; }
/* Stronger drop-shadow so buttons read clearly against the cards behind them */
.mhv2__pgrid-carousel--full .mhv2__carousel-btn {
box-shadow:
0 2px 6px rgba(36,22,17,.12),
0 18px 44px rgba(74,15,32,.32),
0 0 0 4px rgba(245,230,232,.5) !important;
backdrop-filter: blur(4px);
}
/* Soft fade-out at viewport edges (replaces the inset gradient) */
.mhv2__pgrid-carousel--full::before { left: 0 !important; width: 80px; background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 18px, transparent 100%); }
.mhv2__pgrid-carousel--full::after { right: 0 !important; width: 80px; background: linear-gradient(270deg, #FFFFFF 0%, #FFFFFF 18px, transparent 100%); }
@media (max-width: 1100px) {
.mhv2__pgrid-carousel--full { padding: 0 14px; }
.mhv2__pgrid-carousel--full .mhv2__carousel-btn--prev { left: 14px !important; }
.mhv2__pgrid-carousel--full .mhv2__carousel-btn--next { right: 14px !important; }
}
@media (max-width: 700px) {
.mhv2__pgrid-carousel--full { padding: 0 10px; }
.mhv2__pgrid-carousel--full .mhv2__pgrid { padding: 10px 6px 18px; scroll-padding: 0 10px; }
.mhv2__pgrid-carousel--full .mhv2__carousel-btn--prev { left: 10px !important; }
.mhv2__pgrid-carousel--full .mhv2__carousel-btn--next { right: 10px !important; }
.mhv2__pgrid-carousel--full::before, .mhv2__pgrid-carousel--full::after { width: 36px; }
}
/* ═══════ ZIGZAG — Mobile "Storybook" vertical ═══════ */
@media (max-width: 700px) {
.mhv2__story { padding: 34px 0 40px; position: relative; overflow: hidden; }
.mhv2__story::before,
.mhv2__story::after { content: none; }
.mhv2__zigzag {
display: flex;
flex-direction: column;
gap: 28px;
padding: 10px 16px 0;
margin: 0;
overflow: visible;
scroll-snap-type: none;
position: relative;
}
/* Each card = story page, image on top, content below */
.mhv2__zz-card,
.mhv2__zz-card:nth-child(even) {
flex: 1 1 auto;
display: grid;
grid-template-columns: 1fr;
gap: 0;
direction: ltr;
background: white;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 14px 36px rgba(74,15,32,.12), 0 2px 6px rgba(36,22,17,.05);
transform: translateY(24px);
opacity: 0;
transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
min-width: 0;
position: relative;
z-index: 1;
border: 1px solid rgba(107,30,50,.06);
}
.mhv2__zz-card.in {
transform: translateY(0);
opacity: 1;
}
.mhv2__zz-card:active { box-shadow: 0 8px 20px rgba(74,15,32,.10); }
/* Visual — image with Ken Burns zoom on enter */
.mhv2__zz-card .mhv2__zz-visual {
aspect-ratio: 4/3;
border-radius: 0;
box-shadow: none;
overflow: hidden;
position: relative;
transform: none !important;
}
.mhv2__zz-card .mhv2__zz-img {
transform: scale(1.08);
transition: transform 2.6s cubic-bezier(.2,.7,.2,1);
will-change: transform;
}
.mhv2__zz-card.in .mhv2__zz-img {
transform: scale(1);
}
.mhv2__zz-card:hover .mhv2__zz-visual { transform: none !important; }
.mhv2__zz-card .mhv2__zz-number {
position: absolute;
top: 14px; right: 18px;
font-family: var(--mhv2-f-hand);
font-size: 68px;
color: var(--mhv2-cream);
opacity: .7;
line-height: 1;
z-index: 2;
text-shadow: 0 4px 16px rgba(0,0,0,.25);
transform: rotate(-4deg);
}
/* Gradient overlay bottom of image for legibility */
.mhv2__zz-card .mhv2__zz-visual::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 40%;
background: linear-gradient(180deg, transparent 0%, rgba(36,22,17,.35) 100%);
pointer-events: none;
}
/* Content */
.mhv2__zz-card .mhv2__zz-content {
padding: 20px 22px 24px;
gap: 10px;
display: flex;
flex-direction: column;
}
.mhv2__zz-card .mhv2__zz-eyebrow {
font-size: 16px;
color: var(--mhv2-amber);
font-family: var(--mhv2-f-hand);
transform: rotate(-1deg);
display: inline-block;
align-self: flex-start;
}
.mhv2__zz-card .mhv2__zz-heading {
font-size: 24px;
line-height: 1.15;
color: var(--mhv2-bordeaux-deep);
font-family: var(--mhv2-f-display);
font-weight: 500;
}
.mhv2__zz-card .mhv2__zz-text { font-size: 14px; line-height: 1.6; color: var(--mhv2-ink-soft); }
.mhv2__zz-card .mhv2__zz-link {
margin-top: 6px;
padding: 10px 18px;
font-size: 13px;
border-radius: 999px;
background: var(--mhv2-bordeaux);
color: var(--mhv2-cream);
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background .25s ease, transform .25s ease;
}
.mhv2__zz-card .mhv2__zz-link:hover,
.mhv2__zz-card .mhv2__zz-link:active {
background: var(--mhv2-bordeaux-deep);
transform: translateX(2px);
}
.mhv2__zz-card .mhv2__zz-badge {
bottom: auto; top: 14px; left: 14px;
font-size: 10.5px;
padding: 6px 12px 6px 10px;
background: rgba(255,166,40,.96);
color: var(--mhv2-ink);
border: 0;
border-radius: 999px;
box-shadow: 0 6px 14px rgba(255,166,40,.38), 0 1px 3px rgba(36,22,17,.12);
letter-spacing: .02em;
font-weight: 700;
text-transform: uppercase;
z-index: 2;
gap: 5px;
}
.mhv2__zz-card .mhv2__zz-badge svg {
width: 11px; height: 11px;
stroke: var(--mhv2-bordeaux-deep);
fill: var(--mhv2-bordeaux-deep);
opacity: .9;
}
/* Price display inside story card — mobile */
.mhv2__zz-card .mhv2__zz-price {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
align-items: flex-start;
}
.mhv2__zz-card .mhv2__zz-price-row {
display: flex;
gap: 10px;
align-items: baseline;
flex-wrap: wrap;
}
.mhv2__zz-card .mhv2__zz-price-now {
font-family: var(--mhv2-f-display);
font-size: 24px;
font-weight: 700;
color: var(--mhv2-bordeaux);
letter-spacing: -.01em;
line-height: 1;
}
.mhv2__zz-card .mhv2__zz-price:has(.mhv2__zz-price-was) .mhv2__zz-price-now {
font-size: 28px;
font-weight: 800;
color: var(--mhv2-bordeaux-deep);
}
.mhv2__zz-card .mhv2__zz-price-was {
font-size: 14px;
color: var(--mhv2-ink-soft);
text-decoration: line-through;
text-decoration-thickness: 2px;
text-decoration-color: rgba(107,30,50,.45);
}
.mhv2__zz-card .mhv2__zz-price-pct {
padding: 3px 8px;
font-size: 11.5px;
border-radius: 7px;
}
.mhv2__zz-card .mhv2__zz-savings {
padding: 8px 14px 8px 10px;
font-size: 13.5px;
gap: 6px;
border-radius: 10px;
}
.mhv2__zz-card .mhv2__zz-savings svg { width: 16px; height: 16px; }
.mhv2__zz-card .mhv2__zz-savings strong { font-size: 14.5px; }
/* Sold-out overlay + badge */
.mhv2__zz-card.is-soldout .mhv2__zz-img { filter: grayscale(.7) brightness(.85); }
.mhv2__zz-card.is-soldout .mhv2__zz-link {
background: var(--mhv2-ink-soft);
pointer-events: auto;
}
.mhv2__zz-card .mhv2__zz-soldout {
position: absolute;
top: 14px; left: 14px;
padding: 6px 12px;
background: var(--mhv2-bordeaux-deep);
color: var(--mhv2-cream);
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
box-shadow: 0 6px 14px rgba(74,15,32,.32);
z-index: 3;
}
}
/* Desktop story cards — price + discount + savings badge */
.mhv2__zz-price { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; align-items: flex-start; }
.mhv2__zz-price-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.mhv2__zz-price-now { font-family: var(--mhv2-f-display); font-size: 28px; font-weight: 700; color: var(--mhv2-bordeaux); letter-spacing: -.01em; line-height: 1; }
.mhv2__zz-price:has(.mhv2__zz-price-was) .mhv2__zz-price-now { font-size: 36px; font-weight: 800; color: var(--mhv2-bordeaux-deep); }
.mhv2__zz-price-was { font-size: 17px; color: var(--mhv2-ink-soft); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(107,30,50,.45); }
.mhv2__zz-price-pct {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
background: var(--mhv2-bordeaux);
color: #fff;
font-family: var(--mhv2-f-body);
font-size: 13px;
font-weight: 800;
letter-spacing: .02em;
border-radius: 8px;
line-height: 1;
transform: rotate(-2deg);
box-shadow: 0 4px 10px rgba(107,30,50,.3);
}
/* Savings tag — small amber pill with pulse */
.mhv2__zz-savings {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px 4px 8px;
background: linear-gradient(135deg, var(--mhv2-amber) 0%, #FFB84D 100%);
color: var(--mhv2-bordeaux-deep);
font-family: var(--mhv2-f-body);
font-size: 11px;
font-weight: 700;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(255,166,40,.28), 0 1px 0 rgba(255,255,255,.4) inset;
position: relative;
animation: mhv2ZzSavingsPulse 2.8s ease-in-out infinite;
}
.mhv2__zz-savings svg { width: 12px; height: 12px; stroke: var(--mhv2-bordeaux-deep); stroke-width: 2; flex-shrink: 0; }
.mhv2__zz-savings strong { font-weight: 900; font-size: 12px; margin-left: 1px; }
@keyframes mhv2ZzSavingsPulse {
0%, 100% { transform: scale(1); box-shadow: 0 3px 10px rgba(255,166,40,.28), 0 1px 0 rgba(255,255,255,.4) inset; }
50% { transform: scale(1.025); box-shadow: 0 5px 14px rgba(255,166,40,.4), 0 1px 0 rgba(255,255,255,.4) inset; }
}
.mhv2__zz-card.is-soldout .mhv2__zz-img { filter: grayscale(.7) brightness(.85); }
.mhv2__zz-soldout {
position: absolute;
top: 18px; left: 18px;
padding: 8px 14px;
background: var(--mhv2-bordeaux-deep);
color: var(--mhv2-cream);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
box-shadow: 0 8px 20px rgba(74,15,32,.35);
z-index: 3;
}
/* ═══════ MOBILE — Modern swipe UX polish for all carousels ═══════ */
@media (max-width: 700px) {
/* Smooth ease-based scroll for all carousel tracks */
[data-carousel-track] {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* Modern carousel buttons — glass bordeaux, elegant, tactile */
.mhv2__carousel-btn,
.mhv2__pgrid-carousel .mhv2__carousel-btn {
width: 36px !important;
height: 36px !important;
background: rgba(107,30,50,.92) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(250,243,231,.18) !important;
color: var(--mhv2-cream) !important;
border-radius: 999px;
box-shadow: 0 6px 18px rgba(74,15,32,.28), 0 1px 3px rgba(36,22,17,.15) !important;
transition: background .3s ease, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease !important;
}
.mhv2__carousel-btn:active,
.mhv2__pgrid-carousel .mhv2__carousel-btn:active {
transform: translateY(-50%) scale(.92);
background: var(--mhv2-amber) !important;
color: var(--mhv2-ink) !important;
box-shadow: 0 2px 8px rgba(255,166,40,.5) !important;
}
.mhv2__carousel-btn svg,
.mhv2__pgrid-carousel .mhv2__carousel-btn svg {
width: 16px !important;
height: 16px !important;
stroke-width: 2.2 !important;
}
/* Scale/opacity effect on non-active carousel items (where marked) */
.mhv2__pcol {
transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
}
.mhv2__values-track > .mhv2__value {
transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
}
}
/* ═══════════════════════════════════════════════════════════════
FINAL MOBILE OVERRIDES — must stay LAST to win source-order
═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
/* HERO — clean rewrite, fits viewport fully, bigger mobile for breathing room */
.mhv2 .mhv2__hero { min-height: var(--mhv2-hero-min-h-m, 89vh); padding: 46px 0 87px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mhv2 .mhv2__hero-content { padding: 0 14px; max-width: 100%; width: 100%; box-sizing: border-box; margin: 0 auto; }
.mhv2 .mhv2__hero-eyebrow { font-size: 18px; margin-bottom: 0; display: inline-block; }
.mhv2 .mhv2__hero-title {
font-size: 20px;
max-width: 100%;
margin: 2px auto 10px;
line-height: 1.2;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
padding: 0;
}
.mhv2 .mhv2__hero-sub {
font-size: 12px;
margin-bottom: 14px;
max-width: 100%;
padding: 0 4px;
line-height: 1.5;
word-wrap: break-word;
}
.mhv2 .mhv2__hero-actions {
gap: 8px;
margin-top: 12px;
padding: 0 6px;
flex-wrap: wrap;
justify-content: center;
}
.mhv2 .mhv2__hero-actions .mhv2__btn {
padding: 10px 14px;
font-size: 12px;
white-space: normal;
}
/* Trust-badges in hero — compact spacing */
.mhv2 .mhv2__proof-carousel { margin: 16px auto 0; padding-top: 12px; max-width: 100%; border-top-width: 1px; }
.mhv2 .mhv2__carousel--inline { padding: 0 28px; }
.mhv2 .mhv2__carousel--inline .mhv2__carousel-btn { width: 26px; height: 26px; }
.mhv2 .mhv2__carousel--inline .mhv2__carousel-btn svg { width: 12px; height: 12px; }
.mhv2 .mhv2__proof-track { gap: 8px; padding: 2px 0; }
.mhv2 .mhv2__proof-track > .mhv2__proof-item {
flex: 0 0 calc(50% - 4px);
gap: 5px;
font-size: 10.5px;
padding: 0;
}
.mhv2 .mhv2__proof-track .mhv2__proof-icon { width: 13px; height: 13px; }
/* VALUE PROPS — text BELOW icon (column), full width, autoswipe via Liquid */
.mhv2__values-track > .mhv2__value {
flex: 0 0 calc(50% - 6px);
flex-direction: column;
align-items: center;
gap: 10px;
padding: 12px 6px;
background: transparent;
border: 0;
border-radius: 0;
text-align: center;
}
.mhv2__values-track .mhv2__value-icon {
width: 64px;
height: 64px;
margin: 0;
color: var(--mhv2-bordeaux);
background: transparent;
border: 0;
}
.mhv2__values-track .mhv2__value-icon svg { width: 100%; height: 100%; stroke-width: 1.6; }
.mhv2__values-track .mhv2__value-text { width: 100%; text-align: center; }
.mhv2__values-track .mhv2__value-text strong { font-size: 15px; margin-bottom: 3px; display: block; }
.mhv2__values-track .mhv2__value-sub { font-size: 12.5px; line-height: 1.4; }
.mhv2__values-carousel { padding: 0 32px; }
/* POPULAR PRODUCTS — 2 rows × 2 cols visible, compact cards, natural heights */
.mhv2__pgrid-carousel { padding: 0 8px; }
.mhv2__pgrid {
align-items: flex-start;
gap: 10px;
padding: 10px 6px 18px;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
}
.mhv2__pcol {
flex: 0 0 46%;
gap: 8px;
justify-content: flex-start;
align-self: flex-start;
}
/* Mobile — keep savings spacer so €1/€10/no-savings cards align */
.mhv2__pcol .mhv2__pcard-info { padding: 8px 10px 34px; overflow: hidden; }
.mhv2__pcol .mhv2__pcard-savings { bottom: 8px; left: 10px; }
.mhv2__pcol .mhv2__pcard-price { font-size: 13.5px; font-weight: 700; }
.mhv2__pcol .mhv2__pcard-price:has(.mhv2__pcard-was) span:first-child {
font-size: 15.5px;
font-weight: 800;
color: var(--mhv2-bordeaux-deep);
letter-spacing: -.01em;
}
.mhv2__pcol .mhv2__pcard-name {
font-size: 12px;
line-height: 14px;
height: 28px;
max-height: 28px;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.mhv2__pcol .mhv2__pcard-price { font-size: 12px; }
.mhv2__pcol .mhv2__pcard-was { font-size: 10.5px; }
.mhv2__pcol .mhv2__pcard-badge { font-size: 9px; padding: 3px 6px; top: 6px; left: 6px; }
.mhv2__pcol .mhv2__pcard-img img {
-webkit-user-drag: none;
-webkit-touch-callout: none;
user-select: none;
}
.mhv2__pgrid-carousel .mhv2__carousel-btn { width: 40px; height: 40px; }
.mhv2__pgrid-carousel .mhv2__carousel-btn svg { width: 18px; height: 18px; }
}
/* WISHIFYY: hide 3rd row card on mobile carousel */
@media screen and (max-width: 989.98px) {
.mhv2__pcol > .mhv2__pcard--row-3 {
display: none !important;
}
}
/* end WISHIFYY hide 3rd row */
/* === LEP fonts mobile fix: nowrap on one row + active highlight === */
@media (max-width:989.98px){
.mhv2__lep-fonts{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mhv2__lep-fonts::-webkit-scrollbar{display:none}
.mhv2__lep-fonts-label{flex-shrink:0;width:auto!important;margin-bottom:0!important;margin-right:6px}
.mhv2__lep-font-btn{flex-shrink:0;padding:6px 11px!important;font-size:12px!important;white-space:nowrap}
.mhv2__lep-font-btn.is-active{background:#FFA628!important;border-color:#FFA628!important;color:#4A0F20!important;box-shadow:0 0 0 3px rgba(255,166,40,.35),0 4px 14px rgba(255,166,40,.45);transform:scale(1.04);font-weight:600}
}
/* Italianno + Marck Script load — Monotype Corsiva alternatives (Latin chancery + Cyrillic script) */
@import url('https://fonts.googleapis.com/css2?family=Italianno&family=Marck+Script&display=swap');
/* === WISHIFYY MOBILE LEP FONT BUTTONS — rounded pill === */
@media (max-width: 989.98px) {
.mhv2__lep-fonts {
border-radius: 14px !important;
}
.mhv2__lep-font-btn {
border-radius: 999px !important;
-webkit-border-radius: 999px !important;
}
.mhv2__lep-font-btn.is-active {
background: #FFA628 !important;
border-color: #FFA628 !important;
color: #4A0F20 !important;
box-shadow: 0 0 0 3px rgba(255,166,40,.35), 0 4px 14px rgba(255,166,40,.45) !important;
transform: scale(1.04) !important;
font-weight: 600 !important;
}
}
/* === end LEP font button radius fix === */
/* === WISHIFYY MOBILE LEP FONT BUTTONS — rounded pill v2 === */
@media (max-width: 989.98px) {
.mhv2__lep-fonts {
border-radius: 18px !important;
-webkit-border-radius: 18px !important;
overflow: hidden !important;
}
.mhv2__lep-fonts-label {
border-radius: 999px !important;
}
.mhv2__lep-font-btn {
border-radius: 999px !important;
-webkit-border-radius: 999px !important;
}
.mhv2__lep-font-btn.is-active {
background: #FFA628 !important;
border-color: #FFA628 !important;
color: #4A0F20 !important;
box-shadow: 0 0 0 3px rgba(255,166,40,.35), 0 4px 14px rgba(255,166,40,.45) !important;
transform: scale(1.04) !important;
font-weight: 600 !important;
}
}
/* === end LEP font button radius v2 === */