/* =========================================================
   RACE ARTWORK PERSONALISER
   FULL CONSOLIDATED CSS
========================================================= */


/* =========================================================
   ROOT
========================================================= */

.rap-personaliser {
    --rap-purple: #5c2d91;
    --rap-purple-dark: #4c2378;

    --rap-black: #111111;
    --rap-text: #252525;

    --rap-grey: #99989e;
    --rap-line: #292936;
    --rap-border: #dedde1;

    --rap-control-width: 560px;

    display: block !important;

    width: 100% !important;
    max-width: 1200px !important;

    margin: 0 auto !important;

    padding:
        56px
        40px
        64px !important;

    color: var(--rap-black) !important;

    font-family: inherit !important;

    box-sizing: border-box !important;
}


.rap-personaliser *,
.rap-personaliser *::before,
.rap-personaliser *::after {
    box-sizing: border-box !important;
}


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

.rap-personaliser .rap-header {
    display: block !important;

    width: 100% !important;
    max-width: 900px !important;

    margin:
        0
        0
        48px
        0 !important;

    padding: 0 !important;
}


/*
 * FIRST HEADING:
 * deliberately no !important.
 */
.rap-personaliser .rap-header h2 {
    max-width: 780px;

    margin:
        0
        0
        18px
        0;

    padding: 0;

    color: var(--rap-purple);

    font-family: inherit;

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -1.5px;
}


.rap-personaliser .rap-header p {
    display: block !important;

    width: 100% !important;
    max-width: 680px !important;

    margin: 0 !important;

    padding: 0 !important;

    color: var(--rap-text) !important;

    font-family: inherit !important;

    font-size: 17px !important;

    line-height: 1.6 !important;
}


/* =========================================================
   HIDDEN
========================================================= */

.rap-personaliser .rap-content[hidden],
.rap-personaliser .rap-distance-section[hidden],
.rap-personaliser .rap-select-menu[hidden],
.rap-personaliser .rap-artwork-loading[hidden] {
    display: none !important;
}


