/* Variables */

:root {
    --color-default: #252320;
    --color-dark: #2F2F2F;
    --color-error: #FF6B3D;
    --color-success: #74E1A6;
    --color-note: #00D3F6;
    --color-white: #ffffff;
    --color-neutral: #ACACAC;
    --color-neutral-light: #D5D5D5;
    --color-grey: #979797;
    --color-dark-grey: #475467;
    --color-primary: #C8E0E4; 
    --color-primary-light: #E4F0F2; 
    --color-secondary: #E5DAD5; 
    --color-secondary-light: #F8EEEA; 
    --color-tertiary: #F6F1ED; 
    --color-tertiary-light: #FAF7F4;
    --color-teal: #003A3D;
    --color-slate: #252320;
    --color-gold: #A68945;
    --color-light-gold: #CAB88F;
    --color-cream: #FAF8F2;
    --color-light-grey: #D5D5D5;
    --color-mid-grey: #BEBDBC;
    --space-xs: 16px;
    --space-s: 24px;
    --space-m: 52px;
    --space-l: 72px;
    --space-xl: 100px;
    --space-xxl: 244px;
    --font-body: 'lato-wf', sans-serif;
    --font-heading: 'ivyora-display', serif;
    --font-subheading: 'Inter', sans-serif;
}

/* Structure */

.product-template-mak-lab .product {
    padding-top: var(--space-l);
}

.mak-lab {
    margin-bottom: 56px;
}

.mak-lab__product,
.mak-lab__form {
    position: relative;
}

.mak-lab__form .grid {
    gap: 22px 42px;
}

.mak-lab__form hr {
    margin: 40px 0;
}

.mak-lab .product__options td {
    border-top: none;
}

.mak-lab__header {
    margin-bottom: var(--space-xl);
    text-align: center;
}

.mak-lab__main__heading {
    color: var(--color-gold);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 155px;
    line-height: 1em;
}

.mak-lab__footer {
    padding-top: var(--space-m);
}

@media screen and (min-width: 1200px) {

    .mak-lab__product,
    .mak-lab__footer {
        padding-right: 51%;
    }

    .mak-lab__media {
        width: 42%;
        position: absolute;
        top: 0;
        right: 0;
    }

}

@media screen and (min-width: 1600px) {

    .mak-lab__product,
    .mak-lab__footer {
        padding-right: 52%;
    }

    .mak-lab__media {
        width: 49%;
        max-width: 693px;
    }
    
}

@media screen and (max-width: 1199px) {

    .mak-lab__header {
        margin-bottom: var(--space-s);
    }

    .mak-lab__product__bg {
        position: relative;
        background-color: var(--color-tertiary);
        padding: 40px 0;
        margin-bottom: 40px;
    }

    .mak-lab__product__bg:before {
        content: '';
        position: absolute;
        top: 0;
        left: -52px;
        right: -52px;
        bottom: 0;
        background-color: var(--color-tertiary);
    }

    .mak-lab__main__heading {
        font-size: 40px;
    }
}

@media screen and (max-width: 767px) {
    .mak-lab__product__bg {
        padding: 24px 0;
        margin-bottom: 24px;
    }

    .mak-lab__product__bg:before {
        left: -30px;
        right: -30px;
    }

    .mak-lab__form {
        margin-bottom: 32px;
    }
}

/* Fields */

.mak-lab__subheading {
    margin-bottom: 24px;
}

.mak-lab__field {
    margin-bottom: 24px;
}

.mak-lab__field label {
    display: block;
}

.mak-lab__field--hidden,
#pattern-size,
#pattern-space,
.grid__item--color-book {
    display: none;
}

.mak-lab__field--swatch .dk-selected,
.mak-lab__field--swatch .dk-option {
    padding-left: 2.5em;
}

.mak-lab__field--swatch .dk-swatch {
    position: absolute;
    top: .8em;
    left: .9em;
    width: 16px;
    height: 16px;
}

.mak-lab__field__input {
    position: relative;
}

.grid__item--pattern-type,
.grid__item--pattern-size,
.grid__item--pattern-space,
.grid__item--surface-print {
    grid-column: 1 / span 12;
}

@media screen and (max-width: 767px) {
    .mak-lab__field {
        margin-bottom: 16px;
    }

    .grid__item--pattern-type,
    .grid__item--pattern-size,
    .grid__item--pattern-space,
    .grid__item--surface-print {
        grid-column: 1 / span 6;
    }
}

/* Add to cart */ 

.mak-lab .product__price .list--grid-line {
    padding-left: 112px;
    align-items: center;
    gap: 36px;
}

