/*
    Section: imports
*/
@import url("https://fonts.googleapis.com/css2?family=Overpass:wght@100;200;400;700&family=IBM+Plex+Mono&family=Material+Icons&family=Nunito&display=swap");

/*
    Section: non-sematic global variables
*/
:root {
    --color-white: rgb(255, 255, 255);
    --color-not-quite-black: #333;
    --color-yellow-1: rgb(184, 125, 33);
    --color-yellow-2: rgb(219, 161, 64);
    --color-yellow-3: rgb(250, 194, 105);
    --color-yellow-4: rgb(255, 214, 143);
    --color-yellow-5: rgb(255, 229, 186);
    --color-red-1: rgb(191, 36, 54);
    --color-red-2: rgb(217, 74, 92);
    --color-red-3: rgb(245, 115, 128);
    --color-red-4: rgb(250, 153, 163);
    --color-red-5: rgb(252, 194, 201);
    --color-teal-1: rgb(38, 120, 128);
    --color-teal-2: rgb(64, 140, 148);
    --color-teal-3: rgb(102, 173, 181);
    --color-teal-4: rgb(153, 209, 214);
    --color-teal-5: rgb(204, 237, 240);
    --color-purple-1: rgb(94, 64, 158);
    --color-purple-2: rgb(125, 97, 186);
    --color-purple-3: rgb(163, 138, 214);
    --color-purple-4: rgb(199, 184, 237);
    --color-purple-5: rgb(235, 227, 250);
    --color-alt-yellow-5: rgb(255, 251, 200);
    --color-alt-yellow-4: rgb(255, 249, 162);
    --color-alt-yellow-3: rgb(254, 247, 129);
    --color-alt-yellow-2: rgb(202, 196, 100);
    --color-alt-yellow-1: rgb(137, 133, 78);
    --color-alt-green-5: rgb(199, 255, 226);
    --color-alt-green-4: rgb(162, 255, 207);
    --color-alt-green-3: rgb(129, 255, 190);
    --color-alt-green-2: rgb(100, 203, 150);
    --color-alt-green-1: rgb(78, 137, 107);
    --color-alt-cyan-5: rgb(199, 248, 254);
    --color-alt-cyan-4: rgb(163, 243, 255);
    --color-alt-cyan-3: rgb(129, 238, 255);
    --color-alt-cyan-2: rgb(100, 190, 203);
    --color-alt-cyan-1: rgb(78, 129, 137);
    --color-alt-purple-5: rgb(220, 200, 255);
    --color-alt-purple-4: rgb(196, 163, 255);
    --color-alt-purple-3: rgb(174, 129, 255);
    --color-alt-purple-2: rgb(136, 100, 202);
    --color-alt-purple-1: rgb(98, 78, 137);
    --color-alt-purple-alt-5: rgb(128, 119, 168);
    --color-alt-purple-alt-4: rgb(113, 103, 153);
    --color-alt-purple-alt-3: rgb(67, 62, 86);
    --color-alt-purple-alt-2: rgb(40, 38, 52);
    --color-alt-purple-alt-1: rgb(18, 18, 24);
    --color-alt-red-5: rgb(255, 200, 219);
    --color-alt-red-4: rgb(255, 163, 195);
    --color-alt-red-3: rgb(254, 129, 173);
    --color-alt-red-2: rgb(202, 100, 135);
    --color-alt-red-1: rgb(137, 77, 98);
    --color-alt-cream: rgb(228, 229, 198);
    --color-alt-gray: rgb(137, 137, 119);
    --color-alt-light-gray: rgb(191, 191, 191);
    --color-alt-off-white: rgb(247, 248, 240);
    --color-alt-white: rgb(255, 255, 255);

    /* properties */
    --letter-spacing-1: 0.05em;
    --letter-spacing-2: 0.1em;

    /* fonts */
    --font-overpass: "Overpass", Helvetica, Arial, sans-serif;
    --font-nunito: "Nunito", Arial, "Geneva", sans-serif;
    --font-ibm-plex-mono: "IBM Plex Mono", "Monaco", "Consolas", monospace;
}

/*
    Section: semantic global variables
*/
/* stylelint-disable-next-line no-duplicate-selectors */
:root {
    /* general typography */
    --text-color: var(--color-not-quite-black);
    --display-font: var(--font-overpass);
    --text-font: var(--font-nunito);
    --mono-font: var(--font-ibm-plex-mono);
    --font-size-base: 23px;
    --font-size-smallest: 0.5rem;
    --font-size-smaller: 0.75rem;
    --font-size-slightly-smaller: 0.9rem;
    --font-size-normal: 1rem;
    --font-size-slightly-larger: 1.25rem;
    --font-size-larger: 1.75rem;
    --font-size-largest: 2rem;

    /* links */
    --link-color: var(--color-red-1);
    --link-decoration: underline var(--color-red-4) solid 1px;
    --link-hover-color: var(--color-teal-1);
    --link-hover-decoration: underline var(--color-alt-cyan-4) solid 1px;

    /* buttons */
    --primary-button-text-color: var(--color-white);
    --primary-button-bg: var(--color-purple-2);
    --success-button-text-color: var(--color-white);
    --success-button-bg: var(--color-alt-green-2);
    --add-to-cart-button-text-color: var(--color-white);
    --add-to-cart-button-bg: var(--color-purple-2);

    /* nav & header */
    --header-link-color: var(--color-teal-1);
    --header-link-hover-color: var(--color-red-1);
    --header-cart-color: var(--color-white);
    --header-cart-bg: var(--color-purple-2);
    --header-cart-count-color: var(--color-teal-2);

    /* validation */
    --validation-error-color: var(--color-red-2);
    --validation-error-bg: var(--color-red-5);
    --validation-valid-color: var(--color-teal-2);

    /* role-specific */
    --product-name-letter-spacing: var(--letter-spacing-2);
    --product-price-letter-spacing: var(--letter-spacing-1);
    --product-name-color: var(--color-alt-purple-1);
    --product-price-color: var(--color-teal-1);
}