.rap-personaliser .rap-content {
    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* =========================================================
   SECTIONS
========================================================= */

.rap-personaliser .rap-section {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin:
        0
        0
        42px
        0 !important;

    padding: 0 !important;

    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
}


/* =========================================================
   STEP LABEL
========================================================= */

.rap-personaliser .rap-step-label {
    display: block !important;

    width: auto !important;

    margin:
        0
        0
        10px
        0 !important;

    padding: 0 !important;

    color: var(--rap-purple) !important;

    font-family: inherit !important;

    font-size: 12px !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    letter-spacing: 1.6px !important;

    text-transform: uppercase !important;
}


/* =========================================================
   SECTION TITLES
========================================================= */

.rap-personaliser .rap-section-title {
    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    color: var(--rap-black) !important;

    font-family: inherit !important;

    font-size: 26px !important;

    font-weight: 650 !important;

    line-height: 1.25 !important;

    text-transform: none !important;
}


/* =========================================================
   FIELD
========================================================= */

.rap-personaliser .rap-field {
    display: block !important;

    width: 100% !important;

    max-width:
        var(--rap-control-width) !important;

    margin: 0 !important;

    padding: 0 !important;

    gap: 0 !important;
}


.rap-personaliser .rap-label {
    display: block !important;

    width: auto !important;

    margin:
        0
        0
        10px
        0 !important;

    padding: 0 !important;

    color: var(--rap-black) !important;

    font-family: inherit !important;

    font-size: 18px !important;

    font-style: normal !important;

    font-weight: 600 !important;

    line-height: 1.35 !important;

    letter-spacing: normal !important;

    text-align: left !important;

    text-transform: none !important;
}


/* =========================================================
   NAME INPUT
========================================================= */

html body
.rap-personaliser
input.rap-name-input {
    -webkit-appearance:
        none !important;

    appearance:
        none !important;

    display:
        block !important;

    width:
        100% !important;

    max-width:
        var(--rap-control-width) !important;

    height:
        52px !important;

    min-height:
        52px !important;

    max-height:
        52px !important;

    margin:
        0 !important;

    padding:
        9px
        8px !important;

    border-top:
        0 !important;

    border-left:
        0 !important;

    border-right:
        0 !important;

    border-bottom:
        3px solid
        var(--rap-line) !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;

    color:
        var(--rap-black) !important;

    font-family:
        inherit !important;

    font-size:
        16px !important;

    font-style:
        normal !important;

    font-weight:
        500 !important;

    line-height:
        1.3 !important;

    letter-spacing:
        normal !important;

    text-align:
        left !important;

    text-transform:
        none !important;

    outline:
        none !important;

    box-shadow:
        none !important;

    transform:
        none !important;

    aspect-ratio:
        auto !important;
}


html body
.rap-personaliser
input.rap-name-input:hover,
html body
.rap-personaliser
input.rap-name-input:focus,
html body
.rap-personaliser
input.rap-name-input:active {
    border-bottom-color:
        var(--rap-purple) !important;

    background:
        transparent !important;

    outline:
        none !important;

    box-shadow:
        none !important;
}


html body
.rap-personaliser
input.rap-name-input::placeholder {
    color:
        #aaa9ae !important;

    font-family:
        inherit !important;

    font-size:
        15px !important;

    font-style:
        italic !important;

    font-weight:
        500 !important;

    opacity:
        1 !important;
}


/* =========================================================
   CUSTOM SELECT
========================================================= */

.rap-personaliser .rap-custom-select {
    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    max-width:
        var(--rap-control-width) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    z-index:
        30 !important;
}


/* =========================================================
   SELECT TRIGGER
========================================================= */

html body
.rap-personaliser
button.rap-select-trigger {
    -webkit-appearance:
        none !important;

    appearance:
        none !important;

    position:
        relative !important;

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        16px !important;

    width:
        100% !important;

    max-width:
        var(--rap-control-width) !important;

    height:
        52px !important;

    min-height:
        52px !important;

    max-height:
        52px !important;

    margin:
        0 !important;

    padding:
        9px
        8px !important;

    border-top:
        0 !important;

    border-left:
        0 !important;

    border-right:
        0 !important;

    border-bottom:
        3px solid
        var(--rap-line) !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;

    color:
        var(--rap-black) !important;

    font-family:
        inherit !important;

    font-size:
        16px !important;

    font-style:
        normal !important;

    font-weight:
        500 !important;

    line-height:
        1.3 !important;

    letter-spacing:
        normal !important;

    text-align:
        left !important;

    text-decoration:
        none !important;

    text-transform:
        none !important;

    cursor:
        pointer !important;

    outline:
        none !important;

    box-shadow:
        none !important;

    transform:
        none !important;

    aspect-ratio:
        auto !important;
}


html body
.rap-personaliser
button.rap-select-trigger:hover,
html body
.rap-personaliser
button.rap-select-trigger:focus,
html body
.rap-personaliser
button.rap-select-trigger:focus-visible,
html body
.rap-personaliser
button.rap-select-trigger:active {
    background:
        transparent !important;

    color:
        var(--rap-black) !important;

    border-bottom-color:
        var(--rap-purple) !important;

    outline:
        none !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}


/* =========================================================
   SELECT VALUE
========================================================= */

html body
.rap-personaliser
button.rap-select-trigger
> .rap-select-value {
    position:
        static !important;

    display:
        block !important;

    flex:
        1
        1
        auto !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    height:
        auto !important;

    margin:
        0
        auto
        0
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    color:
        inherit !important;

    font:
        inherit !important;

    line-height:
        inherit !important;

    letter-spacing:
        inherit !important;

    text-align:
        left !important;

    text-decoration:
        none !important;

    text-transform:
        none !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}


/* =========================================================
   SELECT ARROW
========================================================= */

/*
 * PHP keeps the arrow span, but the visible arrow is drawn
 * with the trigger's ::after so theme span styles cannot
 * make it disappear.
 */

html body
.rap-personaliser
button.rap-select-trigger
> .rap-select-arrow {
    display:
        none !important;
}


html body
.rap-personaliser
button.rap-select-trigger::after {
    content:
        "" !important;

    display:
        block !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    flex:
        0
        0
        10px !important;

    width:
        10px !important;

    min-width:
        10px !important;

    max-width:
        10px !important;

    height:
        10px !important;

    min-height:
        10px !important;

    max-height:
        10px !important;

    margin:
        0
        0
        0
        auto !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-right:
        2px solid
        var(--rap-purple) !important;

    border-bottom:
        2px solid
        var(--rap-purple) !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    background-image:
        none !important;

    box-shadow:
        none !important;

    transform:
        rotate(45deg)
        translateY(-3px) !important;

    transform-origin:
        center center !important;

    pointer-events:
        none !important;
}


html body
.rap-personaliser
.rap-custom-select.is-open
button.rap-select-trigger::after {
    transform:
        rotate(225deg)
        translateY(-1px) !important;
}


/* Desktop + tablet arrow further right. */

@media (min-width: 601px) {

    html body
    .rap-personaliser
    button.rap-select-trigger::after {
        margin-right:
            -4px !important;
    }

}


/* Mobile arrow normal inset. */

@media (max-width: 600px) {

    html body
    .rap-personaliser
    button.rap-select-trigger::after {
        margin-right:
            2px !important;
    }

}


/* =========================================================
   SELECT MENU
========================================================= */

.rap-personaliser .rap-select-menu {
    position:
        absolute !important;

    z-index:
        200 !important;

    top:
        calc(100% + 7px) !important;

    left:
        0 !important;

    right:
        0 !important;

    display:
        block !important;

    width:
        100% !important;

    max-width:
        var(--rap-control-width) !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        6px !important;

    overflow:
        hidden !important;

    border:
        1px solid
        var(--rap-border) !important;

    border-radius:
        3px !important;

    background:
        #ffffff !important;

    box-shadow:
        0
        14px
        36px
        rgba(
            0,
            0,
            0,
            0.14
        ) !important;
}


.rap-personaliser
.rap-select-menu[hidden] {
    display:
        none !important;
}


/*
 * Absolute dropdowns need to reserve real page space
 * on desktop/tablet so the page/footer does not touch them.
 */

@media (min-width: 601px) {

    .rap-personaliser
    .rap-custom-select[data-rap-select="location"].is-open {
        margin-bottom:
            135px !important;
    }


    .rap-personaliser
    .rap-custom-select[data-rap-select="distance"].is-open {
        margin-bottom:
            180px !important;
    }

}


/* =========================================================
   SELECT OPTIONS
========================================================= */

html body
.rap-personaliser
.rap-select-menu
button.rap-select-option {
    -webkit-appearance:
        none !important;

    appearance:
        none !important;

    position:
        static !important;

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        12px !important;

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        46px !important;

    min-height:
        46px !important;

    max-height:
        46px !important;

    margin:
        0 !important;

    padding:
        10px
        12px !important;

    border:
        0 !important;

    border-radius:
        2px !important;

    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;

    color:
        var(--rap-black) !important;

    font-family:
        inherit !important;

    font-size:
        15px !important;

    font-style:
        normal !important;

    font-weight:
        500 !important;

    line-height:
        1.3 !important;

    letter-spacing:
        normal !important;

    text-align:
        left !important;

    text-decoration:
        none !important;

    text-transform:
        none !important;

    cursor:
        pointer !important;

    outline:
        none !important;

    box-shadow:
        none !important;

    transform:
        none !important;

    aspect-ratio:
        auto !important;
}


html body
.rap-personaliser
.rap-select-menu
button.rap-select-option::before,
html body
.rap-personaliser
.rap-select-menu
button.rap-select-option::after {
    content:
        none !important;

    display:
        none !important;
}


html body
.rap-personaliser
.rap-select-menu
button.rap-select-option
> span {
    position:
        static !important;

    display:
        block !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    color:
        inherit !important;

    font:
        inherit !important;

    line-height:
        inherit !important;

    text-align:
        left !important;

    text-transform:
        none !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}


html body
.rap-personaliser
.rap-select-menu
button.rap-select-option
> span:first-child {
    flex:
        1
        1
        auto !important;
}


/* Hover */

html body
.rap-personaliser
.rap-select-menu
button.rap-select-option:hover:not(:disabled),
html body
.rap-personaliser
.rap-select-menu
button.rap-select-option:focus-visible:not(:disabled) {
    background:
        #f4eff9 !important;

    color:
        var(--rap-purple) !important;
}


/* Selected */

html body
.rap-personaliser
.rap-select-menu
button.rap-select-option.is-selected,
html body
.rap-personaliser
.rap-select-menu
button.rap-select-option.is-selected:hover,
html body
.rap-personaliser
.rap-select-menu
button.rap-select-option.is-selected:focus,
html body
.rap-personaliser
.rap-select-menu
button.rap-select-option.is-selected:focus-visible {
    background:
        var(--rap-purple) !important;

    color:
        #ffffff !important;

    outline:
        none !important;
}


/* Disabled */

html body
.rap-personaliser
.rap-select-menu
button.rap-select-option:disabled,
html body
.rap-personaliser
.rap-select-menu
button.rap-select-option.is-disabled {
    background:
        transparent !important;

    color:
        var(--rap-black) !important;

    opacity:
        0.45 !important;

    cursor:
        not-allowed !important;

    transform:
        none !important;
}


/* =========================================================
   OPTION NOTE
========================================================= */

.rap-personaliser .rap-option-note {
    display:
        block !important;

    flex:
        0
        0
        auto !important;

    width:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--rap-purple) !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;

    letter-spacing:
        0.2px !important;

    white-space:
        nowrap !important;
}