.mak-lab .product__price .list--grid-line li {
    display: none;
    flex-grow: 0;
    padding: 0;
}

.mak-lab .product__price .list--grid-line li + li {
    border-left: none;
}

.mak-lab .product__price .list--grid-line .is-price,
.mak-lab .product__price .list--grid-line .is-button {
    display: block;
}

@media screen and (max-width: 1119px) {
    .mak-lab .product__price .list--grid-line {
        padding-left: 0;
        justify-content: center;
        gap: 0;
    }
}

/* Button Navigation */ 

.mak-lab__nav {
    text-transform: uppercase;
    font-size: 11px;
    line-height: 1.8em;
    letter-spacing: 0.2em;
    margin-bottom: 16px;
}

.mak-lab__nav ul {
    display: flex;
    gap: 10px;
    margin-bottom: 0;
}

.mak-lab__nav .button {
    padding: 1.45em 1.72em;
}

.mak-lab__nav .button:after {
    display: none;
}

.mak-lab__nav .button i {
    vertical-align: middle;
    margin-right: .5em;
}

.mak-lab .button .spinner {
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    opacity: 0;
}

/* Button States */

.mak-lab__nav .is-loading {
    background-color: var(--color-slate);
}

.mak-lab__nav .is-loading .spinner {
    opacity: 1;
}

.mak-lab__nav .is-loading span {
    opacity: 0;
}

.mak-lab__nav .is-complete .spinner {
    opacity: 0;
}

@media screen and (max-width: 699px) {
    .mak-lab__nav ul {
        display: block;
    }

    .mak-lab__nav a.button,
    .mak-lab__nav button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background-color: var(--color-white);
    }

    .mak-lab__nav li + li {
        margin-left: 0;
        margin-top: 12px;
    }
}

/* Image */

.mak-lab__image {
    position: relative;
    height: 0;
    padding-bottom: 120%;
    margin-bottom: 28px;
}

.mak-lab__media svg {
    width: 100%;
    height: 100%;
}

/* Ruler */

.mak-lab__ruler {
    position: absolute;
    z-index: 2;
    background-repeat: no-repeat;
    background-size: contain;
}

.mak-lab__ruler--x {
    bottom: 100%;
    left: 0;
    right: 0;
    height: 42px;
    background-image: url(../images/ruler-x-imperial.svg);
    background-position: 0 100%;
}

.mak-lab__ruler--y {
    left: 100%;
    margin-left: 5px;
    top: 0;
    bottom: 0;
    width: 45px;
    background-image: url(../images/ruler-y-imperial.svg);
    background-position: 0 0;
}

.mak-lab__ruler__toggle {
    position: relative;
    z-index: 12;
    display: flex;
    gap: 10px;
    font-size: 11px;
    line-height: 1em;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: var(--font-subheading);
    margin-bottom: 20px;
}

.mak-lab__ruler__toggle .subheading {
    margin-bottom: 0;
}

.mak-lab__ruler__toggle ul {
    display: flex;
    gap: 10px;
}

.mak-lab__ruler__toggle button {
    background-color: transparent;
    padding: 0;
    color: var(--color-slate);
}

.mak-lab__ruler__toggle button:hover {
    background-color: transparent;
}

.mak-lab__ruler__toggle button.is-active {
    text-decoration: underline;
}

/* Localisation */

.mak-lab[data-unit="cm"] .mak-lab__ruler--x {
    background-image: url(../images/ruler-x-metric.svg);
}

.mak-lab[data-unit="cm"] .mak-lab__ruler--y {
    background-image: url(../images/ruler-y-metric.svg);
}

/* In-situ images */

.mak-lab__scene {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.mak-lab__scene__item {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
}

.mak-lab__scene__item.is-active {
    opacity: 1;
}

#mak-lab-scene-bedroom {
    background-image: url(../images/mak-lab-in-situ.png);
}

#mak-lab-scene-kitchen {
    background-image: url(../images/mak-lab-in-situ.png);
    transform: scaleX(-1);
}

.mak-lab__media__nav {
    padding-top: 0;
}

.mak-ff00 {
    background-color: #FF0000;
}

.mak-2055 {
    background-color: #EF7300;
}

/* Preview Patterns */

.mak-lab-test {
    /* display: grid; */
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid var(--color-neutral-light);
    border-left: 1px solid var(--color-neutral-light);
    margin-bottom: 48px;
    display: none;
}

.mak-lab-test-scale {
    display: none;
}

.body--debug .mak-lab-test {
    display: grid;
}

.body--debug .mak-lab-test-scale {
    display: block;
}

