@charset "UTF-8";

.introSection {
    padding-top: 30px;
}

.collectionTitle {
    position: relative;
    max-width: 520px;
    margin: 42px auto 0;
    padding: 45px 10px 37px;
    text-align: center;
    color: var(--circle-ink);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    background: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/guide-frame.webp?v=18c3a7b4') center/260px auto no-repeat;
}

.collectionTitle small {
    display: block;
    font: 15px/1.5 Garamond, serif;
    margin-top: 9px;
    color: var(--circle-gold);
}

.dressingMovie {
    margin-bottom: 60px;
}

.dressingCopy {
    margin-bottom: 75px;
}

.componentSection {
    padding: 35px 0 60px;
    scroll-margin-top: 35px;
}

.componentIntro .prose {
    margin: 30px auto 65px;
}

.productDetails {
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.detailItem {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px;
    align-items: center;
}

.detailItem.reverse .detailImg {
    order: 2;
}

.detailTxt {
    text-align: center;
    min-width: 0;
}

.detailLabel {
    font: 14px/1.5 Garamond, serif;
    color: var(--circle-gold);
    margin-bottom: 14px;
}

.detailLabel span {
    font-size: 25px;
    margin-left: 8px;
}

.detailTxt h3 {
    font-size: 28px;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 23px;
    color: #775520;
    text-wrap: balance;
}

.detailTxt .prose {
    font-size: 14px;
    letter-spacing: 0;
    line-height: 2;
}

.detailTxt .copyLine {
    display: inline;
}

.boxGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
    margin: 55px 0 35px;
}

.boxNote {
    text-align: center;
    font-size: 13px;
    line-height: 2;
}

.plainTitle {
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    margin: 35px 0 45px;
}

.classiqueBanner {
    display: block;
    width: 80%;
    margin: 50px auto 0;
}

.brandOverline {
    text-align: center;
    font: 20px Garamond, serif;
    color: var(--circle-gold);
    margin-top: 45px;
}

.brandOverline+.classiqueBanner {
    margin-top: 20px;
}

.eventDate {
    font-size: 25px;
    text-align: center;
    color: var(--circle-gold);
    margin: 0 0 45px;
}

.eventCopy {
    font-family: "fot-matisse-pron", "Noto Serif JP", "Yu Mincho", serif;
}

.eventVisual {
    margin-top: 60px;
}

.eventButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
    width: 400px;
    max-width: 90%;
    height: 70px;
    margin: 35px auto 0;
    border: 1px solid var(--circle-gold);
    font-size: 16px;
    color: var(--circle-ink);
}

.eventButton:hover {
    opacity: .8;
}

/* Shared body parts retain their original source and initialization. LP fixes are scoped here. */
.dearPage #itemContents {
    width: 100%;
}

.dearPage footer {
    width: 100%;
}

.dearPage #leftSp {
    display: none;
}

@media (max-width:1050px) and (min-width:761px) {
    .detailItem {
        gap: 20px;
    }

    .detailTxt h3 {
        font-size: 18px;
    }

    .detailTxt .prose {
        font-size: 12px;
    }

    .sectionTtl .jp {
        font-size: 24px;
    }
}

@media (max-width:587px) {
    .introSection {
        padding-top: 12px;
    }

    .collectionTitle {
        margin-top: 30px;
        font-size: 18px;
        padding: 32px 4px 28px;
        background-size: 200px auto;
    }

    .collectionTitle small {
        font-size: 11px;
    }

    .dressingMovie {
        margin-bottom: 45px;
    }

    .dressingCopy {
        margin-bottom: 65px;
    }

    .componentSection {
        padding: 0 0 65px;
        scroll-margin-top: 110px;
    }

    .componentIntro {
        display: flex;
        flex-direction: column;
    }

    .componentIntro .prose {
        order: -1;
        margin: 0 auto 35px;
    }

    .productDetails {
        margin-top: 40px;
        gap: 45px;
    }

    .detailItem {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    .detailItem.reverse .detailImg {
        order: 0;
    }

    .detailTxt {
        width: 100%;
    }

    .detailTxt h3 {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .detailTxt .prose {
        font-size: 12px;
    }

    .boxGrid {
        gap: 12px;
        margin: 35px 0 25px;
    }

    .boxGrid .mediaPlaceholder {
        padding: 8px;
    }

    .boxNote {
        font-size: 11px;
    }

    .plainTitle {
        font-size: 21px;
        margin: 0 0 35px;
    }

    .classiqueBanner {
        width: 100%;
        margin-top: 35px;
    }

    .eventDate {
        font-size: 21px;
        margin-bottom: 35px;
    }

    .eventVisual {
        margin-top: 40px;
    }

    .eventButton {
        height: 55px;
        font-size: 13px;
        gap: 25px;
    }

    .dearPage #leftSp.circleMenuOpen {
        display: block;
        position: fixed;
        top: 95px;
        left: 0;
        width: 85%;
        max-height: calc(100dvh - 95px);
        overflow-y: auto;
        z-index: 1000;
        padding: 15px 0;
        background: white;
        box-shadow: 3px 3px 15px #0003;
    }

    .dearPage .menuButtom {
        position: relative;
        width: 30px;
        height: 24px;
        cursor: pointer;
    }

    .dearPage .menuButtom::before {
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        width: 26px;
        height: 2px;
        background: #222;
        box-shadow: 0 8px #222, 0 16px #222;
    }
}

/* Final integration: preserve shared files, constrain only this LP. */
.dearPage #leftSp {
    display: none;
}

.dearPage .mainVisualWrap .visual {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width:587px) {
    .dearPage .mainVisualWrap .visual {
        width: 85%;
    }
}

@media (min-width:588px) and (max-width:1050px) {
    .dearPage #itemContents #mainContents {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dearPage #itemContents #mainContents .phot,
    .dearPage #itemContents #mainContents .name {
        width: 100%;
        max-width: 100%;
    }

    .dearPage #itemContents #mainContents .shouhinWrap>a {
        min-width: 0;
    }
}

/* Tablet footer integration: use the shared mobile arrangement before columns collide. */
@media (min-width:588px) and (max-width:1050px) {
    .dearPage #footerWrap .footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }

    .dearPage #footerWrap .footer-col:nth-child(3) {
        display: none;
    }

    .dearPage #footerWrap .footer-col:nth-child(4) {
        grid-column: 1 / -1;
        text-align: center;
    }

    .dearPage #footerWrap .snsList {
        width: 180px;
        max-width: 100%;
        margin: 25px auto;
        justify-content: center;
    }
}

/* Use the shared hamburger image after the original plugin initializes. */
.dearPage .menuButtom::before {
    content: none;
}

/* Three supplied PNGs, original XD matrix/clip and mixed text runs. */
.secretSection {
    position: relative;
    container-type: inline-size;
    padding: 20px 0 65px;
}

.secretStage {
    position: relative;
}

.secretComposition {
    position: relative;
    height: calc(var(--xd-stage-height) * var(--secret-unit));
    font-family: "fot-matisse-pron", "Noto Serif JP", "Yu Mincho", serif;
}

.secretPC {
    --secret-unit: max(.4px, calc(100cqi / 1218));
}

.secretSP {
    display: none;
}

.secretTitle {
    position: absolute;
    inset: 0;
    margin: 0;
    font-weight: 400;
    line-height: 0;
    letter-spacing: 0;
}

.secretHeadingLine {
    position: absolute;
    display: block;
    left: var(--xd-left);
    top: calc(var(--xd-top) * var(--secret-unit));
    width: var(--xd-width);
    text-align: center;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
}

.secretRun {
    display: inline;
    font-size: calc(var(--xd-size) * var(--secret-unit));
    line-height: 0;
    letter-spacing: calc(var(--xd-tracking) * var(--secret-unit));
    font-weight: 400;
}

.secretBaselineProbe {
    display: inline-block;
    width: 0;
    height: calc(var(--xd-baseline) * var(--secret-unit));
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-size: 0;
    line-height: 0;
}

.secretCopy {
    position: absolute;
    left: var(--xd-left);
    top: calc(var(--xd-top) * var(--secret-unit));
    width: var(--xd-width);
    height: calc(var(--xd-height) * var(--secret-unit));
    margin: 0;
    z-index: 1;
    text-align: center;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
}

.secretCopy p {
    margin: 0;
    padding: 0;
}

.secretCopy .secretLine {
    display: block;
    height: calc(var(--xd-leading) * var(--secret-unit));
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
}

.secretGirl,
.secretGirlMask {
    position: absolute;
    left: var(--xd-left);
    top: calc(var(--xd-top) * var(--secret-unit));
    width: var(--xd-width) !important;
    height: calc(var(--xd-height) * var(--secret-unit)) !important;
    pointer-events: none;
}

.secretGirl {
    object-fit: contain;
    transform: rotate(var(--xd-angle));
    transform-origin: 0 0;
    filter: drop-shadow(calc(var(--xd-shadow-x) * var(--secret-unit)) calc(var(--xd-shadow-y) * var(--secret-unit)) calc(var(--xd-shadow-blur) * var(--secret-unit)) rgb(0 0 0 / var(--xd-shadow-alpha)));
}

.secretGirlMask {
    overflow: hidden;
}

.secretGirlMask .secretGirl {
    left: calc(var(--xd-x) * var(--secret-unit));
    width: calc(var(--xd-w) * var(--secret-unit)) !important;
}

.secretSection .moviePlaceholder {
    margin-top: 0;
}

/* The rotated right PNG reaches outside the design column. */
@media (min-width:588px) and (max-width:1113px) {
    .secretStage {
        overflow: clip;
        clip-path: inset(0);
    }
}

/* Letter and first-MAYLA copy only. Prices, purchase and brand retain their CSS. */
.letterSection {
    position: relative;
    container-type: inline-size;
    background: #fff;
    margin: 70px 0 60px;
    padding: 0;
}

.letterSection::before,
.letterSection::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(233 * 100cqi / 1218);
    background-repeat: no-repeat;
    background-size: 19.12968% auto;
    pointer-events: none;
}

.letterSection::before {
    top: 0;
    background-image: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/letter-corner-tl.webp?v=9a37dc4f'), url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/letter-corner-tr.webp?v=870ca42a');
    background-position: left top, right top;
}

.letterSection::after {
    bottom: 0;
    background-image: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/letter-corner-bl.webp?v=57a0a619'), url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/letter-corner-br.webp?v=470925d3');
    background-position: left bottom, right bottom;
}

.editorialComposition {
    --editorial-unit: max(.45px, calc(100cqi / 1218));
    font-family: "fot-matisse-pron", "Noto Serif JP", "Yu Mincho", serif;
    color: #766c65;
}

.editorialSP {
    display: none;
}

.editorialComposition .secretRun {
    font-size: calc(var(--xd-size) * var(--editorial-unit));
    letter-spacing: calc(var(--xd-tracking) * var(--editorial-unit));
}

.editorialTitle {
    position: relative;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    font-weight: 400;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    color: #967441;
}

.editorialCopy {
    margin: 0 auto;
    padding: 0;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
}

.editorialCopy p {
    margin: 0;
    padding: 0;
}

.editorialLine {
    display: block;
    min-height: calc(var(--xd-leading) * var(--editorial-unit));
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
}

.editorialBaselineProbe {
    display: inline-block;
    width: 0;
    height: calc(var(--xd-baseline) * var(--editorial-unit));
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    font-size: 0;
    line-height: 0;
}

.letterComposition {
    padding: calc(225 * var(--editorial-unit)) 0 calc(146 * var(--editorial-unit));
}

.letterComposition .editorialTitle {
    --xd-leading: 86;
    width: 79.88506%;
    height: calc(178 * var(--editorial-unit));
    margin: 0 auto calc(81 * var(--editorial-unit));
}

.letterComposition .letterCopy {
    width: 61.74056%;
}

.firstMaylaCopyStage {
    container-type: inline-size;
}

.firstMaylaComposition .editorialTitle {
    --xd-leading: 92;
    width: 100%;
    height: calc(92 * var(--editorial-unit));
    margin: 0 auto calc(80.13037109375 * var(--editorial-unit));
    background: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/first-mayla-ornaments.webp?v=53b5a20e') center top/50.49322% auto no-repeat;
}

.firstMaylaComposition .firstMaylaCopy {
    width: 78.65353%;
}

