main {
    --adjusted_header: var(--wp--preset--header_size);
}








.mza-shop-layout {
    display: flex;
    gap: 2em;
    align-items: flex-start;
    max-width: unset;
    margin: 0 auto;
    flex-direction: column;
}



.mza-shop-layout aside {
    display: flex;
    flex-direction: row;
    gap: 1em;
    padding: 0 1em;
    min-height: 75px;
    width: 100%;
    margin-left: -1em;
    align-items: center;
    z-index: 10;
}
.mza-shop-layout aside > .mza-icon {
    --color: var(--mza-core-text-a00);
    --hov_color: var(--mza-core-text-a30);
    --size: 2em;
    min-width: var(--size);
    margin: 0;
}


.mza-shop-layout aside #search-bar,
.mza-shop-layout aside #sortby-bar,
.mza-shop-layout aside #filter-bar {
    max-height: 0 !important;
    overflow: hidden;

    position: absolute;
    width: calc(100% - 1em);
    margin-left: -1em;
    top: calc(var(--adjusted_header) + 75px);
    background-color: var(--mza-core-surface-a00);
    padding: 0 1em;
    transition: all var(--mza-core-duration) ease-in-out;
}

.mza-shop-layout aside > .mza-icon.active { 
    --color: var(--mza-core-tonal-a00); 
    --hov_color: var(--mza-core-tonal-a50); 
}

.mza-shop-layout aside #search-bar.active,
.mza-shop-layout aside #sortby-bar.active,
.mza-shop-layout aside #filter-bar.active {
    display: flex;
    max-height: 100vh !important;
    padding: 1em;
    border-bottom: 2px var(--mza-core-surface-a10) solid;
}

.mza-shop-layout aside .mza-input,
.mza-shop-layout aside .mza-select { margin: 0 !important; }




.mza-checkbox .mza-icon { outline: 1px transparent solid; border-radius: 50%; }
.mza-checkbox .mza-icon.on {
    --bg_color: var(--mza-core-surface-a00);
    --hov_bg_color: var(--mza-core-surface-a00);
    --color: transparent;
    --hov_color: transparent;
    outline: 1px var(--mza-core-surface-a50) solid;
}

.mza-shop-filters { width: calc(100% - 1em); }

.mza-shop-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
    margin: 2em 0;
}
.mza-shop-filter-grid:has(.mza-checkbox.color-opt) { grid-template-columns: unset; grid-auto-columns: 32px; grid-auto-flow: column; }
.mza-shop-filter-grid .mza-checkbox { margin: 0 !important; width: 100%; }

.mza-checkbox.text-opt span {
    display: block;
    color: var(--mza-core-text-a00);
    background: var(--mza-core-surface-a10);
    border-radius: 0.5em;
    padding: 1em;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
    transition: all var(--mza-core-duration) ease-in-out;
    outline: 2px solid transparent;
    width: 100%;
}
.mza-checkbox.text-opt input:checked + span { outline: 2px solid var(--mza-core-tonal-a00); }

.mza-checkbox.color-opt span {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--swatch);
    border: 2px solid var(--mza-core-surface-a10);
    cursor: pointer;
    transition: all var(--mza-core-duration) ease-in-out;
    outline: 2px solid transparent;
}
.mza-checkbox.color-opt input:checked + span { outline: 2px solid var(--mza-core-tonal-a00); }



.mza-shop-layout > div { flex-grow: 1; min-width: 0; }
.mza-shop-layout > div h1 { font-size: 3em; }
.mza-shop-layout > div h1 span { opacity: 0.25; }

.mza-shop-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1em;
    padding-bottom: 2em;
}

.mza-shop-product {
    cursor: pointer;
    display: block;
    border-radius: var(--mza-core-radius);
    transition: all var(--mza-core-duration) ease-in-out;
}
.mza-shop-product-media {
    position: relative;
    background: var(--mza-core-surface-a10);
    aspect-ratio: 1.5 / 1;
    overflow: hidden;
    border-radius: var(--mza-core-radius);
    transition: all var(--mza-core-duration) ease-in-out;
}
.mza-shop-product-media img { height: 100%; width: 100%; object-fit: cover; border-radius: var(--mza-core-radius); }
.mza-shop-product-content { padding: 1em; width: calc(100% - 2em); }
.mza-shop-product-colors {
    position: absolute;
    top: 1em;
    left: 1em;
    gap: 4px;
    display: flex;
    align-self: start !important;
    align-items: start !important;
    justify-content: start !important;
    padding: 0 !important;
    flex-direction: row !important;
}
.mza-shop-product-colors span { height: 12px; width: 12px; border-radius: 50%; border: 2px solid var(--mza-core-surface-a10); }
.mza-shop-product-content h3 { font-size: 1.25em; margin: 0; }
.mza-shop-product-content p { font-size: 1em; margin: 0; }