.mak-lab-test > div {
    padding: 12px;
    border-right: 1px solid var(--color-neutral-light);
    border-bottom: 1px solid var(--color-neutral-light);
}

.mak-lab-test svg {
    width: 100%;
    height: 100%;
}

#pattern-sample-scale {
    margin-bottom: 80px;
}

/* Library Page */

.mak-library {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.mak-library__header {
    margin-bottom: var(--space-l);
}

@media screen and (min-width: 1200px) {
    .mak-library__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.mak-library .grid {
    margin-left: -24px;
}

.mak-library .grid__item {
    padding-left: 24px;
    padding-bottom: 40px;
}

.mak-library__image {
    height: 0;
    padding-bottom: 120%;
    overflow: hidden;
    background-color: var(--color-grey);
}

.mak-library__item img {
    width: 100%;
    height: auto;
}

.mak-library__item__content {
    padding-top: 28px;
}

.mak-library__item__content table {
    font-size: 13px;    
    line-height: 1em;    
}

.mak-library__item__content td {
    padding-bottom: .5em;
}

.mak-library__item__content .th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    padding-right: .5em;
}

.mak-library__item__footer {
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mak-library__item__footer button {
    text-align: center;
    margin-top: 8px;
    background-color: transparent;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 1em;
    letter-spacing: 0.2em;
    font-weight: 600;
    padding: .8em;
}

.mak-library__item__footer button span {
    border-bottom: 1px solid;
}

/* Modal */

.mak-library-overlay {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(59,59,60,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
}

.mak-library-overlay.is-active {
    z-index: 24;
    opacity: 1;
    visibility: visible;
}

.mak-library-modal {
    width: 90%;
    max-width: 600px;
    background-color: var(--color-white);
    padding: 48px;
    box-shadow: -7px 5px 15px 0 rgba(59,59,60,.5);
}

.mak-library-modal__heading {
    margin-bottom: .5em;
}

.mak-library-modal ul {
    display: flex;
    gap: 24px;
    margin-top: 24px;
}

.mak-library-modal .button--outline:after {
    display: none;
}

@media screen and (max-width: 767px) {

    .mak-library-modal {
        padding: 24px;
    }

    .mak-library-modal ul {
        flex-direction: column;
        gap: 12px;
    }

    .mak-library-modal button {
        display: block;
        width: 100%;
    }
    
}

/* Pips */

/* #pattern-size-slider,
#pattern-space-slider {
    margin-bottom: 60px;
} */

/* Debug */ 

.body--debug #pattern-size,
.body--debug #pattern-space {
    display: block;
    margin-top: 12px;
    width: 100%;
}

.body--debug #svg-pattern,
.body--debug #png-pattern {
    display: block !important;
    margin: 12px 0;
}

.body--debug #png-pattern-image {
    display: block !important;
}

/* Colour Picker */

    .mak-lab__swatch {
        position: relative;
        display: block;
        width: 100%;
        padding: 0;
        background-color: transparent;
        text-transform: uppercase;
        border: 1px solid var(--color-light-grey);
        /* border-radius: 12px; */
        /* overflow: hidden; */
        color: var(--color-default);
        text-align: left;
        letter-spacing: 0;
        transition: none;
    }

    .mak-lab__swatch:hover {
        background-color: var(--color-white);
    }

    .mak-lab__swatch.is-inactive {
        opacity: 0;
    }

    .mak-lab__form .mak-lab__swatch:after {
        display: none;
    }

    .mak-lab__swatch__color {
        height: 80px;
        /* border-radius: 12px 12px 0 0; */
    }

    [data-hex="FFFFFF"] .mak-lab__swatch__color {
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .mak-lab__swatch__icon {
        position: absolute;
        z-index: 1;
        top: 10px;
        right: 12px;
        width: 8px;
        height: 8px;
        background-color: var(--color-white);
        opacity: 0;
    }

    .mak-lab__swatch__icon:before {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 1px;
        width: 9px;
        height: 7px;
        background: url(../images/tick.svg) 0 0 no-repeat;
        background-size: cover;
    }

    .mak-lab__swatch__text {
        padding: 12px;
        background-color: var(--color-white);
    }

    .mak-lab__swatch__name {
        font-size: 18px;
        line-height: 1.5em;
        font-weight: 500;
    }

    .mak-lab__swatch__hex {
        font-size: 16px;
        line-height: 1.5em;
        font-weight: 400;
        color: var(--color-dark-grey);
    }

/* Variation - Small */ 

    /* .mak-lab__swatch[data-size="small"] {
        border: 1px solid rgba(0, 0, 0, 0.1);
    } */

    .mak-lab__swatch[data-size="small"]:before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    [data-size="small"] .mak-lab__swatch__color {
        height: 54px;
    }

    [data-size="small"] .mak-lab__swatch__text {
        padding: 8px;
    }

    [data-size="small"] .mak-lab__swatch__name {
        font-size: 12px;
    }

    [data-size="small"] .mak-lab__swatch__hex {
        font-size: 11px;
    }

/* State - Active */ 

    .mak-lab__swatch[data-size="small"].is-active:before {
        border-width: 5px;
    }

    .mak-lab__swatch[data-size="small"].is-active .mak-lab__swatch__icon,
    .mak-lab__dropdown .mak-lab__swatch.is-active .mak-lab__swatch__icon {
        opacity: 1;
    }

/* Colour Picker Modal */ 

    .mak-lab__form__color {
        position: relative;
    }

    .mak-lab__form__color__toggle {
        position: absolute;
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
        color: var(--color-slate);
    }

    .mak-lab__form__color__toggle button {
        color: inherit;
    }

    .mak-lab__form__color__toggle button:hover {
        background-color: transparent;
    }

    .mak-lab__colorpicker__modal {
        position: absolute;
        z-index: 248;
        top: 0;
        left: 0;
        right: 0; 
        background-color: var(--color-white);
        height: 871px;
        border: 1px solid var(--color-neutral-light);
        display: none;
    }

    .mak-lab__colorpicker__overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        display: none;
    }