@media (max-width:587px) {
    .secretSection {
        padding: 10px 0 45px;
    }

    .secretPC {
        display: none;
    }

    /* Independent SP XD: no girl nodes; 16/20/30pt text and 30-unit rows. */
    .secretSP {
        display: block;
        --secret-unit: max(.75px, calc(100cqi / 534));
    }

    .letterSection {
        margin: 10px 0 95px;
        padding: 0;
    }

    .editorialPC {
        display: none;
    }

    .editorialSP {
        display: block;
        --editorial-unit: max(.75px, calc(100cqi / 612));
    }

    /* At narrow widths, keep 12px copy and let long lines increase their height. */
    .editorialSP .editorialLine {
        white-space: normal;
        font-size: calc(var(--xd-base-size, 20) * var(--editorial-unit));
        line-height: calc(var(--xd-leading) * var(--editorial-unit));
        text-wrap: balance;
    }

    .editorialSP .editorialBaselineProbe {
        display: none;
    }

    .editorialSP .secretRun {
        line-height: inherit;
    }

    .letterComposition.editorialSP {
        padding: calc(92 * var(--editorial-unit)) 0 calc(66 * var(--editorial-unit));
    }

    .letterComposition.editorialSP .editorialTitle {
        --xd-leading: 30;
        width: calc(100% - 32px);
        height: auto;
        margin: 0 auto calc(29 * var(--editorial-unit));
    }

    .letterComposition.editorialSP .editorialTitle .secretRun {
        color: #967441 !important;
    }

    .letterComposition.editorialSP .letterCopy {
        width: 87.2549%;
    }

    .firstMaylaComposition.editorialSP .editorialTitle {
        --xd-leading: 30;
        display: grid;
        place-content: center;
        height: calc(43.45705304827 * var(--editorial-unit));
        margin: 0 auto calc(18.54294695173 * var(--editorial-unit));
        background-size: calc(292.86068870908 * var(--editorial-unit)) auto;
        background-position: center center;
    }

    .firstMaylaComposition.editorialSP .editorialTitle .secretRun {
        color: #967441 !important;
    }

    .firstMaylaComposition.editorialSP .firstMaylaCopy {
        width: 87.2549%;
    }
}

/* User supplied Adobe project qhy2mwk: FOT-Matisse ProN M, weight 500. */
.dearPage #mainTop.seriesPage {
    font-weight: 500;
}

.secretComposition,
.secretRun,
.editorialComposition,
.editorialTitle,
#skirt .skirtDetailCopy,
#skirt .skirtDetailHeading {
    font-family: "fot-matisse-pron", "Noto Serif JP", "Yu Mincho", serif;
    font-weight: 500;
}

/* User reference: skirt Detail 01/02, 1218-unit PC columns and source baselines. */
#skirt .productDetails {
    container-type: inline-size;
    --detail-unit: calc(100cqi / 1218);
    gap: 0;
}

#skirt .detailItem+.detailItem {
    margin-top: calc(64 * var(--detail-unit));
}

#skirt .detailItem {
    grid-template-columns: 569fr 610fr;
    gap: calc(39 * var(--detail-unit));
    align-items: start;
}

#skirt .detailItem.reverse {
    grid-template-columns: 610fr 569fr;
}

#skirt .skirtDetailCopy {
    position: relative;
    height: calc(427 * var(--detail-unit));
    text-align: left;
    font-family: "fot-matisse-pron", "Noto Serif JP", "Yu Mincho", serif;
    font-weight: 500;
}

#skirt .skirtDetailHeading {
    position: absolute;
    inset: 0;
    margin: 0;
    font-size: 0;
    line-height: 0;
    text-align: left;
    letter-spacing: 0;
    font-weight: 400;
}

#skirt .skirtDetailLine {
    position: absolute;
    display: block;
    left: 0;
    top: calc(var(--detail-y) * var(--detail-unit));
    width: 100%;
    font-size: calc(var(--detail-size) * var(--detail-unit));
    line-height: 0;
    letter-spacing: 0;
    white-space: nowrap;
}

#skirt .skirtDetailProbe {
    display: inline-block;
    width: 0;
    height: calc(var(--detail-probe) * var(--detail-unit));
    vertical-align: baseline;
}

#skirt .skirtDetailRule {
    position: absolute;
    top: calc(var(--detail-rule-y) * var(--detail-unit));
    left: 0;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: max(.5px, var(--detail-unit)) solid #707070;
    opacity: .5;
}

#skirt .skirtDetailBody,
#skirt .skirtDetailBody p {
    position: static;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    text-align: left;
    letter-spacing: 0;
}

@media(max-width:587px) {
    #skirt .productDetails {
        gap: 48px;
    }

    #skirt .detailItem+.detailItem {
        margin-top: 0;
    }

    #skirt .detailItem,
    #skirt .detailItem.reverse {
        gap: 28px;
    }

    #skirt .skirtDetailCopy {
        height: auto;
    }

    #skirt .skirtDetailHeading {
        position: static;
    }

    #skirt .skirtDetailLine {
        position: static;
        font-size: calc(var(--detail-size) * .44px);
        line-height: 1.7;
        white-space: normal;
    }

    #skirt .skirtDetailProbe {
        display: none;
    }

    #skirt .skirtDetailRule {
        position: static;
        margin: 18px 0;
    }

    #skirt .skirtDetailBody .skirtDetailLine {
        line-height: 2;
    }
}

/* Responsive PC content; the user explicitly superseded the XD SP board. */
.dearPage #first-mayla {
    container-type: inline-size;
}

/* The original 862x161 purchase frame keeps its proportion at every width. */
.dearPage #first-mayla .productBtn {
    max-width: 590px;
    container-type: inline-size;
}

.dearPage #first-mayla .productBtn a {
    height: auto;
    aspect-ratio: 862 / 161;
    background-size: 100% 100%;
}

.dearPage #first-mayla .productImg {
    width: 18.64407%;
    height: 100%;
    padding: calc(10 * 100cqi / 590);
}

.dearPage #first-mayla .productImg img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.dearPage #first-mayla .productTxtWrap {
    width: 54.23729%;
    height: 100%;
    padding: 0;
}

.dearPage #first-mayla .productName {
    font-size: max(10px, calc(17 * 100cqi / 590));
    line-height: 1.5;
}

.dearPage #first-mayla .productYen {
    font-size: max(9px, calc(14 * 100cqi / 590));
    line-height: 1.5;
}

.dearPage #first-mayla .goToPage {
    font-size: max(10px, calc(15 * 100cqi / 590));
    line-height: 1.5;
    margin-top: calc(5 * 100cqi / 590);
}

@media(max-width:587px) {

    .dearPage .secretSection,
    .dearPage .letterSection,
    .dearPage #first-mayla {
        scroll-margin-top: 105px;
    }

    .dearPage .secretSP {
        --secret-unit: .45px;
        display: block;
        height: auto;
        padding: 0 0 40px;
    }

    .secretSP .secretTitle {
        position: relative;
        inset: auto;
        margin: 0 auto 40px;
        z-index: 1;
    }

    .secretSP .secretHeadingLine {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        line-height: 1.8;
        text-align: center;
    }

    .secretSP .secretBaselineProbe {
        display: none;
    }

    .secretSP .secretRun {
        line-height: inherit;
    }

    .secretSP .secretCopy {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        line-height: 2;
    }

    .secretSP .secretCopy .secretLine {
        height: auto;
        min-height: 27px;
        font-size: 13.5px;
        line-height: 2;
        white-space: normal;
        text-wrap: balance;
    }

    .secretSP .secretCopy .secretEmptyLine {
        min-height: 27px;
    }

    .spSecretIllustrations {
        position: absolute;
        top: 0;
        bottom: 0;
        left: -5.55556%;
        right: -5.55556%;
        overflow: hidden;
        pointer-events: none;
    }

    .spSecretGirl {
        position: absolute;
        width: min(34cqi, 120px) !important;
        height: auto !important;
        object-fit: contain;
        filter: drop-shadow(-2px -1px 3px rgb(0 0 0 / .12));
    }

    .spSecretGirl-eruka {
        left: calc(-1 * min(12cqi, 40px));
        top: 135px;
    }

    .spSecretGirl-sketch {
        right: calc(-1 * min(10cqi, 34px));
        top: 520px;
        width: min(36cqi, 124px) !important;
        transform: rotate(60deg);
    }

    .spSecretGirl-seren {
        left: calc(-1 * min(8cqi, 27px));
        right: auto;
        bottom: 165px;
        width: min(32cqi, 112px) !important;
        transform: rotate(117deg);
    }

    .editorialSP {
        --editorial-unit: .5px;
    }

    .editorialSP .editorialLine {
        min-height: 28px;
        font-size: 13.5px;
        line-height: 28px;
    }

    .letterComposition.editorialSP {
        padding: 75px 0 55px;
    }

    .letterComposition.editorialSP .editorialTitle {
        margin: 0 auto 35px;
    }

    .letterComposition.editorialSP .editorialTitle .secretRun {
        font-size: calc(var(--xd-size) * .327px);
    }

    .letterComposition.editorialSP .letterCopy {
        width: 100%;
    }

    .firstMaylaComposition.editorialSP .editorialTitle {
        height: 60px;
        margin: 0 auto 25px;
        background-size: 75% auto;
    }

    .firstMaylaComposition.editorialSP .firstMaylaCopy {
        width: 100%;
    }
}



/* Content hierarchy: related copy/media, individual details, chapters, then sections. */
.dearPage .seriesPage {
    --space-copy: 28px;
    --space-related: 32px;
    --space-heading: 32px;
    --space-block: 80px;
    --space-chapter: 140px;
    --space-section: 180px;
}

.dearPage .seriesSection {
    padding: 0;
}

.dearPage #collection1 {
    margin-top: 100px;
}

.dearPage .sectionTtl {
    margin: 0 auto var(--space-heading);
}

.dearPage .prose:not(.editorialCopy):not(.secretCopy)>p {
    margin-bottom: var(--space-copy);
}

.dearPage .prose:not(.editorialCopy):not(.secretCopy)>p:last-child {
    margin-bottom: 0;
}

.dearPage .mainVisualContentsWrap {
    margin-top: 0;
}

.dearPage .mainVisualWrap {
    margin-bottom: 100px;
}

.dearPage .mainVisualWrap:last-child {
    margin-bottom: 0;
}

.dearPage .mainVisualWrap .visual {
    margin-bottom: 18px;
}

.dearPage .colorName .en {
    margin: 0 0 8px;
}

.dearPage .colorName .jp {
    margin: 0;
}

.dearPage .colorCatch {
    margin-top: 14px;
}

.dearPage .productContainer {
    margin-top: var(--space-section);
}

.dearPage .secretSection {
    padding: 0;
}

.dearPage .productContainer>.seriesSection {
    margin-top: var(--space-section);
}

.dearPage .dressingMovie {
    margin-bottom: var(--space-related);
}

.dearPage .dressingCopy {
    margin-bottom: var(--space-chapter);
}

.dearPage .componentSection {
    padding: 0;
    margin: 0;
}

.dearPage .componentSection+.componentSection {
    margin-top: var(--space-chapter);
}

.dearPage .componentIntro .prose {
    margin: var(--space-related) auto 0;
}

.dearPage .productDetails {
    margin-top: var(--space-block);
    gap: var(--space-block);
}

.dearPage #skirt .productDetails {
    gap: 0;
}

.dearPage #skirt .detailItem+.detailItem {
    margin-top: var(--space-block);
}

.dearPage .detailLabel {
    margin-bottom: 8px;
}

.dearPage .detailTxt h3 {
    margin-bottom: 18px;
}

.dearPage #skirt .skirtDetailHeading {
    margin: 0;
}

.dearPage .wearBlock {
    margin: var(--space-block) 0 0;
}

.dearPage .wearBlock+.wearBlock {
    margin-top: var(--space-chapter);
}

.dearPage .wearStyleTitle {
    margin-bottom: var(--space-related);
}

.dearPage .wearVisual+.prose {
    margin-top: var(--space-related);
}

.dearPage .wearAccordion {
    margin-top: 20px;
}

.dearPage .boxGrid {
    margin: var(--space-related) 0 16px;
}

.dearPage .letterSection {
    margin: var(--space-section) 0 0;
}

.dearPage #first-mayla .productBtn {
    margin-top: var(--space-related);
}

.dearPage #first-mayla .productBtn a {
    margin: 0 auto;
}

.dearPage .brandOverline {
    margin-top: var(--space-block);
}

.dearPage .brandOverline+.classiqueBanner {
    margin-top: 16px;
}

.dearPage .eventDate {
    margin: 0 0 var(--space-related);
}

.dearPage .eventVisual {
    margin-top: var(--space-related);
}

.dearPage .eventButton {
    margin-top: 24px;
}

.dearPage #itemContents {
    margin-top: var(--space-section);
}

