:root {
    --mhs-wine: #230604;
    --mhs-gold: #f3ca76;
    --mhs-cream: #fff6e6;
}

.make-her-smile {
    position: relative;
    isolation: isolate;
    min-height: min(810px, calc(100vh - 140px));
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--mhs-cream);
    background: #1a0302 center / cover no-repeat;
}

.make-her-smile--welcome { background-image: url('../img/make-her-smile/entry-background.png'); }
.make-her-smile--collection {
    background-color: #2a0504;
    background-image: url('../img/make-her-smile/entry-background.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.make-her-smile--edition { background: radial-gradient(circle at 72% 35%, #69251a 0%, #350907 45%, #190202 100%); }
.make-her-smile--gallery { background: radial-gradient(circle at 50% 0%, #692317 0%, #330805 44%, #160100 100%); }
.make-her-smile--question {
    background-color: #170302;
    background-image: url('../img/make-her-smile/question-background.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    place-items: center start;
}

.make-her-smile__shade {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, rgba(23, 2, 1, .91), rgba(45, 5, 2, .56)), linear-gradient(0deg, rgba(13, 0, 0, .55), transparent 55%);
}

.make-her-smile--question .make-her-smile__shade {
    background: linear-gradient(90deg, rgba(20, 2, 1, .68) 0%, rgba(20, 2, 1, .38) 42%, rgba(20, 2, 1, .05) 72%), linear-gradient(0deg, rgba(16, 1, 0, .48), transparent 70%);
}

.make-her-smile__panel {
    position: relative;
    width: min(680px, calc(100% - 40px));
    padding: 68px 34px 92px;
    text-align: center;
}

.make-her-smile__eyebrow,
.make-her-smile__click-cue {
    margin: 0;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.make-her-smile__logo { display: block; width: min(190px, 55vw); max-height: 105px; margin: 14px auto 24px; object-fit: contain; }
.make-her-smile__eyebrow { margin-top: 22px; font-size: .95rem; color: var(--mhs-cream); text-transform: none; letter-spacing: .05em; }

.make-her-smile__hashtag {
    margin: 4px 0 19px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.55rem, 7vw, 5.4rem);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -.06em;
    perspective: 900px;
}

.make-her-smile__hashtag a {
    display: inline-block;
    color: #fdcc72 !important;
    -webkit-text-fill-color: #fdcc72;
    text-decoration: none;
    text-shadow: 1px 1px 0 #d9a74d, 2px 2px 0 #b77c24, 3px 3px 0 #7b4510, 9px 13px 18px rgba(0, 0, 0, .6);
    transform: rotateX(9deg) rotateY(-4deg);
    transform-style: preserve-3d;
    animation: mhs-gold-3d 3.2s ease-in-out infinite;
}

.make-her-smile__hashtag a:hover,
.make-her-smile__hashtag a:focus {
    color: #ffe5a0 !important;
    -webkit-text-fill-color: #ffe5a0;
    text-shadow: 1px 1px 0 #e7bd67, 2px 2px 0 #bd842f, 3px 3px 0 #7b4510, 12px 16px 22px rgba(0, 0, 0, .68);
}

.make-her-smile__copy { max-width: 440px; margin: 0 auto; font: 1.05rem/1.7 Georgia, serif; color: rgba(255,246,230,.9); }
.make-her-smile__click-cue { position: absolute; top: 53%; right: -145px; display: flex; align-items: center; gap: 7px; color: rgba(255,246,230,.82); font-size: .62rem; letter-spacing: .1em; white-space: nowrap; }
.make-her-smile__click-cue b { color: var(--mhs-gold); font-weight: 600; }
.make-her-smile__click-cue i { display:grid; width:22px; height:22px; place-items:center; border:1px solid rgba(243,202,118,.8); border-radius:50%; color:var(--mhs-gold); font-size:13px; font-style:normal; animation:mhs-arrow 1.4s ease-in-out infinite; }

.make-her-smile__question-panel { display: grid; justify-items: start; margin-left: clamp(34px, 9vw, 180px); padding-top: 18px; padding-bottom: 18px; text-align: left; transform: translateY(-34px); }
.make-her-smile__logo--question { width: min(132px, 40vw); max-height: 74px; margin: 0 0 18px; filter: drop-shadow(0 3px 10px rgba(0,0,0,.45)); }
.make-her-smile__question-panel h1 { margin: 0; font: 400 clamp(2rem, 4.9vw, 3.5rem)/1.08 Georgia, serif; color: #fff !important; -webkit-text-fill-color: #fff; text-shadow: 0 3px 15px rgba(0,0,0,.65); }
.make-her-smile__ornament { width: 150px; margin: 14px 0; color: var(--mhs-gold); text-align:center; }
.make-her-smile__ornament::before, .make-her-smile__ornament::after { display:inline-block; width:60px; margin:0 10px 4px; border-top:1px solid rgba(243,202,118,.75); content:''; }
.make-her-smile__actions { display:grid; width:min(294px, 100%); gap:10px; }
.make-her-smile__yes, .make-her-smile__not-now { width:100%; min-height:49px; border-radius:999px; font: 1rem Georgia, serif; text-align:center; }
.make-her-smile__yes { display:flex; justify-content:space-between; align-items:center; padding: 0 13px 0 29px; border:0; background:var(--mhs-gold); color:#3d0a08; cursor:pointer; text-decoration:none; }
.make-her-smile__yes span { display:grid; width:30px; height:30px; place-items:center; border-radius:50%; background:#fff1cf; }
.make-her-smile__not-now { display:grid; place-items:center; border:1px solid var(--mhs-gold); color:var(--mhs-gold) !important; -webkit-text-fill-color:var(--mhs-gold); text-decoration:none; }
.make-her-smile__not-now:hover { color: var(--mhs-wine) !important; -webkit-text-fill-color:var(--mhs-wine); background:var(--mhs-gold); }

.make-her-smile__collection-panel { width: min(940px, calc(100% - 40px)); padding: 32px 30px 48px; }
.make-her-smile__collection-logo { width: 110px; max-height: 58px; margin: 0 auto 13px; }
.make-her-smile__collection-panel h1 { margin: 0; color: var(--mhs-gold) !important; -webkit-text-fill-color: var(--mhs-gold); font: 400 clamp(2rem, 4vw, 3.25rem)/1.1 Georgia, serif; letter-spacing:.01em; text-shadow: 0 3px 16px rgba(0,0,0,.45); }
.make-her-smile__collection-rule { display:block; width: 180px; margin: 13px auto 15px; border-top: 1px solid rgba(243,202,118,.7); }
.make-her-smile__collection-intro { margin: 0 0 27px; color: #fff8ed; font: 1.08rem/1.45 Georgia, serif; }
.make-her-smile__collection-cards { display:flex; justify-content:center; gap:28px; }
.make-her-smile__collection-card { position:relative; display:flex; flex-direction:column; justify-content:flex-end; width: min(355px, 42vw); min-height:465px; padding: 22px 18px 28px; overflow:hidden; border: 1px solid #e7bb62; border-radius: 176px 176px 28px 28px; background: #250403; color: #fff8ed; cursor:pointer; text-decoration:none; box-shadow: 0 0 0 3px rgba(97,25,16,.9), 0 16px 36px rgba(0,0,0,.4), inset 0 0 34px rgba(255,211,123,.1); transition: transform .25s ease, box-shadow .25s ease; }
.make-her-smile__collection-card::before { position:absolute; z-index:1; inset:0; background: linear-gradient(180deg, rgba(19,1,0,.03) 22%, rgba(26,2,1,.18) 41%, rgba(20,1,1,.93) 100%); content:''; pointer-events:none; }
.make-her-smile__collection-card::after { position:absolute; z-index:2; inset:6px; border:1px solid rgba(255,223,145,.52); border-radius:168px 168px 21px 21px; content:''; pointer-events:none; }
.make-her-smile__collection-card:hover { transform: translateY(-7px) scale(1.012); box-shadow: 0 0 0 3px rgba(145,57,29,.95), 0 22px 40px rgba(0,0,0,.52), inset 0 0 38px rgba(255,211,123,.16); }
.make-her-smile__collection-card img { position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover; object-position:center 27%; filter:saturate(1.05) contrast(1.04); }
.make-her-smile__card-title, .make-her-smile__card-copy, .make-her-smile__card-rule, .make-her-smile__card-link { display:block; }
.make-her-smile__card-title { position:relative; z-index:3; margin-top:auto; color:var(--mhs-gold); font: 1.08rem/1.08 Georgia, serif; letter-spacing:.02em; text-shadow:0 2px 8px rgba(0,0,0,.65); }
.make-her-smile__card-title strong { font-size:1.56rem; font-weight:400; }
.make-her-smile__card-copy { position:relative; z-index:3; margin-top:11px; color:#fff !important; -webkit-text-fill-color:#fff; font: .93rem/1.3 Georgia, serif; text-shadow:0 2px 8px rgba(0,0,0,.75); }
.make-her-smile__card-rule { position:relative; z-index:3; margin:15px 24px; color:var(--mhs-gold); }
.make-her-smile__card-rule::before, .make-her-smile__card-rule::after { display:inline-block; width:66px; margin:0 9px 4px; border-top:1px solid rgba(243,202,118,.55); content:''; }
.make-her-smile__card-link { position:relative; z-index:3; color:var(--mhs-gold); font: 1rem/1.2 Georgia, serif; }
.make-her-smile__card-link i { display:inline-grid; width:25px; height:25px; margin-left:8px; place-items:center; border:1px solid rgba(243,202,118,.9); border-radius:50%; font-style:normal; box-shadow:inset 0 0 8px rgba(255,225,150,.18); }

.make-her-smile__edition-panel { position:relative; z-index:1; display:grid; justify-items:center; width:100%; min-height:inherit; padding:30px 0 48px; }
.make-her-smile__edition-heading { width:100%; text-align:center; }
.make-her-smile__edition-body { display:grid; grid-template-columns:minmax(320px, .86fr) minmax(380px, 1fr); align-items:center; gap:clamp(30px, 5vw, 82px); width:min(1190px, calc(100% - 72px)); margin:0 auto; }
.make-her-smile__edition-copy { width:100%; max-width:520px; color:#fff8ed; }
.make-her-smile__edition-logo { width:110px; max-height:62px; margin:0 auto 13px; }
.make-her-smile__edition-heading h1 { margin:0; color:var(--mhs-gold) !important; -webkit-text-fill-color:var(--mhs-gold); font:400 clamp(2rem, 4vw, 3.65rem)/1.08 Georgia, serif; text-shadow:0 3px 15px rgba(0,0,0,.45); }
.make-her-smile__edition-subtitle { max-width:580px; margin:12px auto 0; color:#fff !important; -webkit-text-fill-color:#fff; font:1.14rem/1.42 Arial, sans-serif; }
.make-her-smile__edition-rule { display:block; width:114px; margin:16px auto 22px; border-top:2px solid var(--mhs-gold); }
.make-her-smile__edition-copy h2 { margin:0 0 7px; color:var(--mhs-gold) !important; -webkit-text-fill-color:var(--mhs-gold); font:400 1.7rem Georgia, serif; }
.make-her-smile__edition-story { margin:0; color:#fff; font:1.02rem/1.58 Arial, sans-serif; }
.make-her-smile__edition-features { display:grid; gap:8px; margin:18px 0 24px; padding:0; list-style:none; font:.95rem/1.35 Arial, sans-serif; }
.make-her-smile__edition-features li { display:flex; align-items:center; gap:10px; }
.make-her-smile__edition-features li::before { display:grid; flex:0 0 23px; width:23px; height:23px; place-items:center; border:1px solid rgba(243,202,118,.75); border-radius:50%; color:var(--mhs-gold); content:'✦'; font-size:10px; }
.make-her-smile__edition-button { display:flex; align-items:center; justify-content:space-between; width:min(390px, 100%); min-height:53px; padding:0 15px 0 25px; border:0; border-radius:999px; background:var(--mhs-gold); color:#3d0a08; font:1rem Arial, sans-serif; cursor:pointer; box-shadow:0 10px 22px rgba(0,0,0,.28); }
.make-her-smile__edition-button span { display:grid; width:29px; height:29px; place-items:center; border-radius:50%; background:#fff1cf; }
.make-her-smile__edition-art { position:relative; justify-self:center; width:min(100%, 430px); height:min(72svh, 760px); min-height:560px; margin:0; overflow:hidden; border:1px solid rgba(243,202,118,.82); border-radius:20px; background:#100100; box-shadow:0 19px 42px rgba(0,0,0,.48), inset 0 0 0 5px rgba(243,202,118,.1); }
.make-her-smile__edition-art iframe { display:block; width:100%; height:100%; border:0; background:#100100; }
.make-her-smile__video-sound { position:absolute; z-index:2; top:14px; right:14px; display:grid; width:42px; height:42px; padding:0; place-items:center; border:1px solid rgba(255,234,183,.9); border-radius:50%; background:rgba(29,3,2,.76); color:var(--mhs-gold); cursor:pointer; box-shadow:0 4px 15px rgba(0,0,0,.42); font-size:18px; transition:transform .2s ease, background .2s ease; }
.make-her-smile__video-sound:hover, .make-her-smile__video-sound:focus-visible { transform:scale(1.08); background:rgba(70,20,7,.92); outline:0; }

.make-her-smile__gallery { position:relative; z-index:1; width:100%; padding:28px 0 52px; overflow:hidden; text-align:center; }
.make-her-smile__gallery-heading { color:#fff; }
.make-her-smile__gallery-logo { width:96px; max-height:54px; margin:0 auto 8px; }
.make-her-smile__gallery-heading p { margin:0 0 6px; color:var(--mhs-gold); font:.82rem/1 Arial, sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.make-her-smile__gallery-heading h1 { margin:0; color:var(--mhs-gold); font:400 clamp(2rem, 4vw, 3.55rem)/1.1 Georgia, serif; text-shadow:0 4px 16px rgba(0,0,0,.42); }
.make-her-smile__gallery-stage { position:relative; width:100%; height:clamp(385px, 58vh, 570px); margin:18px auto 0; }
.make-her-smile__gallery-track { position:relative; width:100%; height:100%; overflow:hidden; }
.make-her-smile__gallery-card { position:absolute; top:0; left:50%; width:clamp(220px, 23vw, 350px); height:100%; padding:0; overflow:hidden; border:1px solid rgba(243,202,118,.55); border-radius:24px; background:#1d0201; cursor:pointer; opacity:.45; box-shadow:0 17px 35px rgba(0,0,0,.42); transition:transform .55s cubic-bezier(.22,.84,.32,1), opacity .45s ease, filter .45s ease; }
.make-her-smile__gallery-card img { display:block; width:100%; height:100%; object-fit:cover; }
.make-her-smile__gallery-card:not(.is-active) { filter:brightness(.6) saturate(.72); }
.make-her-smile__gallery-card.is-active { z-index:3; border-color:var(--mhs-gold); opacity:1; filter:none; box-shadow:0 0 0 5px rgba(243,202,118,.13), 0 24px 50px rgba(0,0,0,.57); }
.make-her-smile__gallery-nav { position:absolute; z-index:5; top:50%; display:grid; width:47px; height:47px; padding:0; place-items:center; border:1px solid var(--mhs-gold); border-radius:50%; background:rgba(37,4,3,.82); color:var(--mhs-gold); cursor:pointer; font-size:24px; transform:translateY(-50%); transition:background .2s ease, transform .2s ease; }
.make-her-smile__gallery-nav:hover, .make-her-smile__gallery-nav:focus-visible { background:#6c2114; outline:0; }
.make-her-smile__gallery-nav--previous { left:clamp(13px, 8vw, 150px); }
.make-her-smile__gallery-nav--next { right:clamp(13px, 8vw, 150px); }
.make-her-smile__gallery-dots { display:flex; justify-content:center; gap:8px; margin:17px 0 12px; }
.make-her-smile__gallery-dots button { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(255,246,230,.42); cursor:pointer; transition:width .25s ease, background .25s ease; }
.make-her-smile__gallery-dots button.is-active { width:28px; border-radius:999px; background:var(--mhs-gold); }
.make-her-smile__gallery-hint { margin:0; color:rgba(255,246,230,.85); font:.92rem Arial, sans-serif; }
.make-her-smile__lightbox { width:min(1060px, calc(100vw - 48px)); max-width:none; height:min(90svh, 920px); padding:16px 78px; overflow:visible; border:1px solid rgba(243,202,118,.88); border-radius:20px; background:#170201; box-shadow:0 28px 80px rgba(0,0,0,.75); }
.make-her-smile__lightbox::backdrop { background:rgba(8,0,0,.83); backdrop-filter:blur(5px); }
.make-her-smile__lightbox img { display:block; width:100%; height:100%; object-fit:contain; }
.make-her-smile__lightbox-close, .make-her-smile__lightbox-nav { position:absolute; z-index:2; display:grid; width:45px; height:45px; padding:0; place-items:center; border:1px solid var(--mhs-gold); border-radius:50%; background:rgba(50,7,4,.9); color:var(--mhs-gold); cursor:pointer; font-size:24px; }
.make-her-smile__lightbox-close { top:-18px; right:-18px; }
.make-her-smile__lightbox-nav { top:50%; transform:translateY(-50%); }
.make-her-smile__lightbox-nav--previous { left:16px; }
.make-her-smile__lightbox-nav--next { right:16px; }

@keyframes mhs-gold-3d { 50% { transform: rotateX(3deg) rotateY(3deg) translateY(-5px) scale(1.018); text-shadow: 1px 1px 0 #e3a344, 2px 2px 0 #a95e19, 3px 3px 0 #712b09, 13px 19px 25px rgba(0,0,0,.7); } }
@keyframes mhs-arrow { 50% { transform: translateX(5px); } }

@media (max-width: 575px) {
    .make-her-smile { min-height: calc(100vh - 110px); }
    .make-her-smile__panel { width:100%; min-height:inherit; padding: 53px 25px 88px; }
    .make-her-smile__click-cue { position: static; justify-content: center; margin-top: 24px; font-size: .59rem; }
    .make-her-smile__question-panel { justify-items:center; text-align:center; padding-top:28px; padding-bottom:28px; transform: translateY(-16px); }
    .make-her-smile--question { place-items: center; }
    .make-her-smile__question-panel { margin-left: 0; }
    .make-her-smile--question { background-size: cover; background-position: 62% center; }
    .make-her-smile__question-panel h1 { font-size: clamp(2.2rem, 10.8vw, 3.4rem); }
    .make-her-smile__logo--question { margin-bottom:34px; }
    .make-her-smile--collection { display:block; min-height:auto; }
    .make-her-smile__collection-panel { width:100%; padding:35px 20px 48px; }
    .make-her-smile__collection-cards { gap:12px; }
    .make-her-smile__collection-card { width:calc(50% - 6px); min-height:365px; padding:16px 10px 18px; border-radius:90px 90px 18px 18px; }
    .make-her-smile__card-title { font-size:.88rem; }
    .make-her-smile__card-title strong { font-size:1.08rem; }
    .make-her-smile__card-copy, .make-her-smile__card-link { font-size:.76rem; }
    .make-her-smile__card-rule::before, .make-her-smile__card-rule::after { width:25px; margin:0 4px 4px; }
    .make-her-smile--edition { display:block; min-height:auto; }
    .make-her-smile__edition-panel { width:100%; padding:42px 24px 48px; }
    .make-her-smile__edition-body { grid-template-columns:1fr; width:100%; gap:28px; }
    .make-her-smile__edition-copy { max-width:none; text-align:center; }
    .make-her-smile__edition-logo { margin-left:auto; margin-right:auto; }
    .make-her-smile__edition-subtitle, .make-her-smile__edition-story { max-width:none; }
    .make-her-smile__edition-rule { margin-left:auto; margin-right:auto; }
    .make-her-smile__edition-features { text-align:left; }
    .make-her-smile__edition-button { margin:auto; }
    .make-her-smile__edition-art { width:min(100%, 390px); height:min(128vw, 640px); min-height:0; border-radius:16px; }
    .make-her-smile__gallery { padding:30px 0 42px; }
    .make-her-smile__gallery-stage { height:390px; margin-top:16px; }
    .make-her-smile__gallery-card { width:220px; border-radius:18px; }
    .make-her-smile__gallery-nav { width:40px; height:40px; font-size:20px; }
    .make-her-smile__gallery-nav--previous { left:8px; }
    .make-her-smile__gallery-nav--next { right:8px; }
    .make-her-smile__lightbox { width:calc(100vw - 28px); height:min(78svh, 680px); padding:12px 52px; border-radius:14px; }
    .make-her-smile__lightbox-nav { width:37px; height:37px; font-size:20px; }
    .make-her-smile__lightbox-nav--previous { left:7px; }
    .make-her-smile__lightbox-nav--next { right:7px; }
    .make-her-smile__lightbox-close { top:-13px; right:-8px; }
}