.rap-personaliser
.rap-select-option.is-selected
.rap-option-note {
    color:
        #ffffff !important;
}


/* =========================================================
   AVAILABILITY
========================================================= */

.rap-personaliser
.rap-race-availability {
    display:
        block !important;

    min-height:
        0 !important;

    margin:
        8px
        0
        0
        0 !important;

    padding:
        0 !important;

    color:
        var(--rap-purple) !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;

    line-height:
        1.4 !important;
}


.rap-personaliser
.rap-race-availability:empty {
    display:
        none !important;

    margin:
        0 !important;
}


/* =========================================================
   PREVIEW
========================================================= */

.rap-personaliser
.rap-preview-heading-row {
    display:
        flex !important;

    align-items:
        baseline !important;

    justify-content:
        space-between !important;

    gap:
        20px !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.rap-personaliser
.rap-artwork-caption {
    display:
        block !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--rap-grey) !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    text-transform:
        uppercase !important;

    letter-spacing:
        0.5px !important;
}


.rap-personaliser
.rap-artwork-wrapper {
    display:
        block !important;

    width:
        100% !important;

    margin:
        20px
        0
        0
        0 !important;

    padding:
        0 !important;
}


.rap-personaliser
.rap-artwork-stage {
    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    max-width:
        900px !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    line-height:
        0 !important;
}