/* Show / hide */

    .mak-lab__colorpicker__modal.is-active {
        display: block;
    }

    .mak-lab__colorpicker__overlay.is-active {
        z-index: 240;
        display: block;
    }

    .mak-lab__colorpicker__modal__header,
    .mak-lab__colorpicker__modal__footer {
        position: absolute;
        z-index: 12;
        left: 0;
        right: 0;
        background-color: var(--color-white);
    }

    .mak-lab__colorpicker__modal__header {
        top: 0;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 28px;
    }

    .mak-lab__colorpicker__modal__search {
        flex-grow: 1;
    }

    .mak-lab__colorpicker__modal__search input {
        width: 100%;
    }

    .mak-lab__colorpicker__modal__close {
        position: absolute;
        top: 0;
        right: 0;
    }

    .mak-lab__colorpicker__modal__close .button--icon {
        padding: 10px;
        color: var(--color-slate);
    }

    .mak-lab__colorpicker__modal__close .button--icon:hover {
        background-color: transparent;
    }

    .mak-lab__colorpicker__modal__close svg {
        width: 12px;
        height: 12px;
    }

    .mak-lab__colorpicker__modal__footer {
        bottom: 0;
        box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.25);
        display: grid;
        gap: 48px;
        grid-template-columns: 2fr 3fr;
        padding-left: 28px;
        padding-right: 28px;
        padding-bottom: 21px;
    }

    .mak-lab__colorpicker__modal__footer:before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        background-color: var(--color-default);
        height: 28px;
    }
    
    .mak-lab__colorpicker__modal__footer .subheading {
        position: relative;
        z-index: 2;
        color: var(--color-white);
        padding-top: 8px;
        padding-bottom: 8px;
        margin-bottom: 20px;
    }

    .mak-lab__colorpicker__modal__additional {
        position: relative;
    }

    .mak-lab__colorpicker__modal__additional:first-of-type:before {
        content: '';
        position: absolute;
        top: 48px;
        right: -24px;
        bottom: 0;
        border-right: 1px solid var(--color-neutral-light);
    }

    .mak-lab__colorpicker__modal__footer ul {
        display: flex;
        gap: 12px;
    }

    .mak-lab__colorpicker__modal__footer li {
        flex-grow: 1;
    }

    #js-mak-lab-color-storage li {
        width: 33.333%;
    }

    .mak-lab__colorpicker__modal__main {
        height: 812px;
        overflow: scroll;
        padding: 124px 28px;
    }

    .mak-lab__color__grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
    }

    @media screen and (max-width: 699px) {
        .mak-lab__colorpicker__modal__header {
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
            padding-left: 18px;
            padding-right: 18px;
            padding-bottom: 18px;
        }

        .mak-lab__colorpicker__modal__search {
            width: 100%;
        }

        .mak-lab__colorpicker__modal__main {
            padding-left: 18px;
            padding-right: 18px;
        }

        .mak-lab__color__grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .mak-lab__colorpicker__modal__footer {
            display: flex;
            flex-direction: column;
            padding-left: 18px;
            padding-right: 18px;
        }

        .mak-lab__colorpicker__modal__footer:before {
            display: none;
        }

        .mak-lab__colorpicker__modal__footer .subheading {
            background-color: var(--color-default);
            padding-left: 18px;
            padding-right: 18px;
            margin-left: -18px;
            margin-right: -18px;
        }

        .mak-lab__colorpicker__modal__additional:first-of-type:before {
            top: auto;
            bottom: -24px;
            left: 0;
            right: 0;
            border-right: none;
            border-bottom: 1px solid var(--color-neutral-light);
        }
    }