@media(max-width:587px) {
    .dearPage .seriesPage {
        --space-copy: 20px;
        --space-related: 24px;
        --space-heading: 24px;
        --space-block: 72px;
        --space-chapter: 112px;
        --space-section: 144px;
    }

    .dearPage #collection1 {
        margin-top: 96px;
    }

    .dearPage .mainVisualWrap {
        margin-bottom: 80px;
    }

    .dearPage .mainVisualWrap:last-child {
        margin-bottom: 0;
    }

    .dearPage .componentIntro .prose {
        margin: 0 auto var(--space-related);
    }

    .dearPage .detailItem,
    .dearPage .detailItem.reverse,
    .dearPage #skirt .detailItem,
    .dearPage #skirt .detailItem.reverse {
        gap: var(--space-related);
    }

    /* User correction: SP details show the image before centered copy. */
    .dearPage .detailItem .detailTxt {
        order: 1;
        text-align: center;
    }

    .dearPage .detailItem .detailImg,
    .dearPage .detailItem.reverse .detailImg {
        order: 0;
    }

    .dearPage #skirt .skirtDetailCopy,
    .dearPage #skirt .skirtDetailHeading,
    .dearPage #skirt .skirtDetailBody,
    .dearPage #skirt .skirtDetailBody p,
    .dearPage #skirt .skirtDetailLine {
        text-align: center;
    }

    .dearPage #skirt .productDetails {
        gap: var(--space-block);
    }

    .dearPage #skirt .detailItem+.detailItem {
        margin-top: 0;
    }

    .dearPage .detailLabel {
        margin-bottom: 6px;
    }

    .dearPage .detailTxt h3 {
        margin-bottom: 16px;
    }

    .dearPage #skirt .skirtDetailRule {
        margin: 12px 0 16px;
    }

    .dearPage .secretSP {
        padding-bottom: 40px;
    }

    .dearPage .secretSP .secretTitle {
        margin-bottom: var(--space-related);
    }

    .dearPage .letterComposition.editorialSP .editorialTitle {
        margin-bottom: var(--space-related);
    }

    .dearPage .firstMaylaComposition.editorialSP .editorialTitle {
        margin-bottom: var(--space-related);
    }

    .dearPage .wearStyleTitle {
        margin-bottom: 20px;
    }
}

/* User request: hide the ornamental product title on PC and SP. */
.dearPage .collectionTitle {
    display: none;
}

/* Number-only Detail labels remain visually centered. */
.dearPage .detailLabel span {
    margin-left: 0;
}

/* Original XD event text colors: date and highlighted invitation. */
.dearPage .eventDate {
    color: #9a1c1c;
}

.dearPage .eventCopy .eventHighlight {
    color: #981e1e;
}

/* Original date run proportions: 2026=45, month/day=50, units=35. */
.dearPage .eventSection {
    container-type: inline-size;
}

.dearPage .eventDate {
    font-size: max(25px, calc(50 * 100cqi / 1218));
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
}

.dearPage .eventDateNumber {
    font-size: 1em;
}

.dearPage .eventDateYear {
    font-size: .9em;
}

.dearPage .eventDateUnit {
    font-size: .7em;
}



/* Keep English chapter titles away from the upper ornament, with Japanese positions fixed. */
.dearPage .sectionTtl .en {
    transform: translateY(8px);
}

@media(max-width:587px) {
    .dearPage .sectionTtl .en {
        transform: translateY(3px);
    }
}

/* SP component introductions follow the same image-then-copy order as their details. */
@media(max-width:587px) {
    .dearPage .componentIntro .componentHero {
        order: 0;
    }

    .dearPage .componentIntro .prose {
        order: 1;
        margin: var(--space-related) auto 0;
    }
}

/* Keep the girl beside the same passage when the following copy wraps. */
@media (max-width:359px) {
    .dearPage .spSecretGirl-seren {
        bottom: 205px;
    }
}

/* Supplied opening movie: preserve the original 1920 x 1080 frame. */
.dearPage .MainVisualVideoWrap .mainVisualVideo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
}

/* Match the other collection LPs: tap the movie to view fullscreen. */
.dearPage .MainVisualVideoWrap {
    position: relative;
    background: #000;
}

.dearPage .MainVisualVideoWrap .mainVisualVideo {
    cursor: zoom-in;
    touch-action: manipulation;
}

.dearPage .MainVisualVideoWrap:fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    background: #000;
}

.dearPage .MainVisualVideoWrap:fullscreen .mainVisualVideo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: default;
}

.dearPage .MainVisualVideoWrap:-webkit-full-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    background: #000;
}

.dearPage .MainVisualVideoWrap:-webkit-full-screen .mainVisualVideo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: default;
}

/* 3WAY STYLE intro: current XD PC rect 662 x 125, heading 48, copy 27 / 56. */
.dearPage #wearing .wearingIntro {
    container-type: inline-size;
    width: 100%;
}

.dearPage #wearing .wearingTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54.4855967078%;
    aspect-ratio: 662 / 125;
    margin: 0 0 0 22.3868312757%;
    padding: 0;
    border: 0;
    box-shadow: inset 0 0 0 0.0823045267cqi #775520;
    background: none;
    color: #967441;
    font-family: "fot-matisse-pron", "Noto Serif JP", "Yu Mincho", serif;
    font-size: 3.950617284cqi;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
}

.dearPage #wearing .wearingIntroCopy {
    margin: 3.4197530864cqi 0 0;
    color: #766c65;
    font-family: "fot-matisse-pron", "Noto Serif JP", "Yu Mincho", serif;
    font-size: 2.2222222222cqi;
    font-weight: 500;
    line-height: 4.6090534979cqi;
    letter-spacing: 0;
    text-align: center;
}

.dearPage #wearing .wearingIntroCopy>p {
    margin: 0;
    padding: 0;
    font: inherit;
    text-wrap: balance;
}

.dearPage #wearing .wearingBaseline {
    display: inline-block;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    vertical-align: baseline;
}

@media(max-width:587px) {
    .dearPage #wearing .wearingTitle {
        width: 76%;
        min-height: 48px;
        aspect-ratio: auto;
        margin: 0 auto;
        padding: 10px 8px;
        box-shadow: inset 0 0 0 .5px #775520;
        font-size: clamp(18px, 5.6vw, 22px);
        line-height: 1.3;
    }

    .dearPage #wearing .wearingIntroCopy {
        margin-top: 24px;
        font-size: 12px;
        line-height: 24px;
    }
}

.dearPage #wearing .wearingIntroCopy .wearingPhrase {
    display: inline-block;
    white-space: nowrap;
}

/* Component heading colors follow the PC XD on every viewport. */
.dearPage .componentSection>.detailHeading {
    color: #766c65;
}

.dearPage .componentSection>.detailHeading .en {
    color: #766c65;
}

.dearPage #corset>.detailHeading {
    color: #766c65;
}

@media(max-width:587px) {
    .dearPage .componentSection>.detailHeading,
    .dearPage #time-box>.detailHeading {
        background-image: url("https://maylaclassic.com/maylaclassique/main/collection/dear/images/detail-frame-sp-gray.webp?v=015d45b1");
    }
}

/* Reference event's three independent stop-motion spins. The outer box keeps XD positioning. */
.dearPage .secretSpin {
    max-width: 100%;
}

.dearPage .secretSpinImage {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: contain;
    transform-origin: 50% 50%;
}

.dearPage .secretSpin[data-spin-state="playing"] .secretSpinImage {
    will-change: transform;
}

.dearPage .spSecretGirl.secretSpin {
    aspect-ratio: var(--spin-aspect);
}

.dearPage .secretSpinTrail[hidden] {
    display: none;
}

@media(prefers-reduced-motion:reduce) {
    .dearPage .secretSpinTrail {
        display: none;
    }
}

/* Limited price leads the offer; the existing gold ornament strips retain their proportions. */
.dearPage .specialOffer {
    container-type: inline-size;
    width: 80%;
    margin: var(--space-block) auto 0;
    position: relative;
    aspect-ratio: auto;
    padding: calc(100 * 100cqi / 966) 9% calc(112 * 100cqi / 966);
    text-align: center;
    color: var(--circle-gold);
    background-color: #fcf9f4;
    background-image: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/offer-top.webp?v=815eb39c'), url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/offer-bottom.webp?v=1895f7fc');
    background-size: 100% auto;
    background-position: center top, center bottom;
    background-repeat: no-repeat;
    border-inline: 1px solid #9d7440;
}

.dearPage .specialOffer::before,
.dearPage .specialOffer::after {
    content: "";
    position: absolute;
    top: calc(94 * 100cqi / 966);
    bottom: calc(94 * 100cqi / 966);
    border-inline: 1px solid #9d7440;
    pointer-events: none;
}

.dearPage .specialOffer::before {
    left: 2.588%;
    right: 2.588%;
}

.dearPage .specialOffer::after {
    left: 3.623%;
    right: 3.623%;
    border-inline-width: .5px;
}

.dearPage .offerHeader {
    min-height: 0;
}

.dearPage .offerHeader>span {
    display: block;
    font: 11px/1.5 Garamond, serif;
}

.dearPage .offerHeader h3 {
    margin: 7px 0 5px;
    font: 400 30px/1.2 Garamond, serif;
}

.dearPage .offerHeader p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--circle-ink);
}

.dearPage .offerHeader::after {
    content: "";
    display: block;
    width: 90%;
    height: 15px;
    margin: 18px auto;
    background: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/offer-divider.webp?v=a6166ab9') center/contain no-repeat;
}

.dearPage .offerBody {
    padding: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--circle-ink);
}

.dearPage .offerBody>p {
    margin: 0;
    text-wrap: balance;
}

.dearPage .offerPrices {
    margin: 22px 0 0;
    padding: 0;
}

.dearPage .offerPrices dt,
.dearPage .offerPrices dd {
    margin: 0;
    padding: 0;
    font-weight: 400;
}

.dearPage .offerPriceRegular {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px 16px;
    font-size: 13px;
    line-height: 1.8;
    color: #786f66;
}

.dearPage .offerPriceSpecial {
    display: block;
    margin-top: 14px;
    padding: 17px 8px 19px;
    border-block: 1px solid #d8c6a7;
    background: #f8f0e6;
    color: #941d24;
}

.dearPage .offerPriceSpecial dt {
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: .04em;
}

.dearPage .offerPriceSpecial .offerPriceValue {
    margin-top: 8px;
    font-family: Garamond, serif;
    font-size: clamp(32px, 7cqi, 48px);
    line-height: 1.3;
}

.dearPage .offerPriceSpecial .offerPriceValue.is-pending {
    font-family: inherit;
    font-size: 36px;
    letter-spacing: .04em;
}

@media(max-width:587px) {
    .dearPage .specialOffer {
        width: 100%;
        padding: calc(104 * 100cqi / 966) 8% calc(120 * 100cqi / 966);
    }

    .dearPage .offerHeader>span {
        font-size: 10px;
    }

    .dearPage .offerHeader h3 {
        font-size: 26px;
    }

    .dearPage .offerHeader p,
    .dearPage .offerBody,
    .dearPage .offerPriceRegular {
        font-size: 12px;
    }

    .dearPage .offerHeader::after {
        margin: 16px auto;
    }

    .dearPage .offerPrices {
        margin-top: 18px;
    }

    .dearPage .offerPriceSpecial {
        margin-top: 12px;
        padding: 16px 6px 18px;
    }

    .dearPage .offerPriceSpecial dt {
        font-size: 14px;
    }

    .dearPage .offerPriceSpecial .offerPriceValue.is-pending {
        font-size: 32px;
    }
}

/* Movie 02/03 are temporarily hidden; the opening movie remains available. */
.dearPage #secret .moviePlaceholder,
.dearPage #dressing>.dressingMovie {
    display: none;
}

/* With Movie 02 hidden, use a direct chapter transition instead of its old large gap. */
.dearPage .productContainer>#dressing {
    margin-top: 80px;
}

@media(max-width:587px) {
    .dearPage .productContainer>#dressing {
        margin-top: 48px;
    }
}

/* Alice/Bilitis bxSlider: 90% PC / 85% SP photo, gray arrows, 45px thumbnails. */
.dearPage .mainVisualContentsWrap .productVisualSliderWrap {
    position: relative;
    width: 100%;
    min-width: 0;
}

.dearPage .productVisualSlider {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dearPage .productVisualSlider>li {
    list-style: none;
    margin: 0;
    padding: 0;
    aspect-ratio: auto;
}

.dearPage .productVisualSliderWrap:not(.is-multiphoto) .productVisualSlider>li:not(:first-child) {
    display: none;
}

.dearPage .imageFrame,
.dearPage .colorVideoFrame {
    width: 90%;
    margin: 0 auto;
    aspect-ratio: 3332 / 4104;
}

.dearPage .imageFrame {
    position: relative;
}

.dearPage .imageFrame img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
}

.dearPage .productVisualSliderWrap .bx-wrapper {
    max-width: 100% !important;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.dearPage .productVisualSliderWrap .bx-viewport {
    left: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden !important;
    touch-action: pan-y;
}

.dearPage .productVisualPager[hidden] {
    display: none !important;
}

.dearPage .productVisualPager {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px 0 0;
    padding: 0;
}

.dearPage .productVisualPager a {
    display: block;
    position: relative;
    width: 45px;
    height: auto;
    margin: 0;
    padding: 0;
    aspect-ratio: 3332 / 4104;
}

.dearPage .productVisualPager img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    transform: none;
    object-fit: cover;
    border: 1px solid #ddd;
    opacity: .55;
}