/*
 * JS changes opacity from 0 to 1.
 * DO NOT add !important to opacity.
 */
.rap-personaliser
.rap-artwork-image {
    display:
        block !important;

    width:
        100% !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    opacity: 0;

    border:
        0 !important;

    box-shadow:
        none !important;

    transition:
        opacity
        0.2s ease;
}


/*
 * JS changes both top and colour for the selected artwork.
 *
 * NORMAL = purple
 * ELITE = white
 *
 * DO NOT put !important on top or color.
 */
.rap-personaliser
.rap-artwork-name {
    position:
        absolute !important;

    left:
        50% !important;

    top: 52%;

    width:
        74% !important;

    max-width:
        74% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    transform:
        translate(
            -50%,
            -50%
        ) !important;

    color:
        var(--rap-purple);

    font-family:
        "AntennaCond-Black",
        "Arial Narrow",
        "Arial Black",
        Arial,
        sans-serif !important;

    font-weight:
        900 !important;

    line-height:
        0.95 !important;

    text-align:
        center !important;

    white-space:
        nowrap !important;

    overflow:
        visible !important;

    pointer-events:
        none !important;
}


/* =========================================================
   ARTWORK LOADING
========================================================= */

.rap-personaliser
.rap-artwork-loading {
    position:
        absolute !important;

    z-index:
        20 !important;

    inset:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        280px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        #f7f7f7 !important;

    color:
        #777777 !important;

    font-size:
        15px !important;

    line-height:
        1.4 !important;
}


.rap-personaliser
.rap-artwork-loading[hidden] {
    display:
        none !important;
}


/* =========================================================
   NAME FOOTER / COUNTER
========================================================= */

.rap-personaliser
.rap-field-footer {
    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        max-content !important;

    align-items:
        start !important;

    width:
        100% !important;

    max-width:
        var(--rap-control-width) !important;

    min-height:
        0 !important;

    height:
        auto !important;

    margin:
        8px
        0
        0
        0 !important;

    padding:
        0 !important;

    gap:
        12px !important;

    color:
        var(--rap-grey) !important;

    font-family:
        inherit !important;

    font-size:
        13px !important;

    line-height:
        1.4 !important;
}


.rap-personaliser
.rap-field-footer
> span:first-child {
    display:
        block !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        inherit !important;

    font:
        inherit !important;

    line-height:
        inherit !important;

    text-align:
        left !important;
}


