/* ==========================================================
   CHANT M — STAGE 5 STOREFRONT
   ========================================================== */

.cm5-hero {
    position:relative;
    overflow:hidden;
    min-height:720px;
    display:flex;
    align-items:center;
    background:
        radial-gradient(
            circle at 78% 22%,
            rgba(237,198,230,.78),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #fffaf7 0%,
            #fff8fc 50%,
            #f8e5f3 100%
        );
}

.cm5-hero:before {
    content:"";
    position:absolute;
    width:620px;
    height:620px;
    right:-260px;
    top:-250px;
    border:1px solid rgba(180,119,164,.13);
    border-radius:50%;
}

.cm5-hero-grid {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:55px;
    align-items:center;
    padding-top:80px;
    padding-bottom:80px;
}

.cm5-hero-copy {
    position:relative;
    z-index:3;
}

.cm5-hero-copy h1 {
    max-width:780px;
    margin-bottom:25px;
}

.cm5-hero-copy h1 em {
    display:block;
    color:#a96f9c;
    font-weight:500;
}

.cm5-hero-copy > p {
    max-width:620px;
    color:#746a72;
    font-size:18px;
    margin-bottom:32px;
}

.cm5-hero-note {
    margin-top:38px;
    display:flex;
    align-items:center;
    gap:14px;
}

.cm5-hero-note > span {
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:white;
    border:1px solid rgba(80,45,68,.10);
    box-shadow:0 10px 30px rgba(65,33,55,.07);
}

.cm5-hero-note strong,
.cm5-hero-note small {
    display:block;
}

.cm5-hero-note strong {
    font-size:13px;
}

.cm5-hero-note small {
    color:#82777f;
    margin-top:2px;
}

.cm5-hero-visual {
    position:relative;
    min-height:510px;
}