.dearPage .productVisualPager a.active img {
    border-color: #777;
    opacity: 1;
}

.dearPage .bx-controls-direction a {
    position: absolute;
    top: 50%;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    padding: 0;
    background: none;
    text-indent: -9999px;
    z-index: 10;
}

.dearPage .productVisualSliderWrap .bx-prev {
    left: -12px;
}

.dearPage .productVisualSliderWrap .bx-next {
    right: -12px;
}

.dearPage .bx-controls-direction a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
}

.dearPage .bx-prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.dearPage .bx-next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}

.dearPage .productVisualSliderWrap a:focus-visible {
    outline: 2px solid #777;
    outline-offset: 2px;
}

@media(max-width:587px) {

    .dearPage .imageFrame,
    .dearPage .colorVideoFrame {
        width: 85%;
    }
}

.dearPage .videoThumbMark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #fffdf0e8;
    color: #765627;
    font: 10px/1 sans-serif;
}

.dearPage .colorVideoFrame {
    position: relative;
    height: auto;
    background: #fff;
}

.dearPage .colorVideoFrame video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dearPage .managedVideoFrame .moviePoster {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.dearPage .managedVideoFrame:not([data-video-state="playing"]) video {
    opacity: 0;
}

.dearPage .managedVideoFrame[data-video-state="playing"] .moviePoster,
.dearPage .managedVideoFrame[data-video-state="playing"] .videoPlay {
    display: none;
}

.dearPage .videoPlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 1px solid #967441;
    border-radius: 50%;
    background: #fffdf3ed;
    color: #80602d;
    font: 20px/1 sans-serif;
    cursor: pointer;
}

.dearPage .videoPlay span {
    margin-left: 3px;
}

.dearPage .MainVisualVideoWrap.managedVideoFrame {
    background: #000;
}

.dearPage .colorVideoFrame:fullscreen {
    width: 100vw;
    height: 100vh;
    display: block;
    background: #000;
}

.dearPage .colorVideoFrame:fullscreen video,
.dearPage .colorVideoFrame:fullscreen .moviePoster {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* A classical privilege ticket: gold seal and burgundy bring the limited price forward. */
.dearPage .offerHeader>span {
    letter-spacing: .1em;
}

.dearPage .offerHeader h3 {
    font-size: 34px;
    font-style: italic;
}

.dearPage .offerHeader p {
    display: inline-block;
    padding: 4px 18px;
    border: 1px solid #b69b6d;
    color: #80602d;
    letter-spacing: .08em;
}

.dearPage .offerPriceSpecial {
    position: relative;
    margin-top: 28px;
    padding: 25px 12px 24px;
    border: 1px solid #9d7440;
    background: #701d2a;
    color: #fff6de;
}

.dearPage .offerPriceSpecial::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid #b69560;
    pointer-events: none;
}

.dearPage .offerPriceSpecial dt {
    color: #e9d3a5;
    letter-spacing: .08em;
}

.dearPage .offerPriceSpecial .offerPriceValue {
    font-size: clamp(40px, 8cqi, 52px);
}

.dearPage .offerPriceSpecial .offerPriceValue.is-pending {
    font-size: 40px;
    letter-spacing: .03em;
}

.dearPage .offerSeal {
    position: absolute;
    z-index: 1;
    left: -19px;
    top: -21px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 66px;
    height: 66px;
    border: 3px double #b5955f;
    border-radius: 50%;
    background: #fcf9f0;
    color: #9d7440;
    box-shadow: 0 0 0 3px #fcf9f0;
    transform: rotate(-13deg);
    font: 12px/1.25 Garamond, serif;
    letter-spacing: .04em;
}

@media(max-width:587px) {
    .dearPage .offerHeader h3 {
        font-size: 30px;
    }

    .dearPage .offerPriceSpecial {
        margin-top: 26px;
        padding: 24px 8px 23px;
    }

    .dearPage .offerPriceSpecial .offerPriceValue.is-pending {
        font-size: 36px;
    }

    .dearPage .offerSeal {
        left: -10px;
        top: -18px;
        width: 54px;
        height: 54px;
        font-size: 10px;
    }
}

/* Exhibition offer: official Mayla Classique artwork and the existing gold frame. */
.dearPage .specialOffer.eventOffer {
    width: 88%;
    padding: 62px 7% 66px;
    color: #604b3a;
    background-color: #fcf9f4;
}

.dearPage .eventOfferLogo {
    display: block;
    width: 220px;
    max-width: 80%;
    height: auto;
    margin: 0 auto 25px;
}

.dearPage .eventOfferHeader {
    text-align: center;
}

.dearPage .eventOfferEyebrow {
    margin: 0 0 12px;
    color: #987443;
    font: 12px/1.5 Garamond, "EB Garamond", serif;
    letter-spacing: .12em;
}

.dearPage .eventOfferHeader h3 {
    margin: 0;
    color: #604b3a;
    font-size: 29px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: .08em;
}

.dearPage .eventOfferHeader h3 span {
    display: block;
    margin-top: 5px;
    color: #701d2a;
    font-size: 19px;
    letter-spacing: .1em;
}

.dearPage .eventOfferHeader::after {
    content: "";
    display: block;
    width: 80%;
    height: 15px;
    margin: 20px auto;
    background: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/offer-divider.webp?v=a6166ab9') center/contain no-repeat;
}

.dearPage .eventOfferProduct {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.8;
    text-wrap: balance;
}

.dearPage .eventOfferPrice {
    position: relative;
    padding: 20px 12px 19px;
    border: 1px solid #b4945b;
    background: #701d2a;
    color: #fff6de;
}

.dearPage .eventOfferPrice::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid #b4945b;
    pointer-events: none;
}

.dearPage .eventOfferPriceLabel {
    margin: 0 0 5px;
    color: #e9d3a5;
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: .1em;
}

.dearPage .eventOfferAmount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
}

.dearPage .eventOfferValue {
    font: 400 clamp(48px, 18cqi, 76px)/1.05 Garamond, "EB Garamond", "Times New Roman", serif;
    letter-spacing: -.035em;
}

.dearPage .eventOfferUnit {
    position: relative;
    font-size: 23px;
    line-height: 1.2;
}

.dearPage .eventOfferUnit small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.4;
}

.dearPage .eventOfferTax {
    margin: 7px 0 0;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: .03em;
}

.dearPage .eventOfferComparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: center;
    margin: 24px 0 0;
}

.dearPage .eventOfferRegular>p,
.dearPage .eventOfferSaving>p {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
}

.dearPage .eventOfferRegularAmount {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 4px;
    margin-top: 4px !important;
    white-space: nowrap;
}

.dearPage .eventOfferRegularAmount s {
    color: #81756b;
    font: 25px/1.25 Garamond, "EB Garamond", serif;
    text-decoration-thickness: 1px;
}

.dearPage .eventOfferRegularAmount>span {
    font-size: 11px;
}

.dearPage .eventOfferRegularTax {
    margin-top: 3px !important;
    color: #81756b;
    font-size: 11px !important;
}

.dearPage .eventOfferSaving {
    padding: 7px 0 7px 16px;
    border-left: 1px solid #d8c6a7;
    color: #701d2a;
}

.dearPage .eventOfferSavingAmount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

.dearPage .eventOfferSavingAmount>span {
    font: 36px/1.35 Garamond, "EB Garamond", serif;
}

.dearPage .eventOfferSavingAmount>small {
    font-size: 14px;
    letter-spacing: .03em;
}

.dearPage .eventOfferDeadline {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 0;
    margin: 26px 0 0;
    padding: 13px 3px;
    border-block: 1px solid #b99a69;
    color: #701d2a;
    line-height: 1.8;
}

.dearPage .eventOfferDeadline time {
    white-space: nowrap;
    font-size: 17px;
}

.dearPage .eventOfferDeadline time span {
    font: 31px/1.2 Garamond, "EB Garamond", serif;
    margin: 0 2px;
}

.dearPage .eventOfferDeadline>span {
    font-size: 15px;
    white-space: nowrap;
}

.dearPage .eventOfferNote {
    margin: 21px 0 0;
    font-size: 12px;
    line-height: 2;
    text-wrap: balance;
}

.dearPage .eventOfferNote>span {
    display: block;
}

.dearPage .eventOfferClosing {
    margin: 20px 0 0;
    color: #987443;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: .12em;
}

@media(max-width:587px) {
    .dearPage .specialOffer.eventOffer {
        width: 100%;
        padding: 46px 7% 47px;
    }

    .dearPage .eventOfferLogo {
        width: 185px;
        margin-bottom: 20px;
    }

    .dearPage .eventOfferEyebrow {
        font-size: 10px;
        margin-bottom: 10px;
        letter-spacing: .08em;
    }

    .dearPage .eventOfferHeader h3 {
        font-size: 24px;
    }

    .dearPage .eventOfferHeader h3 span {
        font-size: 17px;
        margin-top: 3px;
    }

    .dearPage .eventOfferHeader::after {
        margin: 15px auto;
    }

    .dearPage .eventOfferProduct {
        margin-bottom: 17px;
        font-size: 14px;
    }

    .dearPage .eventOfferPrice {
        padding: 17px 10px 16px;
    }

    .dearPage .eventOfferPriceLabel {
        font-size: 12px;
    }

    .dearPage .eventOfferValue {
        font-size: clamp(48px, 18cqi, 68px);
    }

    .dearPage .eventOfferUnit {
        font-size: 20px;
    }

    .dearPage .eventOfferUnit small {
        font-size: 11px;
    }

    .dearPage .eventOfferTax {
        font-size: 13px;
        margin-top: 6px;
    }

    .dearPage .eventOfferComparison {
        gap: 12px;
        margin-top: 20px;
    }

    .dearPage .eventOfferRegularAmount s {
        font-size: 22px;
    }

    .dearPage .eventOfferRegularAmount>span {
        font-size: 10px;
    }

    .dearPage .eventOfferSaving {
        padding-left: 12px;
    }

    .dearPage .eventOfferSavingAmount>span {
        font-size: 30px;
    }

    .dearPage .eventOfferSavingAmount>small {
        font-size: 12px;
    }

    .dearPage .eventOfferDeadline {
        margin-top: 21px;
        padding: 11px 1px;
        column-gap: 7px;
    }

    .dearPage .eventOfferDeadline time {
        font-size: 14px;
    }

    .dearPage .eventOfferDeadline time span {
        font-size: 27px;
    }

    .dearPage .eventOfferDeadline>span {
        font-size: 13px;
    }

    .dearPage .eventOfferNote {
        margin-top: 17px;
        font-size: 11px;
        line-height: 1.9;
    }
}

@media(max-width:359px) {
    .dearPage .eventOfferRegularAmount s {
        font-size: 20px;
    }

    .dearPage .eventOfferSavingAmount>span {
        font-size: 26px;
    }

    .dearPage .eventOfferDeadline {
        display: block;
    }

    .dearPage .eventOfferDeadline>span {
        display: block;
    }
}

/* Original movies cropped for the same frame as the model visual. */
.dearPage .colorVideoFrame {
    --video-crop: 57%;
    overflow: hidden;
    background: #fff;
}

.dearPage .colorVideoFrame video,
.dearPage .colorVideoFrame.managedVideoFrame .moviePoster {
    object-fit: cover;
    object-position: 50% var(--video-crop);
}

.dearPage [data-color="sophia"] .colorVideoFrame {
    --video-crop: 57%;
}

.dearPage [data-color="emma"] .colorVideoFrame {
    --video-crop: 60%;
}

.dearPage [data-color="serena"] .colorVideoFrame {
    --video-crop: 60%;
}

.dearPage [data-color="olivia"] .colorVideoFrame {
    --video-crop: 57%;
}

.dearPage [data-color="noel"] .colorVideoFrame {
    --video-crop: 55%;
}

.dearPage [data-color="clarissa"] .colorVideoFrame {
    --video-crop: 78%;
}

.dearPage [data-color="flora"] .colorVideoFrame {
    --video-crop: 60%;
}

.dearPage .colorVideoFrame .colorVideoLogo {
    position: absolute;
    display: block;
    left: 3.5%;
    bottom: 2.7%;
    width: 40%;
    height: auto;
    margin: 0;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px #fff8);
}

.dearPage .productVisualPager .is-video .videoThumbMark {
    z-index: 3;
}

.dearPage .colorVideoFrame:fullscreen video,
.dearPage .colorVideoFrame:fullscreen .moviePoster {
    object-fit: contain;
}

.dearPage .colorVideoFrame:fullscreen .colorVideoLogo {
    left: 3.5%;
    bottom: 3%;
    width: min(30%, 300px);
}

/* Champagne lettering and the circle of a skirt dissolve into the opening movie. */
.dearPage .MainVisualVideoWrap {
    overflow: hidden;
}