.rap-personaliser
.rap-character-count {
    display:
        block !important;

    width:
        max-content !important;

    min-width:
        max-content !important;

    max-width:
        max-content !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        inherit !important;

    font:
        inherit !important;

    line-height:
        inherit !important;

    text-align:
        right !important;

    white-space:
        nowrap !important;

    word-break:
        keep-all !important;

    overflow-wrap:
        normal !important;
}


/* =========================================================
   NAME VALIDATION
========================================================= */

.rap-personaliser
.rap-name-feedback {
    display:
        block !important;

    width:
        100% !important;

    min-height:
        0 !important;

    margin:
        6px
        0
        0
        0 !important;

    padding:
        0 !important;

    color:
        #b3261e !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;

    line-height:
        1.4 !important;
}


.rap-personaliser
.rap-name-feedback:empty {
    display:
        none !important;

    margin:
        0 !important;
}


/* =========================================================
   DOWNLOAD SECTION
========================================================= */

.rap-personaliser
.rap-download-section {
    display:
        block !important;

    width:
        100% !important;

    max-width:
        900px !important;

    margin-bottom:
        0 !important;
}


.rap-personaliser
.rap-download-intro {
    display:
        block !important;

    margin:
        8px
        0
        12px
        0 !important;

    padding:
        0 !important;

    color:
        #666666 !important;

    font-size:
        15px !important;

    line-height:
        1.5 !important;
}


/* =========================================================
   DOWNLOAD GRID

   IMPORTANT:
   Button height/title/meta are inline in PHP.
   CSS owns ONLY the responsive grid.
========================================================= */

html body
.rap-personaliser
.rap-download-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        ) !important;

    grid-auto-flow:
        row !important;

    width:
        100% !important;

    margin:
        12px
        0
        0
        0 !important;

    padding:
        0 !important;

    gap:
        14px !important;
}


/*
 * Some themes add clearfix ::before / ::after.
 * In a grid these become fake grid items.
 */
html body
.rap-personaliser
.rap-download-grid::before,
html body
.rap-personaliser
.rap-download-grid::after {
    content:
        none !important;

    display:
        none !important;
}


/*
 * Force only the actual three buttons
 * into normal grid cells.
 */
html body
.rap-personaliser
.rap-download-grid
> button.rap-download-button {
    grid-column:
        auto !important;

    grid-row:
        auto !important;

    float:
        none !important;

    clear:
        none !important;

    width:
        100% !important;

    max-width:
        100% !important;

    margin:
        0 !important;
}


/*
 * Kill any theme-generated decoration.
 */
html body
.rap-personaliser
button.rap-download-button::before,
html body
.rap-personaliser
button.rap-download-button::after {
    content:
        none !important;

    display:
        none !important;
}


/*
 * Only button state is controlled in CSS.
 * Layout remains inline in PHP.
 */
html body
.rap-personaliser
button.rap-download-button:disabled {
    opacity:
        0.42 !important;

    cursor:
        not-allowed !important;
}


html body
.rap-personaliser
button.rap-download-button:not(:disabled) {
    opacity:
        1 !important;

    cursor:
        pointer !important;
}


/* =========================================================
   STATUS
========================================================= */

.rap-personaliser
.rap-status {
    display:
        block !important;

    min-height:
        0 !important;

    margin:
        12px
        0
        0
        0 !important;

    padding:
        0 !important;

    color:
        var(--rap-purple) !important;

    font-size:
        14px !important;

    font-weight:
        500 !important;
}


.rap-personaliser
.rap-status:empty {
    display:
        none !important;

    margin:
        0 !important;
}


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

@media (max-width: 900px) {

    .rap-personaliser {
        padding:
            44px
            28px
            54px !important;
    }


    .rap-personaliser
    .rap-header {
        margin-bottom:
            40px !important;
    }


    .rap-personaliser
    .rap-section {
        margin-bottom:
            38px !important;
    }


    .rap-personaliser
    .rap-artwork-stage {
        max-width:
            760px !important;
    }


    /*
     * STACK DOWNLOADS ON TABLET.
     */
    html body
    .rap-personaliser
    .rap-download-grid {
        grid-template-columns:
            1fr !important;

        gap:
            12px !important;
    }

}


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