/* Toggle Button */

    button.button--toggle {
        background-color: transparent;
        color: var(--color-default);
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
    }

    button.button--toggle:hover {
        background-color: transparent;
    }

    button.button--toggle:after {
        display: none;
    }

    .button--toggle .button__icon {
        margin-left: 12px;
    }

    .button--toggle .button__switch {
        position: relative;
        width: 48px;
        height: 24px;
        margin-left: 12px;
        background-color: var(--color-neutral);
        border-radius: 100px;
    }

    .button--toggle .button__switch:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        margin: 2px;
        width: 18px;
        height: 18px;
        background-color: var(--color-white);
        border-radius: 100px;
        border: 1px solid var(--color-tertiary);
    }

/* Active */ 

    .button--toggle.is-active .button__switch {
        background-color: var(--color-default);
    }

    .button--toggle.is-active .button__switch:before {
        left: auto;
        right: 0;
    }

/* Toggle styles */

    .mak-lab__colorpicker__modal .mak-lab__swatch__text {
        display: none;
    }

    [data-detail="true"] .mak-lab__swatch__text {
        display: block;
    }

/* Dropdown Button */

    #pattern-type {
        display: none;
    }

    .mak-lab__dropdown__button {
        display: block;
        width: 100%;
        background-color: var(--color-white);
        color: var(--color-default);
        font-size: 15px;
        line-height: 42px;
        border: 1px solid var(--color-light-grey);
        padding: 0 40px 0 12px;
        text-transform: uppercase;
        letter-spacing: 0;
        text-align: left;
    }

    .mak-lab__dropdown__button:hover {
        background-color: var(--color-white);
        color: var(--color-default);
        border-color: var(--color-primary);
    }

    .mak-lab__dropdown__button:after {
        content: "";
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background: url(../images/chevron-down.svg) 0 0 no-repeat;
        background-size: cover;
    }

    /* .mak-lab__dropdown__button:hover:after {
        background-image: url(../images/arrow-down.svg);
    } */

    .mak-lab__dropdown__button.is-active:after {
        transform: rotate(-180deg) translateY(50%);
    }

/* Dropdown */ 

    .mak-lab__dropdown {
        position: relative;
        display: none;
        z-index: -1;
        top: 100%;
        left: 0;
        right: 0; 
        background-color: var(--color-white);
        border: solid var(--color-grey);
        border-width: 0 1px 1px 1px;
        padding: 18px; 
    }

    .mak-lab__dropdown.is-active {
        display: block;
        z-index: 248;
    }

    .mak-lab__dropdown__grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
    }

    .mak-lab__dropdown .mak-lab__swatch img {
        width: 100%;
        height: auto;
    }

    .mak-lab__dropdown .mak-lab__swatch__name {
        display: none;
        color: var(--color-white);
        background-color: var(--color-dark);
        font-size: 11px;
        line-height: 1em;
        padding: 1em;
    }

    .mak-lab__dropdown .mak-lab__swatch:before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .mak-lab__dropdown .mak-lab__swatch.is-active:before {
        border-width: 5px;
        border-color: var(--color-gold);
    }    

    @media screen and (max-width: 699px) {
        .mak-lab__dropdown__grid {
            gap: 12px;
        }
    }