/*
    Section: base element styles
*/

html,
body,
input,
optgroup,
select,
textarea {
    font-family: var(--text-font);
    color: var(--color-not-quite-black);
    font-size: var(--font-size-base);
}

label,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--display-font);
}

/*
    Section: links
*/
a,
a:focus,
a:hover {
    color: var(--link-color);
    text-decoration: var(--link-decoration);
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: var(--link-hover-decoration);
}

a.tags,
a.tags:hover {
    text-decoration: none;
}

a.tags::after,
a.button::after {
    content: none;
}

/*
    Section: elevations
*/
.is-elevated {
    --elevation-shadow-color: rgba(180, 180, 180, 0.3);

    box-shadow: -0.2rem -0.2rem 0.4rem rgba(180, 180, 180, 0.2), 0.1rem 0.15rem 0.15rem var(--elevation-shadow-color),
        0.2rem 0.3rem 0.3rem var(--elevation-shadow-color);
}

.is-elevated.is-elevated-hoverable {
    transition: 500ms box-shadow;
}

.is-elevated-more,
.is-elevated.is-elevated-hoverable:hover {
    --elevation-shadow-color: rgba(180, 180, 180, 0.2);

    box-shadow: -0.2rem -0.2rem 0.4rem rgba(180, 180, 180, 0.2), 0.15rem 0.3rem 0.3rem var(--elevation-shadow-color),
        0.4rem 0.6rem 0.6rem var(--elevation-shadow-color);
}

/*
    Section: header & nav styles
*/

.banner {
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--color-not-quite-black);
    color: white;
    padding: 0.5rem 0.5rem;
    font-size: var(--font-size-smaller);
}

.header {
    margin-top: 1rem;
    font-family: var(--display-font);
    letter-spacing: var(--letter-spacing-1);
}

.header .navbar .navbar-brand img {
    max-height: 2rem;
}

.header .navbar .navbar-menu .navbar-end {
    align-items: center;
}

.header .navbar-menu a.navbar-item {
    color: var(--header-link-color);
    text-decoration: none;
    padding: 0.2rem 0.25rem;
    margin-right: 0.75rem;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}

.header .navbar-menu a.navbar-item:hover {
    color: var(--header-link-hover-color);
    border-bottom: 2px solid var(--header-link-hover-color);
}

.header .navbar-menu a.navbar-item.is-active {
    border-bottom: 2px solid var(--header-link-color);
}

/*
    Section: Responsive styles for the navbar
*/

@media screen and (max-width: 1023px) {
    .navbar-menu {
        padding: 0 0;
    }

    .header .navbar-menu a.navbar-item {
        text-align: center;
        padding: 0.75rem 0.75rem;
        margin: 0 0;
    }

    .header .navbar-menu a.navbar-item,
    .header .navbar-menu a.navbar-item.is-active,
    .header .navbar-menu a.navbar-item:hover {
        border-top: none;
        border-bottom: none;
    }
}

/*
    Section: Navbar cart
*/

.navbar-cart {
    position: relative;
}

.navbar-cart .material-icons {
    color: var(--header-cart-color);
    background: var(--header-cart-bg);
    border-radius: 50%;
    transition: 500ms filter;
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    padding: 0.4em 0.4em;
    text-align: center;
}

.navbar-cart:hover .material-icons {
    color: var(--header-cart-color);
    filter: brightness(1.2);
    border-radius: 50%;
    padding: 0.4em 0.4em;
}

.navbar-cart .navbar-cart-count {
    color: var(--header-cart-color);
    background-color: var(--header-cart-count-color);
    position: absolute;
    top: 2.5em;
    left: 2.5em;
    padding: 0.5em 1em;
    border-radius: 50%;
    font-size: var(--font-size-smallest);
    font-style: normal;
    font-weight: bold;
}

.navbar-cart .navbar-cart-count:empty {
    display: none;
    visibility: hidden;
}

/*
    Section: responsive styles for cart
*/

@media screen and (max-width: 1023px) {
    .navbar-cart {
        padding: 0.75rem 0.75rem;
        background: var(--header-cart-color);
        display: block;
        text-align: center;
    }

    .navbar-cart .material-icons,
    .navbar-cart:hover .material-icons {
        border-radius: 0;
        background: none;
        color: var(--color-not-quite-black);
        padding: 0 0;
        width: unset;
        height: unset;
    }

    .navbar-cart:hover .material-icons {
        color: var(--header-link-hover-color);
    }

    .navbar-cart .is-elevated,
    .navbar-cart .is-elevated-hoverable:hover {
        box-shadow: none;
    }

    .navbar-cart .navbar-cart-count {
        display: none;
        visibility: hidden;
    }
}