@media (max-width: 600px) {

    .rap-personaliser {
        --rap-control-width: 100%;

        padding:
            28px
            16px
            40px !important;
    }


    /* Header */

    .rap-personaliser
    .rap-header {
        margin-bottom:
            34px !important;
    }


    .rap-personaliser
    .rap-header h2 {
        max-width:
            340px;

        font-size:
            40px;

        line-height:
            1.05;

        letter-spacing:
            -0.8px;
    }


    .rap-personaliser
    .rap-header p {
        max-width:
            360px !important;

        font-size:
            15px !important;

        line-height:
            1.55 !important;
    }


    /* Sections */

    .rap-personaliser
    .rap-section {
        margin-bottom:
            32px !important;
    }


    .rap-personaliser
    .rap-step-label {
        margin-bottom:
            9px !important;

        font-size:
            11px !important;
    }


    .rap-personaliser
    .rap-section-title {
        font-size:
            23px !important;
    }


    /* Labels */

    .rap-personaliser
    .rap-label {
        margin-bottom:
            8px !important;

        font-size:
            17px !important;
    }


    /* Full-width fields */

    .rap-personaliser
    .rap-field,

    .rap-personaliser
    .rap-custom-select,

    .rap-personaliser
    button.rap-select-trigger,

    .rap-personaliser
    .rap-select-menu,

    .rap-personaliser
    input.rap-name-input,

    .rap-personaliser
    .rap-field-footer {
        width:
            100% !important;

        max-width:
            100% !important;
    }


    /* Inputs / dropdown trigger */

    html body
    .rap-personaliser
    button.rap-select-trigger,

    html body
    .rap-personaliser
    input.rap-name-input {
        height:
            48px !important;

        min-height:
            48px !important;

        max-height:
            48px !important;

        padding:
            8px
            4px !important;

        font-size:
            15px !important;
    }


    html body
    .rap-personaliser
    input.rap-name-input::placeholder {
        font-size:
            14px !important;
    }


    /* Dropdown */

    .rap-personaliser
    .rap-select-menu {
        padding:
            5px !important;
    }


    html body
    .rap-personaliser
    .rap-select-menu
    button.rap-select-option {
        height:
            46px !important;

        min-height:
            46px !important;

        max-height:
            46px !important;

        padding:
            11px
            12px !important;

        font-size:
            15px !important;
    }


    .rap-personaliser
    .rap-option-note {
        font-size:
            10px !important;
    }


    /* Preview */

    .rap-personaliser
    .rap-preview-heading-row {
        display:
            block !important;
    }


    .rap-personaliser
    .rap-artwork-caption {
        margin-top:
            5px !important;

        font-size:
            11px !important;
    }


    .rap-personaliser
    .rap-artwork-wrapper {
        margin-top:
            16px !important;
    }


    .rap-personaliser
    .rap-artwork-stage {
        width:
            100% !important;

        max-width:
            100% !important;
    }


    .rap-personaliser
    .rap-artwork-loading {
        min-height:
            220px !important;
    }


    /* Counter */

    .rap-personaliser
    .rap-field-footer {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            max-content !important;

        align-items:
            start !important;

        margin-top:
            8px !important;

        gap:
            10px !important;

        font-size:
            12px !important;
    }


    .rap-personaliser
    .rap-character-count {
        width:
            max-content !important;

        min-width:
            max-content !important;

        max-width:
            max-content !important;

        white-space:
            nowrap !important;

        word-break:
            keep-all !important;

        overflow-wrap:
            normal !important;
    }


    /*
     * STACK DOWNLOADS FULL WIDTH ON MOBILE.
     */
    html body
    .rap-personaliser
    .rap-download-grid {
        grid-template-columns:
            1fr !important;

        gap:
            10px !important;

        margin-top:
            10px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .rap-personaliser {
        padding-left:
            14px !important;

        padding-right:
            14px !important;
    }


    .rap-personaliser
    .rap-header h2 {
        font-size:
            36px;
    }


    /*
     * Keep helper + 0/20 on the same row.
     */
    .rap-personaliser
    .rap-field-footer {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            max-content !important;

        gap:
            8px !important;
    }

}

/* =========================================================
   MOBILE DROPDOWN FLOW FIX
========================================================= */

@media (max-width: 600px) {

    .rap-personaliser
    .rap-custom-select {
        overflow: visible !important;
    }


    .rap-personaliser
    .rap-select-menu {
        position: static !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        margin:
            7px
            0
            0
            0 !important;

        z-index: auto !important;
    }


    .rap-personaliser
    .rap-select-menu[hidden] {
        display: none !important;
    }


    /*
     * No fake clearance required on mobile.
     * The menu itself now pushes Step 2 down.
     */
    .rap-personaliser
    .rap-custom-select.is-open {
        margin-bottom: 0 !important;
    }

}