.cm5-main-card {
    position:absolute;
    z-index:3;
    width:340px;
    height:420px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(3deg);
    border-radius:34px;
    padding:38px;
    background:#edc6e6;
    box-shadow:
        0 35px 90px rgba(104,51,89,.17),
        inset 0 0 70px rgba(255,255,255,.27);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.cm5-card-script {
    font-family:"Allura",cursive;
    font-size:66px;
    line-height:.9;
}

.cm5-card-copy {
    font-family:"Cormorant Garamond",serif;
    font-size:31px;
    line-height:1.05;
}

.cm5-orbit {
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(118,72,105,.16);
}

.orbit-one {
    width:455px;
    height:455px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

.orbit-two {
    width:535px;
    height:535px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

.cm5-floating-card {
    position:absolute;
    z-index:4;
    padding:18px 20px;
    border-radius:18px;
    background:rgba(255,255,255,.90);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.8);
    box-shadow:0 20px 50px rgba(69,35,58,.11);
}

.cm5-floating-card span,
.cm5-floating-card strong,
.cm5-floating-card small {
    display:block;
}

.cm5-floating-card span {
    color:#b27a9f;
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
}

.cm5-floating-card strong {
    font-family:"Cormorant Garamond",serif;
    font-size:25px;
}

.cm5-floating-card small {
    color:#81767d;
}

.float-one {
    top:70px;
    left:0;
}

.float-two {
    right:0;
    bottom:65px;
}

.cm5-mini-strip {
    background:#171317;
    color:white;
}

.cm5-mini-grid {
    min-height:86px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    align-items:center;
}

.cm5-mini-grid > div {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
}

.cm5-mini-grid > div + div {
    border-left:1px solid rgba(255,255,255,.12);
}

.cm5-mini-grid span {
    color:#edc6e6;
    font-size:11px;
    letter-spacing:.1em;
}

.cm5-mini-grid strong {
    font-size:13px;
    letter-spacing:.025em;
}

.cm5-section-top {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:35px;
}

.cm5-text-link {
    white-space:nowrap;
    margin-bottom:48px;
    font-size:13px;
    font-weight:700;
}

.cm5-occasions .occasion-card p {
    margin:5px 0 13px;
    max-width:260px;
    color:rgba(255,255,255,.74);
    font-size:13px;
}

.cm5-card-number {
    position:absolute !important;
    top:25px;
    left:27px;
    font-size:11px !important;
    font-weight:700;
    letter-spacing:.15em;
    opacity:.68 !important;
}

.cm5-explore {
    font-size:12px !important;
    font-weight:700;
}

.cm5-occasion-1 {
    background:
        linear-gradient(180deg,transparent 15%,rgba(37,22,33,.83)),
        linear-gradient(145deg,#e6c8dc,#ad7fa1);
}

.cm5-occasion-2 {
    background:
        linear-gradient(180deg,transparent 15%,rgba(37,22,33,.83)),
        linear-gradient(145deg,#eee0d0,#c7a899);
}

.cm5-occasion-3 {
    background:
        linear-gradient(180deg,transparent 15%,rgba(37,22,33,.83)),
        linear-gradient(145deg,#d7b6d0,#ae87ab);
}

.cm5-occasion-4 {
    background:
        linear-gradient(180deg,transparent 15%,rgba(37,22,33,.83)),
        linear-gradient(145deg,#efd7e7,#c594ba);
}

.cm5-occasion-5 {
    background:
        linear-gradient(180deg,transparent 15%,rgba(37,22,33,.83)),
        linear-gradient(145deg,#ddc9bc,#9f8179);
}

.cm5-occasion-6 {
    background:
        linear-gradient(180deg,transparent 15%,rgba(37,22,33,.83)),
        linear-gradient(145deg,#eacfe3,#a57599);
}

.cm5-delicacies {
    background:white;
}

.cm5-placeholder-mark {
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:"Allura",cursive;
    font-size:130px;
    color:rgba(89,50,77,.14);
}

.cm5-product-number {
    display:block;
    margin-bottom:8px;
    color:#ae759e;
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
}

.cm5-delicacy-1 .delicacy-art {
    background:linear-gradient(145deg,#f5d9ec,#fff4ed);
}

.cm5-delicacy-2 .delicacy-art {
    background:linear-gradient(145deg,#f1dbc2,#efd1e6);
}

.cm5-delicacy-3 .delicacy-art {
    background:linear-gradient(145deg,#eac8dc,#f8e9dc);
}

.cm5-delicacy-4 .delicacy-art {
    background:linear-gradient(145deg,#f4d7e8,#dbc1b3);
}

.cm5-delicacy-5 .delicacy-art {
    background:linear-gradient(145deg,#f8e7de,#e6c4dc);
}

.cm5-delicacy-6 .delicacy-art {
    background:linear-gradient(145deg,#e3c6b7,#f1d4e7);
}

.cm5-story {
    background:#fffaf7;
}

.cm5-story-grid {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:80px;
    align-items:center;
}

.cm5-story-art {
    position:relative;
    min-height:480px;
    border-radius:34px;
    background:
        radial-gradient(circle at 30% 25%,#fff 0 5%,transparent 6%),
        linear-gradient(145deg,#f0cae5,#fbefe6);
    overflow:hidden;
}

.cm5-story-circle {
    position:absolute;
    width:290px;
    height:290px;
    border-radius:50%;
    background:#171317;
    color:#edc6e6;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:100px;
    box-shadow:0 30px 70px rgba(31,21,28,.18);
}

.cm5-story-badge {
    position:absolute;
    right:30px;
    bottom:30px;
    padding:18px 23px;
    background:white;
    border-radius:17px;
    font-family:"Cormorant Garamond",serif;
    font-size:21px;
    line-height:1;
    box-shadow:0 16px 40px rgba(53,30,46,.10);
}

.cm5-story-copy p {
    color:#766d73;
    max-width:620px;
    font-size:17px;
}

.cm5-event {
    position:relative;
    overflow:hidden;
    min-height:460px;
    padding:70px;
    border-radius:36px;
    background:#171317;
    color:white;
    display:flex;
    align-items:center;
}

.cm5-event-copy {
    position:relative;
    z-index:3;
    max-width:750px;
}

.cm5-event-copy p {
    max-width:610px;
    color:rgba(255,255,255,.68);
    font-size:17px;
}

.cm5-event-mark {
    position:absolute;
    right:80px;
    top:50%;
    transform:translateY(-50%);
    font-size:240px;
    line-height:1;
    color:rgba(237,198,230,.09);
}

.cm5-light-button {
    border-color:rgba(255,255,255,.4);
    background:transparent;
    color:white;
}

.cm5-visit {
    background:white;
}

.cm5-visit-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.cm5-visit-grid p {
    color:#766d73;
    font-size:17px;
}

.cm5-location-card {
    position:relative;
    overflow:hidden;
    min-height:390px;
    padding:50px;
    border-radius:34px;
    background:
        radial-gradient(circle at 80% 15%,#fff 0 5%,transparent 6%),
        linear-gradient(145deg,#efd0e6,#f7eadf);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.cm5-location-card:before,
.cm5-location-card:after {
    content:"";
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(104,64,94,.15);
}

.cm5-location-card:before {
    width:330px;
    height:330px;
    right:-100px;
    top:-100px;
}

.cm5-location-card:after {
    width:220px;
    height:220px;
    right:-45px;
    top:-45px;
}

.cm5-location-pin {
    position:absolute;
    top:55px;
    left:55px;
    width:72px;
    height:72px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#171317;
    color:#edc6e6;
    font-size:30px;
}

.cm5-location-card > span {
    color:#98698d;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-weight:700;
}

.cm5-location-card strong {
    font-family:"Cormorant Garamond",serif;
    font-size:45px;
    line-height:1;
    margin-top:8px;
}

.cm5-location-card small {
    color:#746971;
    margin-top:8px;
}

/* MOBILE BOTTOM BAR */

.cm5-mobile-bar {
    display:none;
}

@media(max-width:1050px) {

    .cm5-hero-grid {
        grid-template-columns:1fr 1fr;
    }

    .cm5-story-grid {
        gap:45px;
    }
}

@media(max-width:760px) {

    body {
        padding-bottom:68px;
    }

    .cm5-hero {
        min-height:auto;
    }

    .cm5-hero-grid,
    .cm5-story-grid,
    .cm5-visit-grid {
        grid-template-columns:1fr;
    }

    .cm5-hero-grid {
        gap:15px;
        padding-top:65px;
        padding-bottom:35px;
    }

    .cm5-hero-visual {
        min-height:400px;
    }

    .cm5-main-card {
        width:255px;
        height:315px;
        padding:26px;
    }

    .cm5-card-script {
        font-size:51px;
    }

    .cm5-card-copy {
        font-size:24px;
    }

    .orbit-one {
        width:330px;
        height:330px;
    }

    .orbit-two {
        width:385px;
        height:385px;
    }

    .cm5-floating-card {
        padding:13px 15px;
    }

    .float-one {
        top:42px;
    }

    .float-two {
        bottom:45px;
    }

    .cm5-mini-grid {
        min-height:0;
        grid-template-columns:1fr;
        padding:8px 0;
    }

    .cm5-mini-grid > div {
        justify-content:flex-start;
        padding:11px 3px;
    }

    .cm5-mini-grid > div + div {
        border-left:0;
        border-top:1px solid rgba(255,255,255,.1);
    }

    .cm5-section-top {
        display:block;
    }

    .cm5-text-link {
        display:inline-block;
        margin:-22px 0 35px;
    }

    .cm5-story-art {
        min-height:360px;
    }

    .cm5-story-circle {
        width:225px;
        height:225px;
        font-size:80px;
    }

    .cm5-event {
        min-height:0;
        padding:45px 27px;
    }

    .cm5-event-mark {
        right:-40px;
        font-size:170px;
    }

    .cm5-location-card {
        min-height:320px;
        padding:32px;
    }

    .cm5-location-pin {
        top:32px;
        left:32px;
    }

    .cm5-location-card strong {
        font-size:38px;
    }

    .cm5-mobile-bar {
        position:fixed;
        z-index:1300;
        left:10px;
        right:10px;
        bottom:9px;
        height:59px;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        border:1px solid rgba(69,42,61,.10);
        border-radius:20px;
        background:rgba(255,250,247,.96);
        backdrop-filter:blur(15px);
        box-shadow:0 15px 45px rgba(40,23,35,.15);
    }

    .cm5-mobile-bar a {
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:2px;
        font-size:10px;
        font-weight:700;
    }

    .cm5-mobile-bar span:first-child {
        font-size:18px;
        line-height:1;
    }

    .cm-whatsapp {
        bottom:81px;
    }
}