/*
    Section: footer
*/

.footer {
    background: none;
}

.footer .container {
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-teal-4);
    font-family: var(--mono-font);
    font-size: var(--font-size-smaller);
    text-align: center;
    max-width: 600px;
}

.footer .social-icon-links {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.footer .social-icon-links a {
    padding: 0 0.5rem;
    color: var(--color-not-quite-black);
}

.footer .social-icon-links a:hover {
    color: var(--color-not-quite-black);
}

.footer .social-icon-links a::after {
    content: none;
}

.footer .social-icon-links .material-icons {
    font-size: 32px;
}

/*
    Section: images
*/

.image.is-cover img {
    object-fit: cover;
    object-position: center;
}

/*
    Section: iframes
*/
.iframe {
    overflow: hidden;

    /* 16:9 aspect ratio */
    padding-top: 56.25%;
    position: relative;
}

.iframe iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/*
    Section: buttons
*/

.button {
    transition: filter 200ms, background-color 250ms;
    text-decoration: none;
    height: auto;
    display: inline-flex;
    align-items: center;
}

.button:hover {
    color: var(--primary-button-text-color);
    filter: brightness(1.2);
    text-decoration: none;
}

.button.is-primary {
    color: var(--primary-button-text-color);
    background: var(--primary-button-bg);
}

.button.is-warning {
    background-color: var(--color-yellow-3);
}

.button.is-error {
    background-color: var(--color-red-2);
}

.button.is-success,
.button.is-success[disabled] {
    color: var(--success-button-text-color);
    background: var(--success-button-bg);
    opacity: 1;
}

.button.is-success:hover {
    filter: none;
}

.button .material-icons {
    height: auto;
    width: auto;
}

.button .material-icons:first-child:not(:last-child) {
    margin-right: 0.6rem;
    margin-left: -0.1rem;
}

.button .material-icons:last-child:not(:first-child) {
    margin-left: 0.5rem;
    margin-right: 0;
}

a.button {
    text-decoration: none;
}

a.button:hover,
a.button.is-ghost:hover {
    text-decoration: none;
}

a.button.is-ghost {
    color: var(--color-purple-2);
}

a.button.is-ghost:hover {
    color: var(--color-red-2);
}

.alt-button {
    display: flex;
    align-items: flex-start;
    background-color: var(--primary-button-bg);
    color: var(--primary-button-text-color);
    padding: 0.5rem 2rem;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

/*
    Section: notifications
*/

.notification.is-danger {
    background-color: var(--color-red-2);
}

.notification .fairy {
    right: 0.7rem;
    position: absolute;
    top: 0.5rem;
}

/*
    Section: forms and inputs
*/

.form .section-divider {
    display: block;
    font-size: var(--font-size-larger);
    margin-bottom: 1.5rem;
    margin-top: 2rem;
    border-bottom: 1px solid var(--color-alt-gray);
}

.checkbox {
    transform: scale(2);
    margin-right: 1em;
    margin-top: -0.5em;
    margin-left: 0.5em;
    vertical-align: middle;
}

.flex-radio,
.flex-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex-radio:not(:first-child) {
    margin-top: 1rem;
}

.flex-radio input,
.flex-checkbox input {
    margin-right: 0.75rem;
    height: 1rem;
    width: 1rem;
}

.flex-radio .description {
    font-size: var(--font-size-slightly-smaller);
    flex: 1;
}

.field.is-checkbox {
    margin-bottom: 1rem;
}

select.input.placeholder {
    color: var(--color-alt-light-gray);
}

[role="listbox"] {
    cursor: pointer;
    display: block;
    max-width: 100%;
    background-color: #fff;
    border-radius: 0.2em;
    box-shadow: inset 0 0.0625em 0.125em rgb(10 10 10 / 5%);
    border: 1px solid #dbdbdb;
    line-height: 1.5;
    max-height: 200px;
    overflow-y: auto;
    position: relative;
}

[role="listbox"] [role="option"] {
    padding: 0.5em 1em;
    color: var(--color-not-quite-black);
}

[role="listbox"] [role="option"][aria-selected] {
    background: var(--color-teal-5);
}

@supports (color: Highlight) {
    [role="listbox"] [role="option"][aria-selected] {
        background: Highlight;
        color: HighlightText;
    }
}

/*
    Section: form validation
*/

.validation-message {
    color: var(--validation-error-color);
    text-align: center;
    font-size: var(--font-size-smaller);
    margin-top: 0.25rem;
}

form:invalid button[type="submit"].is-validation-enabled,
form.is-invalid button[type="submit"].is-validation-enabled {
    background-color: var(--validation-error-bg);
}

.input.is-validation-enabled:invalid {
    border: 1px solid var(--validation-error-color);
}

.input.is-validation-enabled:invalid:focus {
    box-shadow: 0 0 0 0.125em rgba(220, 50, 50, 0.25);
}

.input:valid {
    border: 1px solid var(--validation-valid-color);
}

/*
    Section styles.
*/
.header + .section {
    padding-top: 2rem;
}

.section .is-heading-1,
.content h1 {
    letter-spacing: var(--letter-spacing-2);
    font-weight: 100;
    margin-bottom: 1rem;
    font-size: var(--font-size-largest);
    color: var(--color-purple-1);
}

/*
    Section: typography helpers
*/

.is-callout-text {
    text-align: justify;
    font-style: italic;
    letter-spacing: var(--letter-spacing-2);
    font-family: var(--display-font);
    font-weight: 300;
    color: var(--color-red-1);
}

@supports (-webkit-background-clip: text) or (background-clip: text) or (-moz-background-clip: text) {
    .is-callout-text {
        background-image: radial-gradient(var(--color-teal-1), var(--color-red-1));
        background-size: 300% 300%;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        color: transparent;

        /* Turned off for now. */

        /* animation: callout-text-anim 5s alternate infinite; */
    }

    @keyframes callout-text-anim {
        from {
            background-position: 0 0;
        }

        to {
            background-position: 100% 100%;
        }
    }

    @media (prefers-reduced-motion) {
        .is-callout-text {
            animation: none !important;
        }
    }
}

.material-icons.is-flipped {
    transform: rotate(180deg);
}

.image-emoji {
    display: inline;
    vertical-align: middle;
    height: 1em;
    position: relative;
    top: -0.1em;
}

/*
    Section: definition lists
*/
.description-list dd {
    font-weight: bold;
    margin-bottom: 1rem;
}

/*
    Section: misc helpers
*/

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
    Section: Role-specific styles.

    These configure the baseline, individual pages/sections
    are likely to add to or override some of these.
*/

.product-name {
    color: var(--product-name-color);
    font-weight: 200;
    letter-spacing: var(--product-name-letter-spacing);
    font-family: var(--display-font);
}

.product-price {
    color: var(--product-price-color);
    letter-spacing: var(--product-price-letter-spacing);
    font-weight: 200;
    font-family: var(--display-font);
}

.product-price.is-sold-out {
    color: var(--color-not-quite-black);
    text-transform: lowercase;
}

.info-card,
a.info-card {
    display: block;
    color: white;
    background-color: var(--color-purple-2);
    padding: 1.5rem;
    text-decoration: none;
}

.info-card.teal {
    background-color: var(--color-teal-2);
}

.info-card.red {
    background-color: var(--color-red-2);
}

.info-card.cyan {
    background-color: var(--color-alt-cyan-2);
}

.info-card.green {
    background-color: var(--color-alt-green-1);
}

.info-card.yellow {
    background-color: var(--color-yellow-2);
}

.info-card.alt-purple {
    background-color: var(--color-alt-purple-2);
}

.info-card.alt-red {
    background-color: var(--color-alt-red-2);
}

.info-card-title {
    font-family: var(--display-font);
    letter-spacing: var(--letter-spacing-1);
    font-weight: bold;
}

.info-card-strong {
    font-weight: bold;
}

.info-card a {
    color: var(--color-teal-4);
    text-decoration-color: var(--color-teal-3);
}

.info-card a:hover {
    color: var(--color-red-4);
    text-decoration-color: var(--color-red-3);
}

/*
    Section: shop page
*/

.slogan {
    display: block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-2);
    font-size: max(4vw, 200%);
    font-weight: 100;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: var(--color-purple-1);
}

@supports (-webkit-background-clip: text) or (background-clip: text) or (-moz-background-clip: text) {
    .slogan {
        background-image: linear-gradient(
            45deg,
            rgba(125, 97, 186, 1) 0%,
            rgba(64, 140, 148, 1) 50%,
            rgba(217, 74, 92, 1) 100%
        );
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.product-categories {
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.product-categories ul {
    display: flex;
    align-items: center;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: space-evenly;
}

.product-categories li {
    display: block;
}

.product-categories li a {
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
    font-family: var(--display-font);
    text-decoration: none;
    color: var(--color-purple-1);
    font-size: var(--font-size-slightly-larger);
    font-weight: 200;
    letter-spacing: var(--letter-spacing-2);
}

.product-categories li a:hover {
    color: var(--color-red-2);
}

.product-categories li.is-active a {
    color: var(--color-teal-2);
}


@media screen and (max-width: 768px) {
    .product-categories li a {
        font-size: var(--font-size-normal);
    }
}

.product-list:not(.is-active) {
    display: none;
}

.product-list .product-link {
    text-decoration: none;
    text-align: center;
}

.product-list .product-link img {
    transition: filter 1s;
}

.product-list .product-link:hover img {
    filter: brightness(120%);
}

.product-list .product-name {
    margin-top: 1rem;
    font-size: var(--font-size-slightly-larger);
}

/*
    Section: product page
*/

.is-product-page .is-heading-1.is-hidden-tablet {
    margin-bottom: 0;
}

.is-product-page .product-price {
    font-size: var(--font-size-slightly-larger);
    margin-bottom: 1rem;
    margin-top: -0.5rem;
}

.product-price .original {
    color: var(--color-alt-red-2);
    text-decoration: line-through;
}

.is-product-page .column.product-qty {
    max-width: 10ch;
}

.button [data-switchable] {
    display: none;
}

.button.is-add-to-cart {
    color: var(--add-to-cart-button-text-color);
}

.button.is-add-to-cart.is-idle {
    background-color: var(--add-to-cart-button-bg);
}

.button.is-add-to-cart.is-success:hover {
    filter: none;
}

.product-image img {
    opacity: 0;
    filter: saturate(0.2);
    transition: opacity 0.1s linear, filter 0.75s linear;
    z-index: 1;
}

.product-image img.is-active {
    opacity: 1;
    filter: none;
    z-index: 2;
}

.product-image-thumbnails {
    display: flex;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.product-image-thumbnails .product-image-thumbnail {
    box-sizing: border-box;
    padding: 0.5rem;
    width: 33.3333%;
}

.product-image-thumbnails.is-count-1 {
    display: none;
}

.product-image-thumbnails.is-count-1 + .product-tags {
    margin-top: 1rem;
}

.product-image-thumbnails.is-count-4 .product-image-thumbnail {
    width: 25%;
}

.product-image-thumbnails .product-image-thumbnail img {
    cursor: pointer;
}

.product-description {
    text-align: justify;
}

.product-option-fields .field {
    margin-bottom: 1.5rem;
}

.product-option-fields [role="option"] {
    display: flex;
    align-items: center;
}

.product-option-fields [role="option"] figure:first-child {
    margin-right: 1em;
}

.product-option-fields .is-color-option figure:first-child {
    border-radius: 50%;
}

.product-tags {
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
}

.product-tags .tags:not(:last-child) {
    margin-bottom: 0.5rem;
}

.product-tags .tags .tag {
    margin-bottom: 0;
}

.product-tags .tags .tag:first-child {
    color: var(--color-white);
    background: var(--color-purple-2);
}

.product-tags .tags .tag:last-child {
    background: var(--color-purple-5);
    flex: 1;
    justify-content: left;
}

.product-tags a.tags .tag:first-child {
    color: var(--color-white);
    background: var(--color-teal-2);
}

.product-tags a.tags .tag:last-child {
    background: var(--color-teal-5);
}

.product-tags a.tags:hover :first-child {
    color: var(--color-white);
    background: var(--color-purple-3);
}

.product-tags a.tags:hover :last-child {
    color: var(--color-white);
    background: var(--color-purple-3);
}

.product-tags.is-hidden-tablet {
    margin-bottom: 1.5rem;
}

.product-tags.is-hidden-tablet .tag:last-child {
    flex-grow: 1;
}

.product-tags.is-hidden-tablet .tags:last-child {
    margin-bottom: 0.5rem;
}

.product-closed-for-moving {
    border: 1px solid var(--color-red-3);
    background: var(--color-alt-red-5);
    text-align: center;
    font-size: 90%;
}

.product-provenance {
    text-align: center;
    font-size: var(--font-size-slightly-smaller);
}

.product-media {
    margin-top: 2rem;
}

.product-media .info-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-media .info-card blockquote {
    flex: 1;
    font-weight: bold;
    font-size: 1.3rem;
}

.product-media .info-card cite {
    flex: 0;
    text-align: right;
    font-weight: lighter;
}

.product-media a.info-card {
    font-size: 1.3rem;
}

.product-media a.info-card:hover {
    text-decoration: underline;
}

.product-media a.info-card .material-icons {
    margin-left: 0.5rem;
}

.winter-audio-player {
    max-width: 100%;
    background-color: var(--color-purple-3);
    color: white;
    padding: 3.5rem 0;
}

.winter-audio-player.is-loaded {
    padding: 1rem 0;
}

.is-product-media-0 .winter-audio-player {
    background-color: var(--color-teal-3);
}

.winter-audio-player audio {
    display: block;
    width: 90%;
    margin: 1em auto;
}

.winter-audio-player p {
    text-align: center;
    margin: 0.5rem;
}

.winter-audio-player canvas {
    display: block;
    background-color: none;
    width: 100%;
    margin: 0.5rem 0;
}

/*
    Section: responsive styles for the product page.
*/

@media screen and (max-width: 768px) {
    .is-product-page .is-heading-1.is-hidden-tablet {
        text-align: center;
    }

    .product-tags .tags {
        min-width: 0;
        align-items: stretch;
    }

    .product-tags .tags .tag {
        display: inline-block;
        font-size: var(--font-size-slightly-smaller);
        height: unset;
        padding: 0.6rem 1rem 0.5rem 1rem;
        box-sizing: border-box;
        line-height: unset;
    }

    .product-tags .tags .tag:last-child {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding-left: 0.5rem;
    }

    .product-tags .tags .tag i.material-icons {
        line-height: unset;
        font-size: var(--font-size-slightly-smaller);
    }

    .is-product-page .column.product-qty {
        max-width: 100%;
    }
}

/*
    Section: colors for product options.
*/

.is-color-option .orange {
    background-color: #fc7510;
}

.is-color-option .blue {
    background-color: #0f7bff;
}

.is-color-option .red {
    background-color: #fb0020;
}

.is-color-option .green {
    background-color: #22ff19;
}

.is-color-option .pink {
    background-color: #fdb2ea;
}

.is-color-option .purple {
    background-color: #bb51ff;
}

.is-color-option .black {
    background-color: #000;
}

.is-color-option .white {
    background-color: #fff;
}

.is-color-option .fuchsia {
    background-color: hsl(335deg, 45%, 44%);
}

.is-color-option .teal {
    background-color: rgb(0, 157, 139);
}

/* Metallic colors made using beedle.content.helpers.color.shiny_gradient_helper */

.is-color-option .silver {
    background: linear-gradient(
        55deg,
        hsl(240deg, 2%, 37%) 0%,
        hsl(240deg, 2%, 75%) 39%,
        hsl(240deg, 2%, 85%) 49%,
        hsl(240deg, 2%, 75%) 86%,
        hsl(240deg, 2%, 37%) 100%
    );
}

.is-color-option .gold {
    background: linear-gradient(
        55deg,
        hsl(59deg, 98%, 39%) 0%,
        hsl(59deg, 98%, 78%) 39%,
        hsl(59deg, 98%, 85%) 49%,
        hsl(59deg, 98%, 78%) 86%,
        hsl(59deg, 98%, 39%) 100%
    );
}

.is-color-option .metallic-purple {
    background: linear-gradient(
        55deg,
        hsl(296deg, 54%, 31%) 0%,
        hsl(296deg, 54%, 63%) 39%,
        hsl(296deg, 54%, 81%) 49%,
        hsl(296deg, 54%, 63%) 86%,
        hsl(296deg, 54%, 31%) 100%
    );
}

.is-color-option .metallic-red {
    background: linear-gradient(
        55deg,
        hsl(5deg, 100%, 35%) 0%,
        hsl(5deg, 100%, 71%) 39%,
        hsl(5deg, 100%, 85%) 49%,
        hsl(5deg, 100%, 71%) 86%,
        hsl(5deg, 100%, 35%) 100%
    );
}

.is-color-option .metallic-blue {
    background: linear-gradient(
        55deg,
        hsl(204deg, 91%, 38%) 0%,
        hsl(204deg, 91%, 77%) 39%,
        hsl(204deg, 91%, 85%) 49%,
        hsl(204deg, 91%, 77%) 86%,
        hsl(204deg, 91%, 38%) 100%
    );
}

.is-color-option .metallic-teal {
    background: linear-gradient(
        55deg,
        hsl(173deg, 83%, 43%) 0%,
        hsl(173deg, 83%, 86%) 39%,
        hsl(173deg, 83%, 85%) 49%,
        hsl(173deg, 83%, 86%) 86%,
        hsl(173deg, 83%, 43%) 100%
    );
}

.is-color-option .metallic-green {
    background: linear-gradient(
        55deg,
        hsl(108deg, 93%, 44%) 0%,
        hsl(108deg, 93%, 89%) 39%,
        hsl(108deg, 93%, 85%) 49%,
        hsl(108deg, 93%, 89%) 86%,
        hsl(108deg, 93%, 44%) 100%
    );
}

.is-color-option .metallic-mocha {
    background: linear-gradient(
        55deg,
        hsl(45deg, 100%, 45%) 0%,
        hsl(45deg, 100%, 91%) 39%,
        hsl(45deg, 100%, 85%) 49%,
        hsl(45deg, 100%, 91%) 86%,
        hsl(45deg, 100%, 45%) 100%
    );
}

.is-color-option .metallic-black {
    background: linear-gradient(
        55deg,
        hsl(0deg, 0%, 12%) 0%,
        hsl(0deg, 0%, 24%) 39%,
        hsl(0deg, 0%, 31%) 49%,
        hsl(0deg, 0%, 24%) 86%,
        hsl(0deg, 0%, 12%) 100%
    );
}

/*
    Section: cart page
*/

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-alt-off-white);
}

.cart-items .cart-item + .cart-item {
    margin-top: 1rem;
    padding-top: 0;
}

.cart-item .cart-item-image {
    margin-right: 1rem;
}

.cart-item .cart-item-description {
    flex: 1;
}

.cart-item .cart-item-product-name {
    width: 100%;
    font-size: var(--font-size-slightly-larger);
    font-family: var(--display-font);
    letter-spacing: var(--letter-spacing-2);
}

.cart-item .cart-item-product-options {
    color: var(--color-teal-1);
    white-space: pre-line;
    font-size: var(--font-size-slightly-smaller);
    font-style: italic;
    text-transform: lowercase;
}

.cart-item .cart-item-qty {
    flex: 0;
    text-align: left;
}

.cart-item .cart-item-qty .field {
    display: flex;
    align-items: center;
}

.cart-item .cart-item-qty .input {
    width: auto;
    max-width: 10ch;
}

.cart-item .cart-item-qty .button {
    border: 0 none;
    color: var(--color-alt-gray);
}

.cart-item .cart-item-qty .button:focus {
    box-shadow: none;
}

.cart-item .cart-item-qty .button:hover {
    color: var(--color-red-2);
}

.cart-item .cart-item-price {
    flex: 0.2;
    text-align: right;
    padding-right: 0.5rem;
    font-family: var(--display-font);
    letter-spacing: var(--letter-spacing-2);
}

.cart .cost-summary {
    margin-top: 1rem;
}

.cart .cost-summary-item {
    display: block;
    text-align: right;
    margin-bottom: 0.25rem;
    padding-right: 0.5rem;
}

.cart .cost-summary-item.is-total strong {
    font-weight: bold;
    font-family: var(--display-font);
    letter-spacing: var(--letter-spacing-2);
}

.cart .cost-summary-item.is-shipping-and-tax {
    font-style: italic;
    font-size: var(--font-size-smaller);
}

.cart .cart-empty {
    text-align: center;
    font-size: var(--font-size-slightly-larger);
    margin-top: 5rem;
}

.cart .info-card {
    margin-top: 1rem;
}

.cart .checkout-button-container {
    margin-top: 1rem;
    width: 100%;
    text-align: right;
}

.checkout-button-container .button {
    text-align: right;
    color: var(--color-white);
    background-color: var(--color-purple-2);
}

/*
    Section: responsive styles for cart
*/

@media screen and (max-width: 768px) {
    .cart .image.is-128x128 {
        width: 72px;
        height: auto;
    }

    .cart-item {
        flex-wrap: wrap;
    }

    .cart-item .cart-item-description {
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: auto;
    }

    .cart-item .cart-item-product-name,
    .cart-item .cart-item-product-options {
        font-size: var(--font-size-slightly-smaller);
    }

    .cart-item .cart-item-product-name {
        font-weight: bold;
    }

    .cart-item .cart-item-qty {
        flex: 1;
    }

    .cart-item .cart-item-qty .input {
        width: 72px;
    }

    .cart-item .cart-item-qty .button {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        color: var(--color-red-2);
    }

    .cart-item .cart-item-price {
        flex: 0;
    }

    .checkout-button-container .button {
        width: 100%;
    }
}

/*
    Section: checkout page styles.
*/

.button.is-continue {
    color: var(--primary-button-text-color);
    background-color: var(--primary-button-bg);
}

.button.is-go-back {
    border: none;
    font-size: var(--font-size-smaller);
}

.button.is-go-back:hover {
    color: var(--color-red-2);
}

.checkout-step,
.order-summary,
.order-confirmation {
    background-color: var(--color-white);
    color: var(--color-not-quite-black);
    display: block;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.checkout-step form {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.checkout-section-header {
    font-weight: bold;
    font-size: var(--font-size-slightly-larger);
    display: flex;
}

.checkout-section-header :not(.icon) {
    flex: 1;
}

.checkout-section-header .icon {
    display: none;
    visibility: invisible;
    color: var(--color-teal-3);
    align-self: center;
}

.checkout-step p.note {
    font-size: var(--font-size-smaller);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.checkout-step .buttons {
    margin-top: 2rem;
}

/*
    Checkout steps have three states- incomplete, active, and complete.

    incomplete:
    - only the header text is visible.

    active (.is-active):
    - header text is visible, but the checkmark in the header isn't.
    - the "active content" (usually a form) is visible.
    - complete content is hidden.

    complete (.is-complete):
    - header text and checkmark are visible.
    - active content is hidden.
    - complete content is shown.
*/

.checkout-step-active-content {
    display: none;
    visibility: hidden;
}

.checkout-step-complete-content {
    margin-top: 1rem;
    font-size: var(--font-size-slightly-smaller);
    display: none;
    visibility: hidden;
}

.checkout-step-complete-content span {
    display: block;
}

.checkout-step-complete-content span.inline {
    display: inline;
}

.checkout-step-complete-content span:empty {
    display: none;
}

/* is-complete variant */

.checkout-step.is-complete h2 .icon {
    display: inherit;
    visibility: visible;
}

.checkout-step.is-complete .checkout-step-complete-content {
    display: inherit;
    visibility: visible;
}

/* is-active variant */

.checkout-step.is-active {
    --elevation-shadow-color: rgba(180, 180, 180, 0.15);

    box-shadow: -0.2rem -0.2rem 0.4rem rgba(180, 180, 180, 0.2), 0.15rem 0.3rem 0.3rem var(--elevation-shadow-color),
        0.4rem 0.6rem 0.6rem var(--elevation-shadow-color);
}

.checkout-step.is-active .checkout-step-active-content {
    display: inherit;
    visibility: visible;
}

.checkout-step.is-active .checkout-step-complete-content {
    display: none;
    visibility: hidden;
}

/* Styles for the shipping step */

.shipping-option-radio-service-and-description {
    padding-right: 2rem;
    flex: 1;
}

.shipping-option-radio-service {
    font-size: var(--font-size-slightly-smaller);
}

.shipping-option-radio-description {
    font-size: var(--font-size-smaller);
    color: var(--color-teal-2);
}

/* Styles for the payment step */

#payment-section .is-checkbox {
    margin-top: 0.5rem;
}

#payment-section .flex-checkbox {
    font-size: var(--font-size-slightly-smaller);
}

.payment-switcher .button {
    font-size: var(--font-size-slightly-smaller);
    color: var(--color-purple-2);
    background-color: white;
    border-color: var(--color-purple-2);
}

.payment-switcher .button.is-active {
    color: var(--color-white);
    background-color: var(--color-purple-2);
}

.payment-switcher .button:first-child {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.payment-switcher .button:last-child {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.stripe-card {
    box-shadow: inset 0 0.0625em 0.125em rgb(10 10 10 / 5%);
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--color-white);
    border: 1px solid var(--color-alt-light-gray);
    border-radius: 4px;
    color: var(--color-not-quite-black);
    padding-bottom: calc(0.5em - 1px);
    padding-left: calc(0.75em - 1px);
    padding-right: calc(0.75em - 1px);
    padding-top: calc(0.5em - 1px);
}

.payment-method-summary {
    font-family: "IBM Plex Mono", monospace;
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.payment-method-summary span {
    flex: 1;
}

.payment-method-summary span:last-child {
    flex: 0;
}

.card-brand {
    width: 48px;
    margin-right: 0.5rem;
}

/* Styles for the confirm step. */

/* Styles for the modal that shows up after submitting an order. */

.submitting-order-model-content {
    text-align: center;
}

.submitting-order-model-content .button.is-ghost {
    background: none;
    border: none;
    height: 2rem;
}

.submitting-order-model-content .button.is-loading::after {
    border-color: transparent transparent var(--color-teal-4) var(--color-teal-5) !important;
}

.submitting-order-model-content h2 {
    font-size: var(--font-size-largest);
    color: var(--color-teal-4);
}

.submitting-order-model-content p {
    font-size: var(--font-size-slightly-smaller);
    color: var(--color-purple-4);
}

/* Styles for the order summary on the right. */

.order-summary {
    font-size: var(--font-size-smaller);
    position: sticky;
    top: 2rem;
}

.order-summary-items {
    margin-top: 1rem;
}

.order-summary-item {
    align-items: center;
}

.order-summary-item-product-name {
    letter-spacing: 0.1em;
}

.order-summary-item-product-options {
    font-family: "Nunito", serif;
    text-transform: lowercase;
    white-space: pre-line;
    color: var(--color-teal-1);
    font-size: var(--font-size-smallest);
}

.order-summary-item-numbers {
    text-align: right;
}

.order-summary-item-qty.is-qty-1 {
    background-color: var(--color-teal-5);
}

.order-summary-item-qty.is-qty-2 {
    background-color: var(--color-purple-5);
}

.order-summary-item-qty.is-qty-3 {
    background-color: var(--color-red-5);
}

.order-summary-item-qty.is-qty-4 {
    background-color: var(--color-alt-cyan-5);
}

.order-summary-item-qty.is-qty-5 {
    background-color: var(--color-alt-green-5);
}

.order-summary-item-qty.is-qty-6 {
    background-color: var(--color-alt-purple-5);
}

.order-summary-items .order-summary-item + .order-summary-item {
    padding-top: 0;
    border: none;
}

.cost-summary {
    margin-top: 1rem;
}

.cost-summary-item {
    display: flex;
    margin-bottom: 0.25rem;
}

.cost-summary-item :first-child {
    flex-grow: 1;
}

.cost-summary-item.is-total {
    margin-top: 0.75rem;
    margin-bottom: 0;
    font-weight: bold;
    font-size: var(--font-size-normal);
    letter-spacing: 0.1em;
}

/* Checkout confirmation styles. */

.order-confirmation h2 {
    font-weight: bold;
    font-size: var(--font-size-slightly-larger);
}

.order-confirmation h2 .icon {
    color: var(--color-teal-3);
}

.order-confirmation p {
    margin-top: 1em;
}

.order-confirmation em {
    font-style: normal;
    color: var(--color-teal-1);
}

.order-confirmation p.shipping-address {
    font-size: var(--font-size-slightly-smaller);
    padding-left: 1em;
    color: var(--color-purple-1);
    border-left: 1px solid var(--color-purple-1);
}

.order-confirmation p.shipping-address span {
    display: block;
}

.order-confirmation p.shipping-address span.inline {
    display: inline;
}

.order-confirmation .note {
    font-size: var(--font-size-slightly-smaller);
    font-style: italic;
}

/*
    Section: responsive styles for checkout.
*/

@media screen and (max-width: 768px) {
    body.is-checkout-page > section.section {
        padding: 1.5rem 0;
    }

    .checkout-step .buttons.is-centered .button {
        width: 100%;
    }

    #checkout-form-container.columns > .column {
        padding-right: 0;
    }
}

/*
    Section: general content page styles.
*/

.content h2 {
    color: var(--color-teal-1);
    font-size: var(--font-size-slightly-larger);
}

.content h3 {
    color: var(--color-red-1);
    font-size: var(--font-size-slightly-larger);
}

.content .column .image {
    margin: 0 auto;
}

.content .columns.has-image {
    align-items: center;
}

@media screen and (max-width: 768px) {
    .content .columns.has-image {
        display: flex;
        flex-direction: column;
    }

    .content .columns.has-image .column {
        order: 1;
    }

    .content .columns.has-image .column.is-one-third {
        order: 0;
        width: 75%;
    }
}

/*
    Section: styles for specific content pages.
*/

.retailer-card {
    display: block;
    padding: 1.5rem 0.75rem;
    text-align: center;
    font-size: var(--font-size-slightly-smaller);
}

.retailer-card .image img {
    object-fit: scale-down;
}

.retailer-card .image {
    margin-bottom: 1rem;
}

.retailer-card p {
    margin-bottom: 0 !important;
}

a.retailer-card {
    text-decoration: none;
    color: var(--text-color);
}

a.retailer-card::after {
    content: none;
}