.dearPage .MainVisualVideoWrap .movieIntroCard {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    background: #481722;
    color: #f0dab1;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
}

.dearPage .movieIntroCard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, #481722bd, #481722e8), url('https://maylaclassic.com/maylaclassique/main/collection/dear/dear_scene1/img/circle-skirt-main-poster.webp?v=7e73d0e0') center 28%/145% auto;
    opacity: .85;
}

.dearPage .movieIntroCard::after {
    content: "";
    position: absolute;
    inset: 5.5% 3.2%;
    border: 1px solid #d4b48265;
    box-shadow: inset 0 0 0 5px #48172255, inset 0 0 0 6px #d4b4822e;
    pointer-events: none;
}

.dearPage .movieIntroCorner {
    position: absolute;
    width: 12%;
    aspect-ratio: 1;
    z-index: 1;
    background: transparent;
    opacity: .68;
    background-position: center; background-size: contain; background-repeat: no-repeat;
    filter: brightness(0) invert(50%) sepia(100%) saturate(111.14625%) hue-rotate(358.575deg) brightness(130.17315%);
}

.dearPage .movieIntroCorner-tl {
    left: 3.2%;
    top: 5.5%;
    background-image: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/letter-corner-tl.webp?v=9a37dc4f');
}

.dearPage .movieIntroCorner-tr {
    right: 3.2%;
    top: 5.5%;
    background-image: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/letter-corner-tr.webp?v=870ca42a');
}

.dearPage .movieIntroCorner-br {
    right: 3.2%;
    bottom: 5.5%;
    background-image: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/letter-corner-br.webp?v=470925d3');
}

.dearPage .movieIntroCorner-bl {
    left: 3.2%;
    bottom: 5.5%;
    background-image: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/letter-corner-bl.webp?v=57a0a619');
}

.dearPage .movieIntroOrbit {
    position: absolute;
    width: 37%;
    aspect-ratio: 1;
    left: 7%;
    top: 50%;
    transform: translateY(-50%) rotate(-35deg);
    border: 1px solid #d4b48242;
    border-radius: 50%;
}

.dearPage .movieIntroOrbit::before {
    content: "";
    position: absolute;
    inset: 7%;
    border: 1px solid #d4b48226;
    border-radius: 50%;
}

.dearPage .movieIntroOrbit::after {
    content: "";
    position: absolute;
    inset: -5%;
    border: 1px solid transparent;
    border-top-color: #ebce9d90;
    border-right-color: #ebce9d55;
    border-radius: 50%;
}

.dearPage .movieIntroBrand {
    position: absolute;
    left: 9%;
    top: 38%;
    width: 33%;
    text-align: center;
}

.dearPage .movieIntroBrand>img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
    filter: brightness(0) invert(50%) sepia(100%) saturate(84.48013%) hue-rotate(0.600deg) brightness(141.79974%);
}

.dearPage .movieIntroBrand::before {
    content: none;
}

.dearPage .movieIntroBrand>span {
    display: block;
    position: relative;
    margin-top: 20%;
    font: clamp(7px, 1.05vw, 14px)/1.6 Garamond, "Times New Roman", serif;
    letter-spacing: .12em;
    white-space: nowrap;
}

.dearPage .movieIntroBrand>span::before {
    content: "";
    position: absolute;
    left: -10%;
    top: -35%;
    width: 120%;
    height: 170%;
    background: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/first-mayla-ornaments.webp?v=53b5a20e') center/100% 100% no-repeat;
    opacity: .75;
    filter: brightness(0) invert(50%) sepia(100%) saturate(132.51549%) hue-rotate(359.475deg) brightness(121.13911%);
}

.dearPage .movieIntroBrand>p {
    margin: 8% 0 0;
    font-size: clamp(7px, .8vw, 12px);
    line-height: 1.7;
    letter-spacing: .09em;
    color: #ddc099;
}

.dearPage .movieIntroQuestion {
    position: absolute;
    left: 64%;
    top: 14%;
    width: 14%;
    height: 73%;
    background: transparent;
}

.dearPage .movieIntroQuestion img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 1;
    filter: brightness(0) invert(50%) sepia(100%) saturate(84.48013%) hue-rotate(0.600deg) brightness(141.79974%);
}

.dearPage .MainVisualVideoWrap .movieIntroBrand,
.dearPage .MainVisualVideoWrap .movieIntroQuestion {
    animation: circleIntroLetters 1.1s cubic-bezier(.2, .7, .2, 1) both;
    animation-play-state: paused;
}

.dearPage .MainVisualVideoWrap .movieIntroQuestion {
    animation-delay: .18s;
}

.dearPage .MainVisualVideoWrap .movieIntroOrbit {
    animation: circleIntroOrbit 2s ease-out both;
    animation-play-state: paused;
}

.dearPage .MainVisualVideoWrap[data-intro-state="showing"] .movieIntroBrand,
.dearPage .MainVisualVideoWrap[data-intro-state="showing"] .movieIntroQuestion,
.dearPage .MainVisualVideoWrap[data-intro-state="showing"] .movieIntroOrbit {
    animation-play-state: running;
}

.dearPage .MainVisualVideoWrap[data-intro-state="done"] .movieIntroCard {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.025);
    transition: opacity .65s ease, transform .8s ease, visibility 0s .8s;
}

.dearPage .MainVisualVideoWrap[data-intro-state="showing"] .videoPlay {
    visibility: hidden;
}

.dearPage .MainVisualVideoWrap:not([data-intro-state="done"]) .videoPlay {
    left: auto;
    top: auto;
    right: 12px;
    bottom: 12px;
    transform: none;
    z-index: 5;
    width: 40px;
    height: 40px;
    font-size: 15px;
}

@keyframes circleIntroLetters {
    from {
        opacity: .45;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes circleIntroOrbit {
    from {
        opacity: .3;
        transform: translateY(-50%) rotate(-65deg) scale(.94);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) rotate(10deg) scale(1);
    }
}

@media(max-width:587px) {
    .dearPage .movieIntroBrand {
        width: 36%;
        left: 8%;
        top: 38%;
    }

    .dearPage .movieIntroQuestion {
        left: 59%;
        top: 5%;
        width: 21%;
        height: 90%;
    }

    .dearPage .movieIntroBrand>span {
        font-size: 7px;
        letter-spacing: .07em;
    }

    .dearPage .movieIntroBrand>p {
        font-size: 7px;
        letter-spacing: .02em;
    }

    .dearPage .movieIntroOrbit {
        left: 5%;
        width: 42%;
    }
}

@media(prefers-reduced-motion:reduce) {

    .dearPage .MainVisualVideoWrap .movieIntroBrand,
    .dearPage .MainVisualVideoWrap .movieIntroQuestion,
    .dearPage .MainVisualVideoWrap .movieIntroOrbit {
        animation: none;
    }

    .dearPage .MainVisualVideoWrap[data-intro-state="done"] .movieIntroCard {
        transition: none;
        transform: none;
    }
}

/* The supplied announcement hierarchy, in the Classique gold and ivory palette. */
.dearPage .specialOffer.eventOfferPoster {
    padding: 66px 7% 70px;
    border: 1px solid #9d7440;
    background-image: none;
}

.dearPage .specialOffer.eventOfferPoster::before,
.dearPage .specialOffer.eventOfferPoster::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 966/94;
    border: 0;
    background: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/offer-top.webp?v=815eb39c') center/100% 100% no-repeat;
    clip-path: inset(4.26% .414% 0);
}

.dearPage .specialOffer.eventOfferPoster::after {
    top: auto;
    bottom: 0;
    background-image: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/offer-bottom.webp?v=1895f7fc');
    clip-path: inset(0 .414% 4.26%);
}

.dearPage .eventOfferFrame {
    position: absolute;
    inset: 0;
    container-type: inline-size;
    pointer-events: none;
}

.dearPage .eventOfferFrame::before,
.dearPage .eventOfferFrame::after {
    content: "";
    position: absolute;
    top: calc(94 * 100cqi / 966 - .25px);
    bottom: calc(94 * 100cqi / 966 - .25px);
    left: calc(25 * 100cqi / 966);
    right: calc(25 * 100cqi / 966);
    border-inline: 1px solid #9d7440;
}

.dearPage .eventOfferFrame::after {
    left: calc(35 * 100cqi / 966);
    right: calc(35 * 100cqi / 966);
    border-inline-width: .5px;
}

.dearPage .eventOfferPoster .eventOfferLogo {
    width: 260px;
    margin-bottom: 22px;
}

.dearPage .eventOfferPoster .eventOfferEyebrow {
    font-size: 11px;
    letter-spacing: .15em;
    margin-bottom: 12px;
}

.dearPage .eventOfferPoster .eventOfferHeader h3 {
    font-size: clamp(25px, 7cqi, 39px);
    line-height: 1.5;
    letter-spacing: .05em;
}

.dearPage .eventOfferPoster .eventOfferHeader h3 span {
    font-size: clamp(23px, 6.5cqi, 36px);
    margin-top: 3px;
    color: #987443;
    letter-spacing: .06em;
}

.dearPage .eventOfferPoster .eventOfferHeader::after {
    margin: 16px auto 18px;
    width: 94%;
}

.dearPage .eventOfferPoster .eventOfferProduct {
    margin: 0 0 22px;
    font-size: clamp(17px, 5cqi, 26px);
    line-height: 1.65;
    color: #604b3a;
}

.dearPage .eventOfferPoster .eventOfferPrice {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    padding: 13px 0 16px;
    border: 0;
    background: transparent;
    color: #8d683b;
}

.dearPage .eventOfferPoster .eventOfferPrice::after {
    inset: auto 10% 26% 17%;
    height: 12%;
    border: 0;
    background: #bca17e24;
    z-index: 0;
}

.dearPage .eventOfferPoster .eventOfferPriceLabel {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: clamp(20px, 5.5cqi, 29px);
    line-height: 1.35;
    letter-spacing: .08em;
    color: #80602d;
}

.dearPage .eventOfferPoster .eventOfferPriceLabel>span {
    display: block;
}

.dearPage .eventOfferPoster .eventOfferAmount {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 1;
    gap: 7px;
}

.dearPage .eventOfferPoster .eventOfferValue {
    font-size: clamp(76px, 29cqi, 128px);
    line-height: .98;
    color: #701d2a;
}

.dearPage .eventOfferPoster .eventOfferUnit {
    font-size: clamp(18px, 5cqi, 26px);
}

.dearPage .eventOfferPoster .eventOfferUnit small {
    white-space: nowrap;
    font-size: clamp(10px, 2.5cqi, 13px);
}

.dearPage .eventOfferPoster .eventOfferTax {
    grid-column: 2;
    grid-row: 2;
    margin-top: 9px;
    text-align: right;
    padding-right: 3%;
    color: #701d2a;
    font-size: clamp(12px, 3.1cqi, 16px);
}

.dearPage .eventOfferPoster .eventOfferComparison {
    grid-template-columns: 1fr 1.15fr;
    gap: 15px;
    margin-top: 23px;
}

.dearPage .eventOfferPoster .eventOfferRegularAmount s {
    font-size: clamp(25px, 6.4cqi, 33px);
    color: #701d2a;
    text-decoration-color: #987443;
    text-decoration-thickness: 1px;
}

.dearPage .eventOfferPoster .eventOfferRegular>p:first-child {
    color: #80602d;
}

.dearPage .eventOfferPoster .eventOfferRegularTax {
    color: #81756b;
}

.dearPage .eventOfferPoster .eventOfferSaving {
    position: relative;
    padding: 11px 6px 10px;
    border: 1px solid #b79b71;
    background: #f3ebdf;
    color: #701d2a;
}

.dearPage .eventOfferPoster .eventOfferSaving::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid #e4d0ac70;
    pointer-events: none;
}

.dearPage .eventOfferPoster .eventOfferSaving>p:first-child {
    color: #80602d;
    font-size: 11px;
}

.dearPage .eventOfferPoster .eventOfferSavingAmount>span {
    font-size: clamp(33px, 9cqi, 48px);
    line-height: 1.18;
}

.dearPage .eventOfferPoster .eventOfferSavingAmount>small {
    font-size: clamp(12px, 3.2cqi, 17px);
}

.dearPage .eventOfferPoster .eventOfferDeadline {
    margin-top: 29px;
    padding: 15px 5px;
    border: 1px solid #b79b71;
    outline: 1px solid #b79b7140;
    outline-offset: 4px;
    column-gap: 7px;
    color: #80602d;
}

.dearPage .eventOfferPoster .eventOfferDeadline time {
    font-size: 21px;
}

.dearPage .eventOfferPoster .eventOfferDeadline time span {
    font-size: clamp(32px, 8.4cqi, 44px);
    color: #701d2a;
}