.mza-product-layout {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1em;
    margin: 0;
}

.mza-product-info-1 {
    overflow: hidden;
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 1;
    height: fit-content;
}



.mza-product-info-2 > h1 { font-size: 3em; margin-bottom: 0; }
.mza-product-info-2 > h1 span { opacity: 0.25; }
.mza-product-info-2 > p { font-size: 1em; margin: 0; }
.mza-product-info-2 > h2 { font-size: 1.5em; margin: 1em 0 0; position: relative; }
.mza-product-info-2 > h2.has-sale { color: var(--good_color); }
.mza-product-info-2 > h2.has-sale::after,
.mza-product-info-2 > h2.out-of-stock::after {
    content: var(--pnx);
    position: absolute;
    top: 1.5em;
    left: 0;
    font-size: 0.75em;
}
.mza-product-info-2 > h2.has-sale::after {
    color: var(--mza-core-text-a00);
    opacity: 0.25;
    text-decoration: line-through;
}
.mza-product-info-2 > h2.out-of-stock::after { color: var(--no_good_color); }



.mza-product-info-3 { grid-row: 3; }
.mza-product-info-3 .variation-selector { --mza-core-radius: 0.75em; }
.mza-product-info-3 .variation-selector .mza-container > div { padding: 0 !important; width: 100% !important; }
.mza-product-info-3 .variation-selector .mza-container > div p {
    margin: 1em auto !important;
    font-size: 1em;
    text-align: center;
}



.pay-buttons { display: flex; gap: 1em; align-items: center; justify-content: center; }
.fav-button, .pay-button {
    max-width: unset;
    margin: 1em 0;
}
.fav-button { 
    --color: #FF0054;
    --hov_color: #FF0054BD;
    --size: 32px;
}
.pay-button { 
    --bg_color: black;
    --hov_bg_color: var(--wp--preset--color--dark-surface-20);
    --color: white;
    --hov_color: white;
    width: 100%;
}

.mza-droplet { margin: 0; }
.mza-droplet-content p { font-size: 1em; white-space: break-spaces !important; }
.mza-selector { max-width: unset; }



.mza-reviews-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.mza-reviews-stars { display: flex; flex-direction: row; }
.mza-reviews-stars .mza-icon { --size: 20px; margin: 0 !important; }


.mza-reviews-list .mza-list-item { grid-template-columns: 1fr !important; }
.mza-reviews-list .mza-list-item-title { font-weight: 700; }
.mza-list-item-score { 
    display: flex;
    width: 100%;
    margin: 1em 0;
    align-items: center;
}
.mza-list-item-score p { text-align: right; }






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




    .mza-product-layout {
        position: relative;
        width: calc(100% - 3em);
        max-width: 1300px;
        margin: 0 auto;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        column-gap: 3em;
        align-items: start;
    }
    .mza-product-info-1 {
        grid-column: 1;
        grid-row: 1 / span 10;
        margin-bottom: 2em;
        aspect-ratio: unset;
    }



    .mza-product-info-2,
    .mza-product-info-3,
    .mza-product-info-4,
    .mza-product-info-5,
    .mza-product-info-6,
    .mza-product-info-7 {
        position: relative;
        grid-column: 2;
        grid-row: unset;
    }
}





@media (hover: hover) {
    .mza-filter-grid .mza-checkbox:hover span { transform: translate(0, -0.5em); }
    .mza-filter-grid .mza-checkbox:active span { transform: translate(0, -0.5em) scale(0.97); }

    .mza-shop-product:hover { opacity: 0.75; }
    .mza-shop-product:hover .mza-shop-product-media { transform: translate(0, -0.5em); }
    .mza-shop-product:active { transform: scale(0.97); }
}
@media (hover: none) {
    .mza-filter-grid .mza-checkbox.has-touch span { transform: translate(0, -0.5em) scale(0.97); }
}








@media only screen and (min-width: 768px) {
    .mza-shop-layout { flex-direction: row; }
    .mza-shop-product { max-width: 300px; }
    .mza-shop-layout aside {
        flex-direction: column;
        width: 325px;
        align-items: start;
    }
    .mza-shop-layout aside #search-bar,
    .mza-shop-layout aside #sortby-bar,
    .mza-shop-layout aside #filter-bar { 
        background-color: transparent;
        border: none !important;
        max-height: unset !important;
        position: relative;
        top: unset;
        margin: 0;
        overflow: unset;
        width: 100%;
        padding: 2px;
    }

    .mza-shop-layout aside > .mza-icon { display: none; }
}