/* =========================================================
   RYNA WOMAN - SIZE GUIDE
   Reference layout matched to the supplied screenshot
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: #fff7f9;
    color: #4b3d43;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   PAGE
========================================================= */

.size-guide-page {
    width: 100%;

    min-height: 100vh;

    padding:
        27px 0 80px;

    background:
        #fff7f9;
}


/* =========================================================
   CONTAINER
========================================================= */

.size-guide-container {
    width:
        507px;

    max-width:
        calc(100% - 28px);

    margin:
        0 auto;
}


/* =========================================================
   INTRO
========================================================= */

.size-guide-intro {
    margin-bottom:
        24px;
}

.size-guide-eyebrow {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #9e858e;

    font-size:
        8px;

    line-height:
        1;

    font-weight:
        400;
}

.size-guide-intro h1 {
    margin:
        0;

    color:
        #2f2429;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        28px;

    line-height:
        1.2;

    font-weight:
        400;
}

.size-guide-intro p {
    margin:
        9px 0 0;

    color:
        #4c4147;

    font-size:
        9.5px;

    line-height:
        1.55;
}


/* =========================================================
   INFORMATION
========================================================= */

.size-chart-information {
    width: 100%;

    margin-bottom:
        31px;
}


/* =========================================================
   IMPORTANT NOTE
========================================================= */

.size-guide-note {
    width:
        100%;

    padding:
        10px 12px;

    border:
        1px solid
        #dfd0d5;

    background:
        rgba(
            255,
            251,
            252,
            .5
        );

    color:
        #4f4147;

    font-size:
        8.5px;

    line-height:
        1.5;
}

.size-guide-note strong {
    color:
        #42343a;

    font-weight:
        700;
}


/* =========================================================
   CHART SECTION
========================================================= */

.size-chart-section {
    width:
        100%;

    margin-bottom:
        30px;
}

.size-chart-heading-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        10px;
}

.size-chart-section h2 {
    margin:
        0;

    color:
        #55464d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        12px;

    line-height:
        1.3;

    font-weight:
        400;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.size-chart-wrapper {
    width:
        100%;

    overflow-x:
        auto;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width:
        thin;
}


/* =========================================================
   TABLE
========================================================= */

.size-chart {
    width:
        100%;

    border-collapse:
        collapse;

    table-layout:
        fixed;

    background:
        transparent;
}


/* =========================================================
   TABLE CELLS
========================================================= */

.size-chart th,
.size-chart td {
    height:
        29px;

    padding:
        5px 7px;

    border:
        1px solid
        #ebdfe2;

    text-align:
        center;

    color:
        #4e4147;

    font-size:
        8px;

    line-height:
        1.2;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        clip;
}


/* =========================================================
   HEADER
========================================================= */

.size-chart thead th {
    background:
        #fffaf7;

    color:
        #46393f;

    font-weight:
        600;
}

.size-chart thead th:first-child {
    width:
        70px;

    text-align:
        left;

    padding-left:
        10px;
}


/* =========================================================
   MEASUREMENT LABEL COLUMN
========================================================= */

.size-chart tbody th {
    width:
        70px;

    background:
        rgba(
            255,
            249,
            250,
            .58
        );

    color:
        #9a858d;

    text-align:
        left;

    padding-left:
        10px;

    font-weight:
        400;
}


/* =========================================================
   BODY CELLS
========================================================= */

.size-chart tbody td {
    background:
        rgba(
            255,
            247,
            249,
            .35
        );
}


/* =========================================================
   EMPTY ROW
========================================================= */

.size-chart-empty-row {
    height:
        45px;

    color:
        #9a858d !important;

    text-align:
        center !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.size-chart-description {
    margin-top:
        10px;

    color:
        #7b6b72;

    font-size:
        8.5px;

    line-height:
        1.5;
}


/* =========================================================
   HELP
========================================================= */

.size-guide-help {
    margin-top:
        5px;

    color:
        #7b6b72;

    font-size:
        8.5px;

    line-height:
        1.5;
}

.size-guide-help a {
    color:
        #8c737c;

    text-decoration:
        underline;

    text-decoration-color:
        #cdb9c0;

    text-underline-offset:
        2px;
}

.size-guide-help a:hover {
    color:
        #a35f75;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.size-guide-empty {
    min-height:
        360px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    text-align:
        center;

    border-top:
        1px solid
        #eadde1;
}

.size-guide-empty-icon {
    width:
        64px;

    height:
        64px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        15px;

    border-radius:
        50%;

    background:
        #fae9ee;

    color:
        #b97b8d;

    font-size:
        23px;
}

.size-guide-empty h2 {
    margin:
        0 0 6px;

    color:
        #44363d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        23px;

    font-weight:
        400;
}

.size-guide-empty p {
    margin:
        0;

    color:
        #85757c;

    font-size:
        9px;
}

.size-guide-empty a {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    margin-top:
        17px;

    padding:
        0 17px;

    border:
        1px solid
        #302629;

    background:
        #302629;

    color:
        #fff;

    font-size:
        9px;
}

.size-guide-empty a:hover {
    background:
        #b66d81;

    border-color:
        #b66d81;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .size-guide-page {
        padding:
            24px 0 65px;
    }

    .size-guide-container {
        width:
            507px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 540px) {

    .size-guide-container {
        max-width:
            calc(100% - 22px);
    }

    .size-guide-intro h1 {
        font-size:
            26px;
    }

    .size-guide-intro p {
        font-size:
            9px;
    }

    .size-guide-note {
        padding:
            9px 10px;

        font-size:
            8px;
    }

    .size-chart-section {
        margin-bottom:
            27px;
    }

    .size-chart-section h2 {
        font-size:
            11px;
    }

    /*
     * Keep the screenshot-style horizontal table layout
     * on small screens instead of squeezing the columns.
     */
    .size-chart {
        min-width:
            500px;
    }

    .size-chart th,
    .size-chart td {
        height:
            28px;

        padding:
            5px 6px;

        font-size:
            7.5px;
    }

    .size-chart thead th:first-child,
    .size-chart tbody th {
        width:
            70px;
    }

    .size-guide-help {
        font-size:
            8px;
    }

}