.dearPage .eventOfferPoster .eventOfferDeadline>span {
    font-size: clamp(14px, 3.9cqi, 20px);
}

.dearPage .eventOfferPoster .eventOfferNote {
    margin-top: 24px;
    font-size: 13px;
    line-height: 1.9;
}

.dearPage .eventOfferPoster .eventOfferClosing {
    margin-top: 22px;
}

@media(max-width:587px) {
    .dearPage .specialOffer.eventOfferPoster {
        padding: 46px 7% 48px;
    }

    .dearPage .eventOfferPoster .eventOfferLogo {
        width: 190px;
        margin-bottom: 18px;
    }

    .dearPage .eventOfferPoster .eventOfferEyebrow {
        font-size: 9px;
        margin-bottom: 9px;
    }

    .dearPage .eventOfferPoster .eventOfferHeader h3 {
        font-size: clamp(23px, 8cqi, 30px);
    }

    .dearPage .eventOfferPoster .eventOfferHeader h3 span {
        font-size: clamp(22px, 9cqi, 34px);
        letter-spacing: .03em;
    }

    .dearPage .eventOfferPoster .eventOfferHeader::after {
        margin: 13px auto 15px;
    }

    .dearPage .eventOfferPoster .eventOfferProduct {
        font-size: clamp(17px, 5.8cqi, 23px);
        margin-bottom: 13px;
    }

    .dearPage .eventOfferPoster .eventOfferPrice {
        column-gap: 6px;
        padding-top: 12px;
    }

    .dearPage .eventOfferPoster .eventOfferValue {
        font-size: clamp(64px, 29cqi, 118px);
    }

    .dearPage .eventOfferPoster .eventOfferPriceLabel {
        font-size: clamp(17px, 5.9cqi, 24px);
    }

    .dearPage .eventOfferPoster .eventOfferAmount {
        gap: 4px;
    }

    .dearPage .eventOfferPoster .eventOfferComparison {
        gap: 10px;
        margin-top: 17px;
    }

    .dearPage .eventOfferPoster .eventOfferRegularAmount {
        gap: 2px;
    }

    .dearPage .eventOfferPoster .eventOfferRegularAmount s {
        font-size: clamp(22px, 7cqi, 29px);
    }

    .dearPage .eventOfferPoster .eventOfferRegularAmount>span {
        font-size: 9px;
    }

    .dearPage .eventOfferPoster .eventOfferSavingAmount {
        gap: 3px;
    }

    .dearPage .eventOfferPoster .eventOfferSavingAmount>span {
        font-size: clamp(28px, 9.8cqi, 42px);
    }

    .dearPage .eventOfferPoster .eventOfferDeadline {
        display: flex;
        margin-top: 25px;
        padding: 13px 2px;
    }

    .dearPage .eventOfferPoster .eventOfferDeadline time {
        font-size: 17px;
    }

    .dearPage .eventOfferPoster .eventOfferDeadline time span {
        font-size: clamp(31px, 10cqi, 39px);
    }

    .dearPage .eventOfferPoster .eventOfferDeadline>span {
        font-size: clamp(14px, 4.8cqi, 18px);
    }

    .dearPage .eventOfferPoster .eventOfferNote {
        margin-top: 23px;
        font-size: 11px;
    }
}

/* Make the brand destination explicit without changing the supplied banner artwork. */
.dearPage .brandSiteHeading {
    margin-top: 50px;
    color: #80602d;
    line-height: 1.7;
}

.dearPage .brandSiteHeading>span {
    display: block;
}

.dearPage .brandSiteHeading>span[lang] {
    margin-bottom: 8px;
    font: 12px/1.5 Garamond, "Times New Roman", serif;
    letter-spacing: .18em;
}

.dearPage .brandSiteHeading>span:last-child {
    font-family: "fot-matisse-pron", "Noto Serif JP", "Yu Mincho", serif;
    font-size: 19px;
    letter-spacing: .03em;
}

.dearPage .classiqueBanner.brandSiteBanner {
    overflow: hidden;
    border: 1px solid #b59b75;
    text-decoration: none;
}

.dearPage .brandSiteBanner>img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.dearPage .brandSiteAction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 18px 12px;
    border-top: 1px solid #d9c6a7;
    background: #fcf9f4;
    color: #80602d;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: .06em;
    transition: background .2s ease, color .2s ease;
}

.dearPage .brandSiteArrow {
    display: inline-block;
    font: 24px/1 Garamond, serif;
    transition: transform .2s ease;
}

.dearPage .brandSiteBanner:focus-visible {
    outline: 2px solid #701d2a;
    outline-offset: 5px;
}

@media(hover:hover) {
    .dearPage .brandSiteBanner:hover .brandSiteAction {
        background: #f4ecde;
        color: #701d2a;
    }

    .dearPage .brandSiteBanner:hover .brandSiteArrow {
        transform: translateX(3px);
    }
}

@media(max-width:587px) {
    .dearPage .brandSiteHeading {
        margin-top: 35px;
    }

    .dearPage .brandSiteHeading>span[lang] {
        font-size: 10px;
        margin-bottom: 6px;
    }

    .dearPage .brandSiteHeading>span:last-child {
        font-size: 16px;
        letter-spacing: .01em;
    }

    .dearPage .brandSiteAction {
        padding: 15px 10px;
        font-size: 14px;
        gap: 18px;
    }
}

@media(prefers-reduced-motion:reduce) {

    .dearPage .brandSiteAction,
    .dearPage .brandSiteArrow {
        transition: none;
    }
}

/* Photo titles echo each visual's existing frame and fabric colour. */
.dearPage .imageFrame .modelVisualQuestion {
    position: absolute;
    display: block;
    z-index: 1;
    top: 11%;
    right: 8%;
    width: 14.5%;
    aspect-ratio: 725 / 2170;
    background: transparent;
    pointer-events: none;
}

.dearPage [data-color="sophia"] {
    --photo-title-ink: #783645;
}

.dearPage [data-color="emma"] {
    --photo-title-ink: #50493d;
}

.dearPage [data-color="serena"] {
    --photo-title-ink: #39445e;
}

.dearPage [data-color="olivia"] {
    --photo-title-ink: #515c47;
}

.dearPage [data-color="noel"] {
    --photo-title-ink: #44464c;
}

.dearPage [data-color="clarissa"] {
    --photo-title-ink: #456773;
}

.dearPage [data-color="flora"] {
    --photo-title-ink: #865e64;
}

/* The raised arms occupy the right margin in these two photographs. */
.dearPage [data-color="sophia"] .modelVisualQuestion {
    top: 10%;
}

.dearPage [data-color="olivia"] .modelVisualQuestion {
    left: 10%;
    right: auto;
    top: 8.5%;
    width: 13.3%;
}

.dearPage [data-color="flora"] .modelVisualQuestion {
    left: 12%;
    right: auto;
    top: 12%;
}

/* A small classical colophon for each of the seven expressions. */
.dearPage .mainVisualWrap .visual {
    margin-bottom: 0;
}

.dearPage .mainVisualWrap .colorName {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: 30px auto 0;
    padding: 0 12px;
    text-align: center;
    --label-ink: #4c392b;
}

.dearPage #color-sophia .colorName {
    --label-ink: #783645;
}

.dearPage #color-emma .colorName {
    --label-ink: #50493d;
}

.dearPage #color-serena .colorName {
    --label-ink: #39445e;
}

.dearPage #color-olivia .colorName {
    --label-ink: #515c47;
}

.dearPage #color-noel .colorName {
    --label-ink: #44464c;
}

.dearPage #color-clarissa .colorName {
    --label-ink: #456773;
}

.dearPage #color-flora .colorName {
    --label-ink: #865e64;
}

.dearPage .colorName .en::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/first-mayla-ornaments.webp?v=53b5a20e') center/contain no-repeat;
    filter: brightness(0) invert(50%) sepia(100%) saturate(146.05766%) hue-rotate(355.550deg) brightness(91.22494%);
}

.dearPage .colorName .en {
    position: relative;
    width: max-content;
    max-width: 100%;
    padding: 0 62px;
    margin: 0;
    color: var(--label-ink);
    font: 400 42px / 1.15 Garamond, "Times New Roman", serif;
    letter-spacing: .035em;
}

.dearPage .colorName .jp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 11px 0 0;
    color: var(--label-ink);
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: .16em;
}

.dearPage .colorName .jp span {
    padding-left: .16em;
}

.dearPage .colorName .jp::before,
.dearPage .colorName .jp::after {
    content: "";
    width: 38px;
    height: 1px;
    background: linear-gradient(to right, transparent, #aa8c6180);
}

.dearPage .colorName .jp::after {
    transform: rotate(180deg);
}

.dearPage .colorName .colorCatch {
    max-width: 100%;
    margin: 18px 0 0;
    color: #766c65;
    font-size: 14px;
    line-height: 1.95;
    letter-spacing: .035em;
    text-wrap: balance;
}

.dearPage .colorName .colorPhrase {
    display: inline;
}

@media(max-width:587px) {
    .dearPage .mainVisualWrap .colorName {
        width: 85%;
        margin-top: 24px;
        padding: 0;
    }

    .dearPage .colorName .en {
        padding: 0 48px;
        font-size: 34px;
    }

    .dearPage .colorName .jp {
        gap: 12px;
        margin-top: 8px;
        font-size: 12px;
    }

    .dearPage .colorName .jp::before,
    .dearPage .colorName .jp::after {
        width: 30px;
    }

    .dearPage .colorName .colorCatch {
        margin-top: 15px;
        font-size: 12px;
        line-height: 1.9;
    }

    .dearPage .colorName .colorPhrase {
        display: block;
    }
}

/* User-directed placement within each photograph's empty space. */
.dearPage [data-color="olivia"] .modelVisualQuestion {
    left: auto;
    right: 8%;
    top: auto;
    bottom: 13%;
}

.dearPage [data-color="serena"] .modelVisualQuestion {
    left: 10%;
    right: auto;
}

/* Square product thumbnails keep the supplied skirt fully visible. */
.dearPage .productVisualPager .productThumbnail {
    aspect-ratio: 1;
    object-fit: contain;
}

.dearPage .productVisualPager {
    align-items: center;
}

/* Use the supplied photographs at their natural proportion. */
.dearPage .completedPhoto {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.dearPage .componentHero.completedPhoto {
    aspect-ratio: auto;
}

.dearPage .timeBoxVisual {
    width: 100%;
    margin: var(--space-related) 0 24px;
}

.dearPage .timeBoxVisual img {
    width: 100%;
    height: auto;
}

/* Alternating photo and copy follows the user's detail reference. */
.dearPage .productDetails {
    container-type: inline-size;
    gap: 40px;
}

.dearPage .detailItem,
.dearPage #skirt .detailItem {
    display: grid;
    grid-template-columns: 569fr 610fr;
    gap: 3.2%;
    align-items: center;
}

.dearPage .detailItem.reverse,
.dearPage #skirt .detailItem.reverse {
    grid-template-columns: 610fr 569fr;
}

.dearPage .detailItem .detailImg {
    order: 0;
}

.dearPage .detailItem.reverse .detailImg {
    order: 2;
}

.dearPage .detailItem .detailTxt {
    order: 1;
    text-align: left;
    width: auto;
}

.dearPage .detailLabel {
    display: none;
}

.dearPage #corset .detailTxt h3,
.dearPage #ribbon .detailTxt h3 {
    font-size: clamp(18px, 3.94cqi, 28px);
    line-height: 1.55;
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #d2d0cc;
    text-wrap: initial;
}

.dearPage #corset .detailTxt .prose,
.dearPage #ribbon .detailTxt .prose {
    font-size: 14px;
    line-height: 1.85;
    text-align: left;
}

/* A small classical caption sits on the quiet lower left of each photograph. */
.dearPage .wearVisual {
    position: relative;
}

.dearPage .wearStyleTitle {
    position: absolute;
    z-index: 1;
    left: 4%;
    bottom: 4%;
    max-width: 66%;
    display: block;
    margin: 0;
    padding: 16px 22px 18px;
    border: 1px solid #b6956666;
    background: linear-gradient(120deg, #fffdf9ed, #fffdf9bd);
    color: var(--wear-caption-ink);
    text-align: left;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: .08em;
    box-shadow: 0 2px 14px #46352308;
}

.dearPage #wear-01 {
    --wear-caption-ink: #95616f;
}

.dearPage #wear-02 {
    --wear-caption-ink: #597583;
}

.dearPage #wear-03 {
    --wear-caption-ink: #535d74;
}

.dearPage .wearStyleTitle::before {
    content: "";
    display: block;
    width: 74px;
    height: 9px;
    margin: 0 0 8px;
    background: url('https://maylaclassic.com/maylaclassique/main/collection/dear/images/offer-divider.webp?v=a6166ab9') center/contain no-repeat;
    opacity: .8;
}