/* Color Atlas */

    .mak-lab-color-library {
        padding: var(--space-xl) 0;
    }

    .mak-lab-color-library__header {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 60px;
        margin-bottom: 80px;
    }

    .mak-lab-color-library-link {
        display: flex;
        justify-content: center;
        gap: 30px;
        text-transform: uppercase;
        font-family: var(--font-subheading);
        font-size: 10px;
        line-height: 1.2em;
        letter-spacing: 0.15em;
        padding-top: 80px;
        padding-bottom: 120px;
    }

    .mak-lab-color-library-link li {
        position: relative;
    }

    .mak-lab-color-library-link li + li {
        padding-left: 30px;
        border-left: 1px solid var(--color-light-grey);
    }

    .mak-lab-color-library-link .list__image {
        margin-bottom: 18px;
    }

    .mak-lab-color-library-link svg {
        margin-left: auto;
        margin-right: auto;
    }

    @media screen and (max-width: 699px) {
        .mak-lab-color-library-link {
            padding-top: 40px;
            padding-bottom: 40px;
            gap: 16px;
        }

        .mak-lab-color-library-link li + li {
            padding-left: 16px;
         }
    }

    .mak-lab-color-library__main {
        position: relative;
    }

    #mak-lab-color-library-list.is-loading {
        background-color: var(--color-neutral-light);
        height: 200px;
    }

    @media handheld, only screen and (max-width: 1023px) {
        .mak-lab-color-library .taxonomy__intro__secondary {
            display: block;
        }
    }

    #mak-lab-color-library-list > li {
        margin-top: -15px;
    }

    #mak-lab-color-library-list li[data-index="0"] {
        margin-top: 0;
    }

    #mak-lab-color-library-list h2 {
        position: relative;
        z-index: 24;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        padding: 35px 35px 70px 35px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        font-size: 20px;
        line-height: 1em;
        letter-spacing: 0.1875em;
        text-transform: uppercase;
        font-family: var(--font-body);
        margin-bottom: 0;
    }

    #mak-lab-color-library-list h2.is-active {
        position: sticky;
        top: 0;
    }

    /* Animation 

    #mak-lab-color-library-list h2 {
        transition: all .25s ease-in;
        opacity: 0;
        transform: translateY(10px);
    }

    #mak-lab-color-library-list.is-animated h2 {
        transform: translateY(0);
        opacity: 1;
    }

    */

    #mak-lab-color-library-list li[data-family-light="false"] h2 {
        color: var(--color-white);
    }

    #mak-lab-color-library-list h2 span {
        font-size: 15px;
        line-height: 1em;
        letter-spacing: 0.25em;
    }

    .mak-lab-color-library-container {
        position: relative;
        background-color: var(--color-white);
        padding: 24px 40px 60px 40px;
        box-shadow: 0px 0px 23.772px rgba(172, 172, 172, 0.25);
    }

    @media all and (max-width: 699px) {

        .mak-lab-color-library {
            padding: var(--space-m) 0;
        }

        .mak-lab-color-library__header {
            text-align: center;
        }

        #mak-lab-color-library-list h2 {
            font-size: 12px;
            padding: 26px 26px 40px 26px;
        }

        #mak-lab-color-library-list h2 span {
            font-size: 10px;
        }
    }

    /* Accordion */

    .mak-lab-color-library-container {
        display: none;
    }

    .mak-lab-color-library-grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(9,minmax(0,1fr));
        gap: 16px;
    }

    @media all and (max-width: 1199px) {
        .mak-lab-color-library-grid {
            grid-template-columns: repeat(3, minmax(0,1fr));
            gap: 12px;
        }
    }

    .mak-lab-color-library-grid li,
    .mak-lab-color-library__main li {
        position: relative;
    }

    .mak-lab-color-library__detail {
        position: relative;
        z-index: 12;
        width: 1697px;
        padding: var(--space-m);
        background-color: var(--color-white);
        box-shadow: 0px 3.794px 3.794px 0px rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(0, 0, 0, 0.1);
        margin-top: 16px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
    }

    .mak-lab-color-library__detail[data-corner="top-right"] {
        border-top-right-radius: 0;
    }

    .mak-lab-color-library__detail[data-corner="top-left"] {
        border-top-left-radius: 0;
    }

    @media all and (max-width: 699px) {
        .mak-lab-color-library__detail[data-corner-small="top-right"] {
            border-top-right-radius: 0;
        }
    
        .mak-lab-color-library__detail[data-corner-small="top-left"] {
            border-top-left-radius: 0;
        }
    }

    .mak-lab-color-library__detail__swatch {
        position: relative;
        width: 50%;
        height: 292px;
        padding: 25px 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }

    .mak-lab-color-library__detail__swatch h3 {
        font-size: 36px;
    }

    .mak-lab-color-library__detail__swatch button {
        position: relative;
        background-color: transparent;
        border-bottom: 1px solid;
        text-transform: uppercase;
        padding: 0;
        font-size: 12px;
    }

    .mak-lab-color-library__detail__swatch button.is-active:after {
        content: '✓';
        position: absolute;
        top: 0;
        left: 100%;
        /* display: block;
        width: 12px;
        height: 10px; */
        margin-left: 6px;
        /* background: url(../images/tick.svg) 0 0 no-repeat; */
    }

    li[data-light="false"] .mak-lab-color-library__detail__swatch h3,
    li[data-light="false"] .mak-lab-color-library__detail__swatch button {
        color: var(--color-white);
    }

    .mak-lab-color-library__detail__content {
        padding-left: 90px;
        width: 50%;
    }

    .mak-lab-color-library__detail__content h3 {
        margin-bottom: 24px;
    }

    .mak-lab-color-library__detail__content ul {
        text-transform: uppercase;
        font-weight: 400;
        font-size: 14px;
        line-height: 1em;
        letter-spacing: 0.21em;
    }

    .mak-lab-color-library__detail__content ul li {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .mak-lab-color-library__detail__content ul li span:nth-child(2) {
        font-weight: 700;
    }

    .mak-lab-color-library__detail__content ul li + li {
        margin-top: 2em;
    }

    .mak-lab-color-library__detail__close {
        position: absolute;
        top: 24px;
        right: 24px;
        width: 24px;
        height: 24px;
        background-color: transparent;
    }

    @media all and (max-width: 1919px) {
        .mak-lab-color-library__detail {
            width: 80vw;
            width: calc(100vw - 224px);
        }
    }

    @media all and (max-width: 1399px) {
        .mak-lab-color-library-container {
            max-height: 1066px;
            overflow: scroll;
        }

        .mak-lab-color-library__detail {
            flex-direction: column;
            padding-top: var(--space-l);
            gap: var(--space-2);
        }

        .mak-lab-color-library__detail__swatch {
            width: 100%;
        }

        .mak-lab-color-library__detail__content {
            padding-left: 0;
            width: 100%;
        }
    }

    @media all and (max-width: 699px) {
        .mak-lab-color-library__detail {
            padding: 36px 8px 32px 8px;
            width: 80vw;
            width: calc(100vw - 52px);
        }

        .mak-lab-color-library__detail__close {
            top: 8px;
            right: 4px;
        }

        .mak-lab-color-library-container {
            padding: 12px 8px 26px 8px;
        }

        .mak-lab-color-library__detail__swatch {
            height: 148px;
            padding: 18px;
        }

        .mak-lab-color-library__detail__swatch h3 {
            font-size: 27px;
        }

        .mak-lab-color-library__detail__swatch button {
            font-size: 11px;
        }

        .mak-lab-color-library__detail__content {
            padding-left: 16px;
            padding-right: 16px;
        }

        .mak-lab-color-library__detail__content ul {
            font-size: 12px;
        }

        .mak-lab-color-library__detail__content ul li + li {
            margin-top: 1em;
        }
    }

    /* Swatch selected */

    .mak-lab-color-library-grid .mak-lab__swatch:after {
        content: '';
        position: absolute;
        z-index: 16;
        top: 100%;
        left: 0;
        right: 0;
        height: 17px;
        background-color: var(--color-white);
        border: solid rgba(0, 0, 0, 0.1);
        border-width: 0 1px;
        display: none;
    }

    .mak-lab__swatch.is-selected,
    .mak-lab__swatch.is-selected:before {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .mak-lab__swatch.is-selected:before {
        border-bottom-color: transparent;
    }

    .mak-lab__swatch.is-selected:after {
        display: block;
    }

    .mak-lab__swatch.is-selected .mak-lab__swatch__icon {
        opacity: 1;
    }

/* In-situ images */

    .mak-lab-preview {
        margin-top: var(--space-l);
        margin-bottom: var(--space-xl);
    }

    .mak-lab-preview__header {
        text-align: center;
        margin-bottom: var(--space-s);
    }

    .mak-lab-preview__footer {
        padding-top: var(--space-xs);
        text-align: center;
    }

    .mak-lab-preview .grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .mak-lab-preview .mak-lab-preview__footer {
        display: none;
    }

    .mak-lab-preview__footer .button:hover {
        background-color: var(--color-gold);
    }

    .mak-lab-preview__image svg {
        width: 100%;
        height: auto;
        cursor: pointer;
    }

    #maker-preview-pattern svg {
        display: none;
    }

    @media screen and (max-width: 1199px) {
        .mak-lab-preview .grid {
            grid-template-columns: 1fr 1fr;
        }
    }

/* Lightbox */

    .mak-lab-lightbox {
        position: fixed;
        z-index: -1;
        visibility: hidden;
        opacity: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: var(--color-slate);
    }
    
    .mak-lab-lightbox.is-active {
        z-index: 9999;
        visibility: visible;
        opacity: 1;
    }

    .mak-lab-lightbox__content {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mak-lab-lightbox__image {
        max-width: 60vh;
    }

    .mak-lab-lightbox__image svg {
        width: 100%;
        height: auto;
    }

    .mak-lab-lightbox__previous,
    .mak-lab-lightbox__next,
    .mak-lab-lightbox__close {
        position: absolute;
        margin: var(--space-s);
        background-color: transparent;
        color: var(--color-white);
    }

    .mak-lab-lightbox__previous,
    .mak-lab-lightbox__next {
        width: 47px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid var(--color-neutral-light);
    }

    .mak-lab-lightbox__previous svg,
    .mak-lab-lightbox__next svg {
        width: 20px;
        height: 20px;
    }

    .mak-lab-lightbox__previous {
        left: 0;
        top: 50%;
    }

    .mak-lab-lightbox__next {
        right: 0;
        top: 50%;
    }

    .mak-lab-lightbox__close {
        top: 0;
        right: 0;
    }

    @media screen and (max-width: 699px) {  

        .mak-lab-lightbox__content {
            flex-direction: column;
        }

        .mak-lab-lightbox__nav {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .mak-lab-lightbox__previous,
        .mak-lab-lightbox__next {
            position: relative;
            top: auto;
            margin-left: 0;
            margin-right: 0;
        }
    }

/* Surface Print - Display */ 

    .mak-lab__image__overlay {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url(../images/surface-print.png) 0 0 no-repeat;
        background-size: cover;
    }

    .maker-surface-print {
        display: none;
    }

/* Surface Print - Field */

    .grid__item--surface-print .button--toggle {
        justify-content: space-between;
        width: 100%;
        text-align: left;
    }

    .grid__item--surface-print .button__label {
        max-width: 440px;
    }

    @media screen and (max-width: 1199px) {
        .grid__item--surface-print .button--toggle {
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
        }

        .grid__item--surface-print .button--toggle .button__switch {
            margin-left: 0;
        }
    }

/* Login Form */ 

    .mak-lab-login .h5 {
        margin-bottom: 12px;
    }

    .mak-lab-login hr {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    @media screen and (min-width: 1200px) {

        .mak-lab-login .grid {
            align-items: center;
        }

        .mak-lab-login .grid__item--alpha {
            grid-column: 2 / span 4;
        }
    
        .mak-lab-login .grid__item--beta {
            grid-column: 7 / span 5;
        }

    }

    @media screen and (max-width: 1199px) {
        .mak-lab-login .grid {
            display: flex;
            flex-direction: column;
            gap: var(--space-m);
        }
    }

/* Upsell */ 

    .mak-lab-upsell {
        padding-top: 40px;
        padding-bottom: 70px;
        border-bottom: 1px solid var(--color-grey);
    }

    .mak-lab-upsell h3 {
        margin-bottom: 24px;
    }

    .mak-lab-upsell ul {
        gap: 32px;
        text-transform: uppercase;
    }

    .mak-lab-upsell ul li {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .mak-lab-upsell .list__image {
        flex-shrink: 0;
        width: 82px;
    }

    .mak-lab-upsell h4 {
        font-family: var(--font-subheading);
        font-weight: 600;
        font-size: 18px;
        line-height: 22px;
        letter-spacing: 2px;
        margin-bottom: 4px;
        text-transform: uppercase;
        color: var(--color-slate);
    }

    .mak-lab-upsell .price {
        margin-bottom: 12px;
    }

    .mak-lab-upsell square-placement,
    .mak-lab-upsell afterpay-placement {
        display: none;
    }

    @media screen and (min-width: 1200px) {
        .mak-lab-upsell ul {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
    }

    @media screen and (max-width: 1199px) {
        .mak-lab-upsell {
            padding-top: 32px;
            padding-bottom: 32px;
        }
        .mak-lab-upsell ul {
            display: flex;
            flex-direction: column;
        }
    }

/* Instructions */

    .list--instruction li {
        display: flex;
    }

    .list--instruction li + li {
        margin-top: var(--space-m);
    }

    .list--instruction .subheading {
        font-size: 18px;
        margin-bottom: 10px;
    }

    @media screen and (min-width: 700px) {
        #tab-instructions {
            display: flex;
            justify-content: center;
        }

        .list--instruction {
            width: 74%;
            max-width: 830px;
            padding-top: 40px;
            padding-bottom: 40px;
        }

        .list--instruction li {
            gap: 56px;
        }

        .list--instruction .list__image {
            width: 29%;
            max-width: 400px;
        }

        .list--instruction .list__content {
            width: 64%;
            max-width: 533px;
        }
    }

    @media screen and (max-width: 699px) {   
        .list--instruction li {
            flex-direction: column;
            gap: var(--space-s);
        }
    }