.dearPage .wearStyleTitle>span:first-child {
    display: block;
    width: auto;
    margin-bottom: 5px;
    color: #967441;
    font: 13px/1.5 Garamond, serif;
    letter-spacing: .18em;
}

.dearPage .wearStyleTitle .copyPhrase {
    display: inline-block;
}

.dearPage .wearStyleTitle>span[aria-hidden] {
    font-size: .8em;
    margin: 0 .2em;
}

/* Bilitis product cards and model information, scoped to this collection. */
.dearPage .wearProductItem {
    width: 70%;
    height: 100px;
    margin: 0 auto 15px;
    gap: 0;
    color: #766c65;
}

.dearPage .productCategory {
    flex: 0 1 auto;
    width: 60px;
    margin-left: 30px;
    padding: 6px;
    font-size: 12px;
}

.dearPage .productInfo {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.dearPage .productInfo p {
    margin: 0;
    font-family: "Noto Serif JP", serif;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: initial;
}

.dearPage .productInfo span {
    display: block;
    font-size: 10px;
    line-height: normal;
    padding: 5px 0;
    margin: 0;
}

.dearPage .productInfo p .productNamePhrase {
    display: inline-block;
    font: inherit;
    line-height: inherit;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}

.dearPage .wearProductItem img {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    max-height: none;
    object-fit: contain;
    margin-right: 30px;
}

.dearPage .wearModelProfile {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 12px;
    color: #87692D;
    font-size: 12px;
    letter-spacing: .08em;
}

.dearPage .wearModelProfile span+span::before {
    content: "／";
    margin: 0 10px;
    color: #87692D;
}

.dearPage .wearModelName {
    font-size: 13px;
}

.dearPage .wearModelName small {
    margin-right: 6px;
    color: #87692D;
    font-size: 9px;
    letter-spacing: .18em;
}

@media(max-width:587px) {

    .dearPage .productDetails,
    .dearPage #skirt .productDetails {
        gap: 30px;
    }

    .dearPage #skirt .detailItem+.detailItem {
        margin-top: 0;
    }

    .dearPage .detailItem,
    .dearPage .detailItem.reverse,
    .dearPage #skirt .detailItem,
    .dearPage #skirt .detailItem.reverse {
        gap: 3.2%;
    }

    .dearPage .detailItem .detailImg {
        order: 0;
    }

    .dearPage .detailItem.reverse .detailImg {
        order: 2;
    }

    .dearPage .detailItem .detailTxt {
        text-align: left;
    }

    .dearPage #corset .detailTxt h3,
    .dearPage #ribbon .detailTxt h3 {
        font-size: clamp(14px, 4.55cqi, 20px);
        padding-bottom: 7px;
        margin-bottom: 8px;
    }

    .dearPage #corset .detailTxt .prose,
    .dearPage #ribbon .detailTxt .prose {
        font-size: clamp(10px, 3.15cqi, 12px);
        line-height: 1.8;
    }

    .dearPage #skirt .skirtDetailCopy {
        height: auto;
    }

    .dearPage #skirt .skirtDetailHeading {
        position: static;
        text-align: left;
    }

    .dearPage #skirt .skirtDetailLine {
        position: static;
        white-space: normal;
        text-align: left;
        line-height: 1.55;
    }

    .dearPage #skirt .skirtDetailHeading .skirtDetailLine {
        font-size: clamp(14px, 4.55cqi, 20px);
    }

    .dearPage #skirt .skirtDetailBody .skirtDetailLine {
        font-size: clamp(10px, 3.15cqi, 12px);
        line-height: 1.8;
    }

    .dearPage #skirt .skirtDetailRule {
        position: static;
        margin: 8px 0;
    }

    .dearPage #skirt .skirtDetailBody,
    .dearPage #skirt .skirtDetailBody p {
        text-align: left;
    }

    .dearPage .wearStyleTitle {
        left: 4%;
        bottom: 4%;
        max-width: 72%;
        padding: 10px 13px 12px;
        font-size: clamp(11px, 3.05vw, 15px);
        letter-spacing: .04em;
    }

    .dearPage .wearStyleTitle>span:first-child {
        font-size: 10px;
        margin-bottom: 3px;
    }

    .dearPage .wearStyleTitle::before {
        width: 54px;
        height: 7px;
        margin-bottom: 5px;
    }

    .dearPage .wearProductItem {
        width: 90%;
        height: 75px;
        gap: 0;
    }

    .dearPage .productCategory {
        width: 50px;
        margin-left: 20px;
        font-size: 9px;
        padding: 6px;
    }

    .dearPage .productInfo p {
        font-size: 11px;
    }

    .dearPage .productInfo span {
        font-size: 8px;
    }

    .dearPage .wearProductItem img {
        width: 45px;
        height: 45px;
        margin-right: 20px;
    }

    .dearPage .wearModelProfile {
        justify-content: center;
        margin-top: 8px;
        font-size: 10px;
    }

    .dearPage .wearModelProfile span+span::before {
        margin: 0 6px;
    }

    .dearPage .wearModelName {
        font-size: 11px;
    }

    .dearPage .wearModelName small {
        margin-right: 4px;
        font-size: 8px;
    }

    .dearPage .wearModelProfile {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .dearPage .wearModelProfile>span {
        white-space: nowrap;
    }
}

@media(max-width:360px) {
    .dearPage .wearProductItem {
        height: auto;
        min-height: 75px;
        padding: 10px 0;
    }

    .dearPage .wearModelProfile>span:last-child {
        flex-basis: 100%;
        text-align: center;
    }

    .dearPage .wearModelProfile>span:last-child::before {
        display: none;
    }
}

/* User reference: ordinary text uses #766C65; accent colors remain. */
.dearPage {
    --circle-text: #766c65;
}

.dearPage .eventOfferNote {
    color: var(--circle-text);
}

/* Time box heading follows the user-selected base text color. */
.dearPage #time-box>.boxHeading,
.dearPage #time-box>.boxHeading .en {
    color: var(--circle-text);
}

/* Complete user-supplied special-offer announcement. */
.dearPage .eventOfferPoster .eventOfferDetails {
    margin-top: 26px;
    color: var(--circle-text);
}

.dearPage .eventOfferPoster .eventOfferDetails p {
    margin: 0;
    font-size: 13px;
    line-height: 1.95;
    letter-spacing: .02em;
    text-wrap: balance;
}

.dearPage .eventOfferPoster .eventOfferDetails p+p {
    margin-top: 16px;
}

.dearPage .eventOfferPoster .eventOfferEvent>span {
    display: block;
}

.dearPage .eventOfferPoster .eventOfferDetails .eventOfferClosing {
    margin-top: 22px;
    color: #987443;
    letter-spacing: .08em;
}

@media(max-width:587px) {
    .dearPage .eventOfferPoster .eventOfferDetails {
        margin-top: 22px;
    }

    .dearPage .eventOfferPoster .eventOfferDetails p {
        font-size: 11px;
        line-height: 1.9;
    }

    .dearPage .eventOfferPoster .eventOfferDetails p+p {
        margin-top: 14px;
    }

    .dearPage .eventOfferPoster .eventOfferDetails .eventOfferClosing {
        margin-top: 18px;
    }
}

/* New artwork includes a logo at upper left; retain the question in the lower empty space. */
.dearPage .imageFrame .modelVisualQuestion,
.dearPage [data-color] .modelVisualQuestion {
    top: auto;
    left: 9%;
    right: auto;
    bottom: 10%;
    width: 10.5%;
}

/* Opening question and collection subtitle precede the first movie. */
.dearPage .openingHeading {
    padding: 44px 18px 48px;
    text-align: center;
    color: #766c65;
}

.dearPage .openingQuestion {
    margin: 0;
    padding: 0;
    font: 400 clamp(26px, 2.4vw, 38px)/1.8 "fot-matisse-pron", "Noto Serif JP", "Yu Mincho", serif;
    letter-spacing: .06em;
}

.dearPage .openingQuestion>span {
    display: inline-block;
}

.dearPage .openingSubtitle {
    margin: 18px 0 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: .08em;
}

@media(max-width:587px) {
    .dearPage .openingHeading {
        padding: 24px 8px 34px;
    }

    .dearPage .openingQuestion {
        font-size: 25px;
        line-height: 1.7;
        letter-spacing: .03em;
    }

    .dearPage .openingQuestion>span {
        display: block;
    }

    .dearPage .openingSubtitle {
        margin-top: 16px;
        font-size: 13px;
        letter-spacing: .04em;
    }
}

/* Framed chapter headings use the body ink, including both languages. */
.dearPage .sectionTtl,
.dearPage .sectionTtl .en,
.dearPage .sectionTtl .jp {
    color: #766c65;
}
/* Display the supplied alpha image directly so cross-origin masks do not hide it. */
.dearPage .imageFrame .modelVisualQuestion, .dearPage [data-color] .modelVisualQuestion { background-color:transparent; -webkit-mask-image:none; mask-image:none; }
.dearPage .imageFrame .modelVisualQuestion img { display:block; position:static; width:100%; height:100%; margin:0; object-fit:contain; pointer-events:none; }
.dearPage [data-color="sophia"] .modelVisualQuestion img { filter:brightness(0) invert(50%) sepia(100%) saturate(288.86715%) hue-rotate(296.125deg) brightness(44.60901%); }
.dearPage [data-color="emma"] .modelVisualQuestion img { filter:brightness(0) invert(50%) sepia(100%) saturate(75.40059%) hue-rotate(359.200deg) brightness(47.51382%); }
.dearPage [data-color="serena"] .modelVisualQuestion img { filter:brightness(0) invert(50%) sepia(100%) saturate(165.59657%) hue-rotate(184.300deg) brightness(43.57643%); }
.dearPage [data-color="olivia"] .modelVisualQuestion img { filter:brightness(0) invert(50%) sepia(100%) saturate(82.72931%) hue-rotate(48.600deg) brightness(56.88521%); }
.dearPage [data-color="noel"] .modelVisualQuestion img { filter:brightness(0) invert(50%) sepia(100%) saturate(35.43876%) hue-rotate(187.475deg) brightness(45.17668%); }
.dearPage [data-color="clarissa"] .modelVisualQuestion img { filter:brightness(0) invert(50%) sepia(100%) saturate(134.76910%) hue-rotate(149.600deg) brightness(62.35652%); }
.dearPage [data-color="flora"] .modelVisualQuestion img { filter:brightness(0) invert(50%) sepia(100%) saturate(118.93544%) hue-rotate(301.400deg) brightness(66.43340%); }

/* Detail descriptions wrap continuously on mobile; desktop line breaks remain. */
@media (max-width: 587px) {
    .dearPage .detailItem .detailTxt .prose {
        line-break: strict;
        word-break: normal;
        overflow-wrap: normal;
        text-wrap: wrap;
    }
    .dearPage .detailItem .detailTxt .prose br {
        display: none;
    }
    .dearPage .detailItem .detailTxt .prose .copyLine,
    .dearPage #skirt .skirtDetailBody .skirtDetailLine {
        display: inline;
        white-space: normal;
        text-wrap: wrap;
    }
}

/* Socks lead from the skirt purchase card to the brand destination. */
.dearPage .productBannerArea { width: min(100%, 760px); margin: 80px auto 0; }
.dearPage .productBanner { display: block; width: 100%; text-decoration: none; }
.dearPage .productBanner img { display: block; width: 100%; height: auto; transition: opacity .3s ease; }
@media (hover: hover) { .dearPage .productBanner:hover img { opacity: .8; } }
/* Time box belongs to the dressing chapters and uses their heading spacing. */
.dearPage .productContainer>#time-box { margin-top: var(--space-chapter); }
/* Keep the final action clear of the footer rule. */
.dearPage #event.eventSection { padding-bottom: 72px; }
@media (max-width: 587px) {
    .dearPage .productBannerArea { margin-top: 60px; }
    .dearPage #event.eventSection { padding-bottom: 48px; }
}

/* Text offer immediately below the opening movie. */
.dearPage .introOffer {
    --offer-burgundy: #700b0b;
    --offer-gold: #ae8547;
    width: 100%;
    container-type: inline-size;
    container-name: dear-intro-offer;
    margin: 56px auto 0;
    color: #766c65;
    font-weight: 400;
}
.dearPage .introOffer p { margin: 0; }
.dearPage .introOfferSummary {
    display: grid;
    grid-template-columns: 136px 176px 38px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}
.dearPage .introOfferDeadline {
    position: relative;
    height: 130px;
    color: #fff;
    filter: drop-shadow(3px 4px 4px #0003);
    isolation: isolate;
}
.dearPage .introOfferDeadline::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--offer-burgundy);
    border-radius: 0 0 20px 20px;
    clip-path: polygon(0 0, 100% 0, 100% 77%, 98% 86%, 94% 91%, 90% 94%, 87% 99%, 80% 100%, 66% 96%, 59% 95%, 54% 97%, 50% 100%, 46% 97%, 41% 95%, 34% 96%, 20% 100%, 13% 99%, 10% 94%, 6% 91%, 2% 86%, 0 77%);
}
.dearPage .introOfferDate { display: block; font-family: "Times New Roman", serif; font-size: 51px; line-height: 1; }
.dearPage .introOfferDate::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 49px;
    width: 95px;
    height: 1px;
    background: currentColor;
    transform: rotate(-42deg);
}
.dearPage .introOfferMonth { position: absolute; top: 7px; left: 13px; }
.dearPage .introOfferDay { position: absolute; top: 38px; right: 13px; }
.dearPage .introOfferUntil { position: absolute; bottom: 17px; right: 17px; font-size: 23px; line-height: 1.2; }
.dearPage .introOfferRegular { min-width: 0; }
.dearPage .introOfferDiscount {
    padding: 5px 2px 6px;
    border: 1px solid var(--offer-burgundy);
    color: var(--offer-burgundy);
    text-align: center;
    white-space: nowrap;
    font: 24px/1.25 "Times New Roman", "Noto Serif JP", serif;
}
.dearPage .introOfferDiscount span { font-size: .86em; }
.dearPage .introOfferRegularLabel { display: flex; align-items: baseline; justify-content: space-between; padding-top: 9px; font-size: 20px; line-height: 1.4; white-space: nowrap; }
.dearPage .introOfferRegularLabel span { font-size: 10px; letter-spacing: 0; }
.dearPage .introOfferRegularPrice { white-space: nowrap; font-size: 20px; line-height: 1.15; }
.dearPage .introOfferRegularPrice>span { font: 35px/1.15 "Times New Roman", serif; }
.dearPage .introOfferRegularPrice small { font-size: 11px; }
.dearPage .introOfferArrow {
    display: block;
    height: 33px;
    margin-top: 43px;
    background: var(--offer-burgundy);
    clip-path: polygon(0 26%, 58% 26%, 58% 0, 100% 50%, 58% 100%, 58% 74%, 0 74%);
}
.dearPage .introOfferSpecial { min-width: 0; color: var(--offer-burgundy); }
.dearPage .introOfferSpecialLabel { padding-bottom: 3px; color: var(--offer-gold); font-size: 22px; line-height: 1.4; text-align: center; white-space: nowrap; }
.dearPage .introOfferSpecialPrice { display: flex; justify-content: center; align-items: flex-end; gap: 5px; white-space: nowrap; }
.dearPage .introOfferAmount { font: 81px/.95 "Times New Roman", serif; letter-spacing: -.035em; }
.dearPage .introOfferUnit { display: flex; flex-direction: column; align-items: center; font-size: 36px; line-height: 1; }
.dearPage .introOfferUnit small { margin-bottom: 4px; font-size: 11px; line-height: 1.2; }
.dearPage .introOfferTaxIncluded { padding-top: 5px; text-align: right; font-size: 11px; line-height: 1.25; }
.dearPage .introOfferPurchase {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(100%, 335px);
    min-height: 48px;
    margin: 24px auto 0;
    padding: 9px 15px;
    border: 1px solid var(--offer-gold);
    color: var(--offer-gold);
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: .12em;
    text-decoration: none;
    transition: background-color .2s;
}
@media (hover: hover) { .dearPage .introOfferPurchase:hover { background: #fbf8f3; } }
@media (max-width: 760px) {
    .dearPage .introOffer { margin-top: 64px; }
}
@container dear-intro-offer (max-width: 660px) {
    .dearPage .introOfferSummary {
        max-width: 420px;
        margin: 0 auto;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 0;
    }
    .dearPage .introOfferDeadline {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 44px;
        background: var(--offer-burgundy);
        filter: none;
        isolation: auto;
    }
    .dearPage .introOfferDeadline::before { display: none; }
    .dearPage .introOfferDate { display: inline-flex; align-items: center; font-size: 26px; line-height: 1; }
    .dearPage .introOfferMonth, .dearPage .introOfferDay { position: static; }
    .dearPage .introOfferDay { order: 2; }
    .dearPage .introOfferDate::after {
        position: static;
        top: auto;
        left: auto;
        order: 1;
        width: 1px;
        height: 23px;
        margin: 0 5px;
        transform: rotate(24deg);
    }
    .dearPage .introOfferUntil { position: static; font-size: 14px; }
    .dearPage .introOfferRegular { display: contents; }
    .dearPage .introOffer .introOfferDiscount {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 0;
        height: 44px;
        margin: 0;
        padding: 4px 3px;
        font-size: 18px;
    }
    .dearPage .introOfferRegularLabel {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: center;
        gap: 12px;
        padding-top: 16px;
        font-size: 14px;
    }
    .dearPage .introOfferRegularLabel span { font-size: 11px; }
    .dearPage .introOfferRegularPrice { grid-column: 1 / -1; grid-row: 3; text-align: center; font-size: 18px; }
    .dearPage .introOfferRegularPrice>span { font-size: 30px; }
    .dearPage .introOfferArrow { display: none; }
    .dearPage .introOfferSpecial {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #e3d7c6;
        text-align: center;
    }
    .dearPage .introOfferSpecialLabel { padding-bottom: 7px; font-size: 17px; }
    .dearPage .introOfferSpecialPrice { gap: 5px; }
    .dearPage .introOfferAmount { font-size: clamp(64px, 21cqw, 80px); }
    .dearPage .introOfferUnit { font-size: 30px; }
    .dearPage .introOfferUnit small { margin-bottom: 4px; font-size: 11px; }
    .dearPage .introOfferTaxIncluded { padding-top: 7px; text-align: center; font-size: 12px; }
    .dearPage .introOfferPurchase { width: min(100%, 420px); min-height: 46px; margin-top: 20px; font-size: 18px; }
}

/* Supplied comparison movie: A is the upper panel, B is the lower panel. */
.dearPage .productContainer>.comparisonSection {
    --comparison-ornament: url("https://maylaclassic.com/maylaclassique/main/collection/dear/images/comparison-ornament.webp?v=d926f48df9");
    margin: 80px 0 0;
    padding: 0;
    text-align: center;
    color: #766c65;
}
.dearPage .comparisonHeading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
    margin: 0 0 22px;
    color: #967441;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: .04em;
}
.dearPage .comparisonOrnament { width: 22px; height: 40px; flex: 0 0 auto; background: var(--comparison-ornament) center / contain no-repeat; }
.dearPage .comparisonOrnament:last-child { transform: scaleX(-1); }
.dearPage .comparisonIntro { margin: 0 auto 30px; width: 100%; font-size: 14px; line-height: 2.1; }
.dearPage .comparisonIntro p { margin: 0; }
.dearPage .comparisonPlayers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; }
.dearPage .comparisonProduct { margin: 0; min-width: 0; }
.dearPage .comparisonVideoFrame { position: relative; width: 100%; aspect-ratio: 3 / 2; background: #f4f2ef; overflow: hidden; }
.dearPage .comparisonVideo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; cursor: pointer; }
.dearPage .comparisonLetter { position: absolute; top: 3px; left: 14px; color: #322c30; font: 44px/1.2 Garamond,"Times New Roman",serif; pointer-events: none; }
.dearPage .comparisonProduct figcaption { margin-top: 12px; font-size: 18px; line-height: 1.75; color: #967441; }
.dearPage .comparisonProduct:last-child figcaption { color: #766c65; }
.dearPage .comparisonAccessibleLetter { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dearPage .comparisonControls { margin: 20px auto 0; }
.dearPage .comparisonReplay { padding: 9px 25px; border: 1px solid #c4ad8f; background: #fff; color: #967441; font: inherit; font-size: 13px; line-height: 1.6; cursor: pointer; }
.dearPage .comparisonReplay:hover { background: #faf7f2; }
.dearPage .comparisonReplay:focus-visible { outline: 2px solid #967441; outline-offset: 4px; }
.dearPage .comparisonStatus { margin: 8px 0 0; font-size: 12px; line-height: 1.6; }
.dearPage .comparisonStatus:empty { display: none; }
.dearPage .comparisonPoints { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 58px 32px; margin: 46px auto 0; }
.dearPage .comparisonPoint { min-width: 0; }
.dearPage .comparisonNumber { display: block; margin-bottom: 14px; color: #9b9188; font: 12px/1.5 Garamond,"Times New Roman",serif; letter-spacing: .12em; }
.dearPage .comparisonPoint h3 { margin: 0; color: #967441; font-weight: 500; line-height: 1.5; }
.dearPage .comparisonEnglish { display: block; font: 17px/1.45 Garamond,"Times New Roman",serif; }
.dearPage .comparisonJapanese { display: block; margin-top: 3px; font-size: 14px; }
.dearPage .comparisonPoint p { margin: 20px 0 0; color: #811625; font-size: 20px; line-height: 1.85; }
.dearPage .comparisonPlayers:fullscreen { box-sizing: border-box; width: 100vw; height: 100vh; padding: 5vh 3vw; background: #fff; align-content: center; }
.dearPage .comparisonPlayers:fullscreen .comparisonVideoFrame { max-height: 80vh; }
@media(max-width:587px) {
    .dearPage .productContainer>.comparisonSection { margin-top: 40px; }
    .dearPage .comparisonHeading { gap: 14px; margin-bottom: 18px; font-size: 22px; }
    .dearPage .comparisonOrnament { width: 15px; height: 28px; }
    .dearPage .comparisonIntro { font-size: 12px; line-height: 2.05; margin-bottom: 24px; }
    .dearPage .comparisonPlayers { gap: 12px; }
    .dearPage .comparisonLetter { left: 7px; top: 2px; font-size: 29px; }
    .dearPage .comparisonProduct figcaption { margin-top: 9px; font-size: 13px; }
    .dearPage .comparisonReplay { font-size: 12px; padding: 8px 20px; }
    .dearPage .comparisonPoints { gap: 40px 14px; margin-top: 36px; }
    .dearPage .comparisonNumber { font-size: 10px; margin-bottom: 10px; }
    .dearPage .comparisonEnglish { font-size: 12px; }
    .dearPage .comparisonJapanese { font-size: 11px; }
    .dearPage .comparisonPoint p { margin-top: 16px; font-size: 14px; line-height: 1.85; }
}

/* Four wearing combinations; the supplied XD scene sits before each product accordion. */
.dearPage #wearing[data-wearing-version="4way"] .wearScene { position: relative; margin: 75px 0 24px; color: #967441; }
.dearPage .wearSceneIllustration { position: relative; }
.dearPage .wearSceneImage { display: block; width: 100%; height: auto; }
.dearPage .wearSceneCopy { position: absolute; top: -43px; left: 3%; width: 70%; z-index: 1; text-align: left; }
.dearPage .wearSceneCopy h3 { margin: 0 0 10px; color: #967441; font: 500 34px/1.45 "fot-matisse-pron","Noto Serif JP","Yu Mincho",serif; }
.dearPage .wearSceneCopy p { margin: 0; color: #967441; font-size: 14px; line-height: 1.9; }
.dearPage .wearSceneCaption { position: absolute; top: 57%; left: 3%; width: 61%; transform: translateY(-50%); margin: 0; text-align: center; color: #967441; }
.dearPage .wearSceneEn { display: block; margin-bottom: 6px; font: 15px/1.4 Garamond,"Times New Roman",serif; }
.dearPage .wearSceneSituations { display: block; font-size: 19px; line-height: 1.65; }
.dearPage .wearSceneSituations>span { display: inline-block; }
.dearPage .wearPhotoPending { aspect-ratio: 695 / 856; }
.dearPage .wearProductPending { box-sizing: border-box; margin: 0; padding: 32px 15px; text-align: center; font-size: 14px; line-height: 1.9; color: #766c65; }
@media(max-width:760px) {
    .dearPage #wearing[data-wearing-version="4way"] .wearScene { margin-top: 24px; margin-bottom: 22px; }
    .dearPage .wearSceneCopy { position: static; width: 100%; margin: 0 0 8px; }
    .dearPage .wearSceneCopy h3 { font-size: 21px; line-height: 1.6; margin-bottom: 8px; }
    .dearPage .wearSceneCopy p { font-size: 12px; line-height: 1.95; }
    .dearPage .wearSceneCaption { top: 57%; left: 3%; width: 61%; }
    .dearPage .wearSceneEn { margin-bottom: 3px; font-size: 10px; }
    .dearPage .wearSceneSituations { font-size: 12px; line-height: 1.6; }
    .dearPage .wearProductPending { font-size: 12px; }
}

/* Requested SP line layout; original media references remain unchanged. */
.dearPage .comparisonIntroSpBreak { display: none; }
@media(max-width:587px) {
    .dearPage .comparisonIntroSpBreak { display: initial; }
    .dearPage .wearSceneSituations { font-size: clamp(8px,2.6vw,12px); white-space: nowrap; letter-spacing: 0; word-spacing: -.05em; }
}