:root {
    --color-white: #ffffff;
    --color-black: #000000;
    --color-blue: #9adddd;
    --color-orange: #ff7a5f;
    --color-gray: #c1c1c1;
    --color-pink: #ffe2dd;
    
    --space-padding: 15px;
    --space-margin: 15px;
    --space-border: 2px;
}
@media (prefers-color-scheme: dark) {
    /*
    :root {
        --color-white: #000000;
        --color-black: #ffffff;
        --color-blue: color-mix(in hsl, #9adddd, black 50%);
        --color-orange: color-mix(in hsl, #ff7a5f, black 50%);
    }
    */
}
html {
    font-family: BrandonGrotesqueRegular;
    background-color: var(--color-white);
    color: var(--color-black);
}
body {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 50px 15px auto 25px;
    width: 100dvw;
    height: 100dvh;
}

body > header {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    display: grid;
    grid-template-columns: 15px auto 15px 1fr;
    grid-template-rows: subgrid;
    user-select: none;
    z-index: 999999999;
}
body > header > #MobileNavMenuToggle {
    display: none;
}
body > header > .LogoContainer {
    background-color: var(--color-orange);
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}
body > header > .LogoContainer > a {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}
body > header > .LogoContainer > a > img {
    height: 50px;
    background-color: var(--color-blue);
    padding: var(--space-padding);
    border-bottom-left-radius: var(--space-padding);
    border-bottom-right-radius: var(--space-padding);
}
body > header > .MobileNavMenu {
    background-color: var(--color-orange);
    color: var(--color-white);
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}
body > header > .MobileNavMenu > a,
body > header > .MobileNavMenu > label {
    flex: 1;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    color: var(--color-white);
    text-decoration: none;
}
body > header > .MobileNavMenu > a:hover,
body > header > .MobileNavMenu > label:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > header > nav {
    background-color: var(--color-orange);
    color: var(--color-white);
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 5;
    display: none;
    flex-direction: row;
    gap: var(--space-padding);
    align-items: center;
}
body > header > nav > a {
    color: var(--color-white);
    text-decoration: none;
    padding: 0;
}
body > header > nav > a:hover {
    animation: NavItemBounce 500ms;
}
body > header > nav > details {
    text-align: center;
    width: 100%;
}
body > header > nav > details > summary {    
    padding: var(--space-padding);
    list-style: none;
}
body > header > nav > details > summary:after {
    content: '▼';
}
body > header > nav > details > summary:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
    cursor: pointer;
}
body > header > nav > details > main {
    display: flex;
    flex-direction: column;
    border-top: var(--space-border) solid var(--color-white);
    border-bottom: var(--space-border) solid var(--color-white);
}
body > header > nav > details > main > a {
    color: var(--color-white);
    text-decoration: none;
    padding: 0;
}

body > header:has(#MobileNavMenuToggle:checked) {
    grid-row-end: 5;
    pointer-events: none;
}
body > header:has(#MobileNavMenuToggle:checked) .LogoContainer {
    pointer-events: auto;
}
body > header:has(#MobileNavMenuToggle:checked) .MobileNavMenu {
    pointer-events: auto;
}
body > header:has(#MobileNavMenuToggle:checked) nav {
    display: flex;
    flex-direction: column;
    grid-row-start: 3;
    grid-row-end: 5;
    gap: 0;
    pointer-events: auto;
    overflow: auto;
}
body > header:has(#MobileNavMenuToggle:checked) nav a {
    text-align: center;
    padding: var(--space-padding);
    width: calc(100% - (var(--space-padding) * 2));
}
body > header:has(#MobileNavMenuToggle:checked) nav a:hover {
    animation: none;
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}

@media only screen and (min-width: 700px) {
    body > header {
        overflow: visible;
    }
    body > header > .MobileNavMenu {
        display: none;
    }
    body > header:has(#MobileNavMenuToggle:checked) nav,
    body > header > nav {
        display: flex;
        overflow: visible;
    }
    body > header > nav > details {
        width: auto;
    }
    body > header > nav > details > summary {
        padding: 0;
    }
    body > header > nav > details > summary:hover {
        background-color: inherit;
    }
    body > header > nav > details > main {
        background-color: var(--color-orange);
        border: none;
        position: absolute;
    }
    body > header > nav > details > main > a {
        padding: var(--space-padding);
        border-top: var(--space-border) solid var(--color-white);
        border-left: var(--space-border) solid var(--color-white);
        border-right: var(--space-border) solid var(--color-white);
    }
    body > header > nav > details > main > a:last-of-type {
        border-bottom: var(--space-border) solid var(--color-white);
    }
    body > header > nav > details > main > a:hover {
        background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);        
    }
    
    body > header:has(#MobileNavMenuToggle:checked) {
        grid-row-start: 1;
        grid-row-end: 3;
        pointer-events: auto;
    }
    body > header:has(#MobileNavMenuToggle:checked) nav {
        display: flex;
        flex-direction: row;
        grid-row-start: 1;
        grid-row-end: 3;
        gap: var(--space-padding);
    }
    body > header:has(#MobileNavMenuToggle:checked) nav a {
        text-align: center;
        width: inherit;
        padding: 0;
    }
    body > header:has(#MobileNavMenuToggle:checked) nav a:hover {
        animation: NavItemBounce 500ms;
        background: none;
    }
}

@keyframes NavItemBounce {
    0% {
        padding-top: 0;
    }
    15% {
        padding-top: calc(var(--space-padding) * 2);
    }
    25% {
        padding-top: calc(var(--space-padding) * 2);
    }
    50% {
        padding-top: 0;
    }
    75% {
        padding-bottom: calc(var(--space-padding) * 2);
    }
    100% {
        padding-bottom: 0;
    }
}

body > main {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 5;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
body > main > main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-items: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: var(--space-margin);
}

body > main > footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-padding);
    padding: var(--space-padding);
    justify-content: space-around;
    align-content: center;
    border-top: var(--space-border) solid var(--color-orange);
}
body > main > footer > img {
    max-height: 75px;
}
body > main > footer > div {
    min-width: 300px;
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
body > main > footer > div > a {
    color: var(--color-orange);
    text-decoration: none;
}
@media screen and (min-width: 782px) {
    body > main > footer > div:last-of-type {
        justify-content: end;
    }
}

dialog {
    border: none;
    background-color: var(--color-white);
    color: var(--color-orange);
    display: flex;
    flex-direction: column;
    white-space: pre-wrap;
    text-align: center;
}
dialog::backdrop {
    background-color: #000000aa;
}
dialog h1 {
    margin: 0;
}
dialog fieldset {
    border: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: var(--space-margin);
}
dialog fieldset button {
    background-color: var(--color-orange);
    color: var(--color-white);
    padding: var(--space-padding);
    border: none;
    cursor: pointer;
    width: 100%;
}
dialog fieldset button:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
dialog.Error {
    background-color: lightcoral;
    color: white;
}
dialog.ProcessingPayment {
    overflow: hidden;
}
dialog.AgeCheck {
    background-color: var(--color-white);
    border: var(--space-border) solid var(--color-orange);
    color: var(--color-orange);
    gap: calc(var(--space-margin) * 2);
}
dialog.AgeCheck > h1 {
    font-size: 16pt;
}
dialog.AgeCheck > form > fieldset {
    justify-content: center;
}
dialog.AgeCheck > form > fieldset > button:last-of-type {
    background-color: var(--color-blue);
    color: var(--color-black);
}
dialog.ReferralShareBox img {
    width: 100%;
    max-width: 150px;
    margin: auto;
    text-align: center;
    object-fit: contain;
}
dialog.ReferralShareBox .ImageContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-margin);
    padding: var(--space-padding);
}
dialog.ReferralShareBox .ImageContainer img {
    background-color: var(--color-orange);
    padding: 5px;
    width: 50px;
    border-radius: 100%;
    object-fit: contain;
}
dialog.ReferralShareBox .ImageContainer img:hover{
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
dialog.ReferralShareBox button {
    width: 100%;
    background-color: var(--color-orange);
    padding: var(--space-padding);
    color: var(--color-white);
    border: none;
    cursor: pointer;
}

body > main > main.home > section {
    display: flex;
    flex-direction: column;
    justify-items: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 100%;
    padding: var(--space-padding);
}
body > main > main.home > section:nth-of-type(even) {
    background-color: var(--color-orange);
    color: var(--color-white);
}
body > main > main.home > section > h1 {
    margin: var(--space-margin) 0 0;
    text-align: center;
    font-size: 58pt;
}
body > main > main.home > section > h1 > span {
    color: var(--color-orange);
}
body > main > main.home > section > img {
    width: 100%;
    max-width: 750px;
    object-fit: contain;
}
body > main > main.home > section > .CallToAction {
    background-color: var(--color-blue);
    color: var(--color-orange);
    padding: var(--space-padding);
    text-decoration: none;
    font-weight: bold;
}
body > main > main.home > section > .HowViewbudWorksSteps {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-padding);
}
body > main > main.home > section > .HowViewbudWorksSteps div {
    display: flex;
    flex-direction: column;
    text-align: center;
}
body > main > main.home > section > .HowViewbudWorksSteps div img {
    max-height: 118px;
    min-height: 118px;
    object-fit: contain;
}
body > main > main.home > section.Reviews {
    background-color: var(--color-blue);
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: var(--space-margin);
    padding: var(--space-padding);
    overflow: scroll;
}
body > main > main.home > section.Reviews .Review {
    background-color: var(--color-white);
    color: var(--color-black);
    min-width: calc(100% - (var(--space-margin) * 2) - (var(--space-padding) * 2) - 30px);
    height: calc(100% - (var(--space-padding) * 2));
    display: flex;
    flex-direction: column;
    gap: var(--space-margin);
    padding: var(--space-padding);
    text-align: center;
    margin-left: calc(var(--space-margin) + 30px);
    margin-right: var(--space-margin);
    position: relative;
    font-size: 24pt;
}
body > main > main.home > section.Reviews .Review:before {
    content: '“';
    background-color: var(--color-orange);
    color: var(--color-white);
    position: absolute;
    top: 0;
    left: -30px;
    width: 30px;
    height: 30px;
    font-size: 30px;
    line-height: 45px;
    font-weight: bolder;
}
body > main > main.home > section.Reviews .Review span:nth-of-type(2) {
    color: var(--color-orange);
}
body > main > main.home > section.KeyWorkers {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-margin);
}
body > main > main.home > section.KeyWorkers > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-margin);
    width: calc(100% - 30px);
    max-width: min(100%,500px);
    text-align: center;
}
body > main > main.home > section.KeyWorkers > div > a {
    color: var(--color-orange);
}

body > main > main.shop {
    padding: var(--space-padding);
    margin-top: var(--space-margin);
}
body > main > main.shop > .Banner {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: linear-gradient(45deg,var(--color-blue) 0%, var(--color-blue) 10%, var(--color-orange) 15%, var(--color-orange) 85%, var(--color-blue) 90%);
    padding: 50px;
    color: white;
    text-decoration: none;
    text-align: center;
}
body > main > main.shop > .ProductList {
    display: flex;
    opacity: 0;
    animation: FadeIn ease 300ms;
    animation-fill-mode: forwards;
}
body > main > main.shop > .ProductList.Show {
    opacity: 100%;
    animation: none;
}
@keyframes FadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
    }
}

.ProductListFilter {
    width: calc(100% - var(--space-padding));
    max-width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    gap: var(--space-margin);
    align-items: center;
}
.ProductListFilter > fieldset {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 400px;
}
.ProductListFilter > fieldset > input[type='search'] {
    flex: 1;
    border: none;
    border-left: var(--space-border) solid var(--color-orange);
    border-top: var(--space-border) solid var(--color-orange);
    border-bottom: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    border-top-left-radius: var(--space-padding);
    border-bottom-left-radius: var(--space-padding);
    outline: none;
}
.ProductListFilter > fieldset > input[type='search']:focus {
    border-color: color-mix(in hsl, var(--color-blue), var(--color-black) 10%);
}
.ProductListFilter > fieldset > button {
    border: none;
    border-right: var(--space-border) solid var(--color-orange);
    border-top: var(--space-border) solid var(--color-orange);
    border-bottom: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    background-color: var(--color-orange);
    color: var(--color-white);
    border-top-right-radius: var(--space-padding);
    border-bottom-right-radius: var(--space-padding);
    cursor: pointer;
}
.ProductListFilter > fieldset > button:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
    border-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
.ProductListFilter > fieldset > button:disabled {
    background-color: var(--color-gray);
    border-color: var(--color-gray);
}
.ProductListFilter > fieldset > button.ClearQuizResult {
    border-radius: var(--space-margin);
    width: 100%;
}
.ProductListFilter > fieldset > details {
    color: var(--color-white);
    flex: 1;
    user-select: none;
    position: relative;
}
.ProductListFilter > fieldset > details summary {
    background-color: var(--color-orange);
    padding: var(--space-padding);
    list-style: none;
    border-radius: var(--space-padding);
}
.ProductListFilter > fieldset > details[open] summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.ProductListFilter > fieldset > details summary:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
.ProductListFilter > fieldset > details summary:after {
    content: '▼';
}
.ProductListFilter > fieldset > details main {
    display: flex;
    flex-direction: column;
    background-color: var(--color-orange);
}
.ProductListFilter > fieldset > details > main {
    border-bottom: var(--space-border) solid var(--color-white);
    position: absolute;
    top: 100%;
    width: 100%;
}
.ProductListFilter > fieldset > details > main > details {
    border-top: var(--space-border) solid var(--color-white);
}
.ProductListFilter > fieldset > details > main > details > main {
    max-height: 300px;
    overflow: auto;
}
.ProductListFilter > fieldset > details > main > details > main > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.ProductListFilter > fieldset > details > main > details > main > ul > li {
    display: flex;
    flex-direction: column;
    border-top: var(--space-border) solid var(--color-white);
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 15%);
}
.ProductListFilter > fieldset > details > main > details > main > ul > li > input[type='checkbox'] {
    display: none;
}
.ProductListFilter > fieldset > details > main > details > main > ul > li > label {
    padding: var(--space-padding);
    display: flex;
    flex-direction: row;
}
.ProductListFilter > fieldset > details > main > details > main > ul > li > label span {
    flex: 1;
}
.ProductListFilter > fieldset > details > main > details > main > ul > li > input[type='checkbox']:checked ~ label {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 25%);
}
.ProductListFilter > fieldset > details > main > details > main > ul > li > label:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%) !important;
}
.ProductListFilter > fieldset > details > main > details > main > ul > li > input[type='checkbox']:checked ~ label:after {
    content: '✓';
}

.FilterPills {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-margin);
    width: 100%;
    max-width: 100% !important;
    user-select: none;
}
.FilterPills > .FilterPill {
    background-color: var(--color-orange);
    color: var(--color-white);
    padding: var(--space-padding);
    border-radius: var(--space-padding);
    display: flex;
    flex-direction: row;
    gap: var(--space-margin);
}
.FilterPills > .FilterPill:has(> label:hover) > span {
    color: var(--color-gray);
}
.FilterPills > .FilterPill > label:hover {
    cursor: pointer;
    color: var(--color-gray);
}

.ProductList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--space-margin) * 2);
    padding: var(--space-padding);
}

.Product {
    min-width: min(80%, 350px);
    max-width: min(80%, 350px);
    padding: var(--space-padding);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--space-margin);
}
.Product:hover {
    box-shadow: #000000aa 0 0 20px 0;
}
.Product > a:nth-of-type(1) {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 4;
    justify-content: center;
    align-content: center;
}
.Product > a:nth-of-type(1) > img {
    width: 100%;
    height: 150px;
    min-height: 150px;
    max-height: 150px;
    object-fit: scale-down;
}
.Product > a:nth-of-type(2) {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    color: var(--color-black);
    text-decoration: none;
    display: flex;
    flex-direction: column;
}
.Product > aside {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-margin);
}
.Product > aside > button,
.Product > aside > a {
    background-color: var(--color-orange);
    color: var(--color-white);
    border: none;
    padding: var(--space-padding);
    cursor: pointer;
    border-radius: var(--space-margin);
}
.Product > aside > button:hover,
.Product > aside > a:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
.Product > aside > button:nth-of-type(1) {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}
.Product > aside > button:nth-of-type(2) {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}
.Product > aside > label:nth-of-type(1) {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.Product > aside > button:nth-of-type(3) {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}
.Product > aside > a:nth-of-type(1) {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    text-align: center;
    text-decoration: none;
}
.Product > aside:has(> label:nth-of-type(1) > span:empty) > button:nth-of-type(2),
.Product > aside:has(> label:nth-of-type(1) > span:empty) > label:nth-of-type(1),
.Product > aside:has(> label:nth-of-type(1) > span:empty) > button:nth-of-type(3),
.Product > aside:has(> label:nth-of-type(1) > span:empty) > a:nth-of-type(1) {
    display: none;
}
.Product > aside:has(> label:nth-of-type(1) > span:empty) > a:nth-of-type(1) {
    display: none;
}
.Product > aside > button:disabled {
    background-color: var(--color-gray);
}

body > main > main.product {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    gap: 0;
    padding: var(--space-padding);
}
body > main > main.product > section {
    width: 100%;
    padding: var(--space-padding);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-margin);
}
body > main > main.product > section > a {
    color: var(--color-blue);
    text-decoration: none;
}
body > main > main.product > section.TopTag {
    width: 100%;
}
body > main > main.product > section.Information {
    flex-direction: column;
    max-width: 500px;
}
body > main > main.product > section.Detail {
    min-width: min(500px, calc(100% - var(--space-padding) * 2));
    flex: 1;
}
body > main > main.product > section > h1 {
    font-size: 16pt;
    margin: 0;
    width: fit-content;
    text-wrap: wrap;
    word-wrap: break-word;
}
body > main > main.product > section > img {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
}
body > main > main.product > section > .MetaData {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-margin);
}
body > main > main.product > section > .MetaData > .Group {
    width: fit-content;
    max-width: 50%;
    min-width: fit-content;
    flex: 1;
}
body > main > main.product > section > .MetaData > .Group > h2 {
    margin: 0;
}
body > main > main.product > section > .MetaData > .Group > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1ex;
}
body > main > main.product > section > .MetaData > .Group > ul > li > span,
body > main > main.product > section > .MetaData > .Group > ul > li > a {
    color: var(--color-black);
}
body > main > main.product > section > .MetaData > .Group > ul > li > span:after,
body > main > main.product > section > .MetaData > .Group > ul > li > a:after {
    content: ',';
}
body > main > main.product > section > .MetaData > .Group > ul > li:last-of-type > span:after,
body > main > main.product > section > .MetaData > .Group > ul > li:last-of-type > a:after {
    content: '';
}
body > main > main.product > section.Detail > img {
    max-height: 50px;
    width: 100%;
    object-fit: contain;
}
body > main > main.product > section.Detail > p {
    white-space: pre-wrap;
    margin: 0;
    width: 100%;
}
body > main > main.product > section.Detail > span.Price {
    font-size: 24pt;
    font-weight: bold;
}
body > main > main.product > section.Detail > span.Quantity {
    width: 100%;
}
body > main > main.product > section.Product {
    box-shadow: none;
}
body > main > main.product > section.Product aside {
    width: 100%;
}   

body > main > main.events {
    justify-content: start;
    padding-top: var(--space-padding);
}
body > main > main.events > .Banner {
    background-color: var(--color-orange);
    color: var(--color-white);
    padding: var(--space-padding);
    border-radius: var(--space-margin);
    text-decoration: none;
}
body > main > main.events > .Banner:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}

body > main > main.event {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    gap: 0;
    padding: var(--space-padding);
}
body > main > main.event > section {
    width: 100%;
    padding: var(--space-padding);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-margin);
}
body > main > main.event > section > a {
    color: var(--color-blue);
    text-decoration: none;
}
body > main > main.event > section.TopTag {
    width: 100%;
}
body > main > main.event > section.Information {
    flex-direction: column;
    max-width: 500px;
}
body > main > main.event > section.Detail {
    min-width: min(500px, calc(100% - var(--space-padding) * 2));
    flex: 1;
}
body > main > main.event > section > h1 {
    font-size: 16pt;
    margin: 0;
    width: fit-content;
    text-wrap: wrap;
    word-wrap: break-word;
}
body > main > main.event > section > img {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
}
body > main > main.event > section > .MetaData {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-margin);
}
body > main > main.event > section > .MetaData > .Group {
    width: fit-content;
    max-width: 50%;
    min-width: fit-content;
    flex: 1;
}
body > main > main.event > section > .MetaData > .Group > h2 {
    margin: 0;
}
body > main > main.event > section > .MetaData > .Group > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1ex;
}
body > main > main.event > section > .MetaData > .Group > ul > li > span,
body > main > main.event > section > .MetaData > .Group > ul > li > a {
    color: var(--color-black);
}
body > main > main.event > section > .MetaData > .Group > ul > li > span:after,
body > main > main.event > section > .MetaData > .Group > ul > li > a:after {
    content: ',';
}
body > main > main.event > section > .MetaData > .Group > ul > li:last-of-type > span:after,
body > main > main.event > section > .MetaData > .Group > ul > li:last-of-type > a:after {
    content: '';
}
body > main > main.event > section.Detail > img {
    max-height: 50px;
    width: 100%;
    object-fit: contain;
}
body > main > main.event > section.Detail > p {
    white-space: pre-wrap;
    margin: 0;
    width: 100%;
}
body > main > main.event > section.Detail > span.Price {
    font-size: 24pt;
    font-weight: bold;
}
body > main > main.event > section.Detail > span.DateAndTime,
body > main > main.event > section.Detail > span.Quantity {
    width: 100%;
}
body > main > main.event > section.Product {
    box-shadow: none;
}
body > main > main.event > section.Product aside {
    width: 100%;
}
body > main > main.event > section.Product aside .RemoveFromBasket,
body > main > main.event > section.Product aside .AddToBasket:nth-of-type(2) {
}

body > main > main.giftcard {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    gap: 0;
    padding: var(--space-padding);
}
body > main > main.giftcard > section {
    width: 100%;
    padding: var(--space-padding);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-margin);
}
body > main > main.giftcard > section > a {
    color: var(--color-blue);
    text-decoration: none;
}
body > main > main.giftcard > section.TopTag {
    width: 100%;
}
body > main > main.giftcard > section.Information {
    flex-direction: column;
    max-width: 500px;
}
body > main > main.giftcard > section.Detail {
    min-width: min(500px, calc(100% - var(--space-padding) * 2));
    flex: 1;
}
body > main > main.giftcard > section > h1 {
    font-size: 16pt;
    margin: 0;
    width: fit-content;
    text-wrap: wrap;
    word-wrap: break-word;
}
body > main > main.giftcard > section > img {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
}
body > main > main.giftcard > section > .MetaData {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-margin);
}
body > main > main.giftcard > section > .MetaData > .Group {
    width: fit-content;
    max-width: 50%;
    min-width: fit-content;
    flex: 1;
}
body > main > main.giftcard > section > .MetaData > .Group > h2 {
    margin: 0;
}
body > main > main.giftcard > section > .MetaData > .Group > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1ex;
}
body > main > main.giftcard > section > .MetaData > .Group > ul > li > span,
body > main > main.giftcard > section > .MetaData > .Group > ul > li > a {
    color: var(--color-black);
}
body > main > main.giftcard > section > .MetaData > .Group > ul > li > span:after,
body > main > main.giftcard > section > .MetaData > .Group > ul > li > a:after {
    content: ',';
}
body > main > main.giftcard > section > .MetaData > .Group > ul > li:last-of-type > span:after,
body > main > main.giftcard > section > .MetaData > .Group > ul > li:last-of-type > a:after {
    content: '';
}
body > main > main.giftcard > section.Detail > img {
    max-height: 50px;
    width: 100%;
    object-fit: contain;
}
body > main > main.giftcard > section.Detail > p {
    white-space: pre-wrap;
    margin: 0;
    width: 100%;
}
body > main > main.giftcard > section.Detail > span.Price {
    font-size: 24pt;
    font-weight: bold;
}
body > main > main.giftcard > section.Detail > span.DateAndTime,
body > main > main.giftcard > section.Detail > span.Quantity {
    width: 100%;
}
body > main > main.giftcard > section.Product {
    box-shadow: none;
}
body > main > main.giftcard > section.Product aside {
    width: 100%;
}
body > main > main.giftcard > section.Product aside .RemoveFromBasket,
body > main > main.giftcard > section.Product aside .AddToBasket:nth-of-type(2) {
}

body > main > main.quiz {
    background-image: url(/Images/quiz-bg.webp);
    background-repeat: repeat;
    background-size: 100%;
    background-color: rgb(154, 221, 221);
    background-position-x: center;
    background-position-y: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    padding: var(--space-padding);
    gap: var(--space-margin);
}
body > main > main.quiz > section {
    width: 100%;
    display: flex;
    justify-content: center;
}
body > main > main.quiz > section > h1 {
    background-color: var(--color-white);
    width: calc(100% - (var(--space-padding) * 2));
    min-width: min(calc(100% - (var(--space-padding) * 2)), calc(500px - (var(--space-padding) * 4)));
    max-width: 1110px;
    padding: var(--space-padding);
    text-align: center;
    margin: var(--space-margin) 0 0;
}
body > main > main.quiz > ul {
    background-color: var(--color-white);
    width: calc(100% - (var(--space-padding) * 2));
    min-width: min(calc(100% - (var(--space-padding) * 2)), calc(500px - (var(--space-padding) * 4)));
    max-width: 800px;
    flex: 1;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-margin);
    padding: var(--space-padding);
    user-select: none;
}
body > main > main.quiz > ul > li {
    margin: 0;
    background-color: var(--color-pink);
    color: var(--color-orange);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    border-radius: var(--space-margin);
    cursor: pointer;
}
body > main > main.quiz > ul > li:hover {
    background-color: color-mix(in hsl, var(--color-pink), var(--color-black) 10%);
}
body > main > main.quiz > ul > li > input[type='checkbox'] {
    display: none;
}
body > main > main.quiz > ul > li > label:first-of-type {
    background-color: var(--color-blue);
    padding: var(--space-padding);
    border-radius: var(--space-margin);
    color: var(--color-black);
}
body > main > main.quiz > ul > li > label:nth-of-type(2) {
    flex: 1;
    padding: var(--space-padding);
}
body > main > main.quiz > ul > li > label > img {
    height: 100%;
    width: 50px;
    object-fit: contain;
    margin-right: var(--space-margin);
}
body > main > main.quiz > ul > li > .SelectOrderText {
    width: 100%;
    padding: var(--space-padding);
    display: none;
}
body > main > main.quiz > ul > li:has(input:checked){
    background-color: var(--color-orange);
    color: var(--color-white);
}
body > main > main.quiz > ul > li:has(input:disabled){
    background-color: var(--color-gray);
}
body > main > main.quiz > ul > li:has(input:disabled) > label:first-of-type {
    background-color: var(--color-gray);
}
body > main > main.quiz > ul > li:has(input:checked:disabled){
    border: var(--space-border) solid var(--color-orange);
}
body > main > main.quiz > ul > li:has(input:checked) > .SelectOrderText {
    display: block;
}
body > main > main.quiz > aside {
    flex: 1;
    max-width: 255px;
    min-width: min(300px, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--space-margin);
}
body > main > main.quiz > aside > canvas {
    height: 200px;
    width: calc(100% - (var(--space-padding) * 2));
    background-color: var(--color-white);
    padding: var(--space-padding);
    object-fit: contain;
}
body > main > main.quiz > aside > button {
    width: 100%;
    padding: var(--space-padding);
    background-color: var(--color-orange);
    color: var(--color-white);
    border: none;
}
body > main > main.quiz > aside > button:disabled {
    background-color: var(--color-gray);
}
body > main > main.quiz > dialog {
    display: none;
    background-color: var(--color-white);
    border: var(--space-border) solid var(--color-orange);
    width: fit-content;
    max-width: min(calc(100% - (var(--space-padding) * 4)), 800px);
    padding: var(--space-padding);
    gap: var(--space-margin);
    text-align: center;
}
body > main > main.quiz > dialog[open] {
    display: flex;
}
body > main > main.quiz > dialog > span {
    white-space: pre-wrap;
}
body > main > main.quiz > dialog > form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
body > main > main.quiz > dialog > form > button {
    background-color: var(--color-orange);
    color: var(--color-white);
    border: none;
    padding: var(--space-padding);
    width: fit-content;
}
body > main > main.quiz > dialog[data-highlight-target]::backdrop {
    clip-path: polygon(0 0, 100% 0, 100% 65px, 0 65px);
}

body > main > main.result {
    background-image: url(/Images/quiz-bg.webp);
    background-repeat: repeat;
    background-size: 100%;
    background-color: rgb(154, 221, 221);
    background-position-x: center;
    background-position-y: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    padding: var(--space-padding);
    gap: var(--space-margin);
}
body > main > main.result > ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-margin);
}
body > main > main.result > ul > li {
    background-color: var(--color-white);
    min-width: 250px;
    max-width: calc(33dvw - (var(--space-margin) * 2));
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 125px 125px auto 50px 1fr calc(150px + (var(--space-padding) * 2));
    border-radius: var(--space-padding);
}
body > main > main.result > ul > li > img {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: var(--space-padding);
    border-top-right-radius: var(--space-padding);
}
body > main > main.result > ul > li > .MatchPercentage {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    height: fit-content;
    width: fit-content;
    align-self: center;
    justify-self: end;
    padding: var(--space-padding);
    background-color: var(--color-orange);
    color: var(--color-white);
    border-top-left-radius: var(--space-padding);
    border-bottom-left-radius: var(--space-padding);
}
body > main > main.result > ul > li > h1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    margin: 0;
    text-align: center;
    padding: var(--space-padding);
}
body > main > main.result > ul > li > section {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-margin);
}
body > main > main.result > ul > li > section > img {
    height: 50px;
    object-fit: contain;
}
body > main > main.result > ul > li > p {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 6;
    margin: 0;
    text-align: center;
    white-space: pre-wrap;
    padding: var(--space-padding);
}
body > main > main.result > ul > li > canvas {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 6;
    grid-row-end: 7;
    background-color: var(--color-white);
    height: 150px;
    width: 150px;
    object-fit: contain;
    justify-self: center;
    padding: var(--space-padding);
}

body > main > main.grapeglossary {
    padding: var(--space-padding);
    margin-top: var(--space-margin);
    justify-content: start;
}
body > main > main.grapeglossary > .Filter {
    width: calc(100% - var(--space-padding));
    max-width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    gap: var(--space-margin);
    align-items: center;
}
body > main > main.grapeglossary > .Filter > fieldset {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 400px;
}
body > main > main.grapeglossary > .Filter > fieldset > input[type='search'] {
    flex: 1;
    border: none;
    border-left: var(--space-border) solid var(--color-orange);
    border-top: var(--space-border) solid var(--color-orange);
    border-bottom: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    border-top-left-radius: var(--space-padding);
    border-bottom-left-radius: var(--space-padding);
    outline: none;
}
body > main > main.grapeglossary > .Filter > fieldset > input[type='search']:focus {
    border-color: color-mix(in hsl, var(--color-blue), var(--color-black) 10%);
}
body > main > main.grapeglossary > .Filter > fieldset > button {
    border: none;
    border-right: var(--space-border) solid var(--color-orange);
    border-top: var(--space-border) solid var(--color-orange);
    border-bottom: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    background-color: var(--color-orange);
    color: var(--color-white);
    border-top-right-radius: var(--space-padding);
    border-bottom-right-radius: var(--space-padding);
    cursor: pointer;
}
body > main > main.grapeglossary > .Filter > fieldset > button:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
    border-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.grapeglossary > .Filter > fieldset > button.ClearQuizResult {
    border-radius: var(--space-margin);
    width: 100%;
}
body > main > main.grapeglossary > .GrapeList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--space-margin) * 2);
    padding: var(--space-padding);
    opacity: 0;
    animation: FadeIn ease 300ms;
    animation-fill-mode: forwards;
}
body > main > main.grapeglossary > .GrapeList > .Grape {
    min-width: min(80%, 350px);
    max-width: min(80%, 350px);
    padding: var(--space-padding);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: var(--space-margin);
}
body > main > main.grapeglossary > .GrapeList > .Grape:hover {
    box-shadow: #000000aa 0 0 20px 0;
}
body > main > main.grapeglossary > .GrapeList > .Grape > a:nth-of-type(1) {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    justify-content: center;
    align-content: center;
}
body > main > main.grapeglossary > .GrapeList > .Grape > a:nth-of-type(1) > img {
    width: 100%;
    height: 150px;
    min-height: 150px;
    max-height: 150px;
    object-fit: scale-down;
}
body > main > main.grapeglossary > .GrapeList > .Grape > a:nth-of-type(2) {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    color: var(--color-black);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body > main > main.grape {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    gap: 0;
    padding: var(--space-padding);
}
body > main > main.grape > .BackButton,
body > main > main.grape > .ForwardButton {
    position: fixed;
    top: 50dvh;
    background-color: var(--color-orange);
    color: var(--color-white);
    width: fit-content;
    height: fit-content;
    min-height: 150px;
    padding: var(--space-padding);
    text-decoration: none;
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
    overflow: clip;
    cursor: pointer;
    opacity: 70%;
    transition: all ease 500ms;
}
body > main > main.grape > .BackButton {
    left: 0;
    border-top-right-radius: var(--space-padding);
    border-bottom-right-radius: var(--space-padding);
}
body > main > main.grape > .ForwardButton {
    right: 0;
    border-top-left-radius: var(--space-padding);
    border-bottom-left-radius: var(--space-padding);
}
body > main > main.grape > .ForwardButton > label:nth-of-type(1),
body > main > main.grape > .BackButton > label:nth-of-type(2){
    display: none;
}
body > main > main.grape > .ForwardButton:hover,
body > main > main.grape > .BackButton:hover {
    opacity: 100%;
}
body > main > main.grape > .ForwardButton:hover > label:nth-of-type(1),
body > main > main.grape > .BackButton:hover > label:nth-of-type(2){
    display: inline-block;
}
body > main > main.grape > section {
    width: 100%;
    padding: var(--space-padding);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-margin);
}
body > main > main.grape > section > a {
    color: var(--color-blue);
    text-decoration: none;
}
body > main > main.grape > section.TopTag {
    width: 100%;
}
body > main > main.grape > section.Information {
    flex-direction: column;
    max-width: 500px;
}
body > main > main.grape > section.Detail {
    max-width: fit-content;
    flex: 1;
    display: flex;
    flex-direction: column;
}
body > main > main.grape > section > h1 {
    font-size: 16pt;
    margin: 0;
    width: fit-content;
    text-wrap: wrap;
    word-wrap: break-word;
    text-align: center;
}
body > main > main.grape > section > img {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
}
body > main > main.grape > section.Information > .Flags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-margin);
}
body > main > main.grape > section.Information > .Flags > img {
    max-height: 50px;
    object-fit: contain;
}
body > main > main.grape > section.Information > p {
    white-space: pre-wrap;
    margin: 0;
    width: 100%;
}
body > main > main.grape > section.Information > .GeneralCharacteristics {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--space-margin);
}
body > main > main.grape > section.Information > .GeneralCharacteristics h2 {
    grid-column-start: 1;
    grid-column-end: 3;
}
body > main > main.grape > section.Information > .GeneralCharacteristics section {
    display: grid;
    grid-template-columns: subgrid;
    grid-column-start: 1;
    grid-column-end: 3;
}
body > main > main.grape > section.Information > .GeneralCharacteristics section ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1ex;
}
body > main > main.grape > section.Information > .GeneralCharacteristics section ul li {
    padding: 0;
}

body > main > main.letsdodinner {
    padding: var(--space-padding);
}
body > main > main.letsdodinner > header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-margin);
}
body > main > main.letsdodinner > header > h1 {
    margin: var(--space-margin) 0 0;
}
body > main > main.letsdodinner > header > p {
    margin: 0;
}
body > main > main.letsdodinner > form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    gap: 0;
}
body > main > main.letsdodinner > form > fieldset {
    display: flex;
    flex-direction: column;
    border: none;
    gap: var(--space-margin);
}
body > main > main.letsdodinner > form > fieldset > input,
body > main > main.letsdodinner > form > fieldset > textarea {
    border: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    border-radius: var(--space-padding);
}
body > main > main.letsdodinner > form > fieldset > button {
    border: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    border-radius: var(--space-padding);
    background-color: var(--color-orange);
    color: var(--color-white);
    cursor: pointer;
}
body > main > main.letsdodinner > form > fieldset > button:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.letsdodinner > form > fieldset > h2 {
    margin: 0;
}
body > main > main.letsdodinner > form > fieldset > input[type='file'] {
    display: none;
    max-height: 0;
}
body > main > main.letsdodinner > form > fieldset > .FileDisplay {
    border: var(--space-border) solid var(--color-orange);
    padding: 0;
    border-radius: var(--space-padding);
    display: flex;
    flex-direction: row;
    cursor: pointer;
    overflow: hidden;
}
body > main > main.letsdodinner > form > fieldset > .FileDisplay > span {
    padding: var(--space-padding);
}
body > main > main.letsdodinner > form > fieldset > .FileDisplay > span:first-of-type {
    flex: 1;
}
body > main > main.letsdodinner > form > fieldset > .FileDisplay > span:last-of-type {
    background-color: var(--color-orange);
    color: var(--color-white);
}
body > main > main.letsdodinner > form > fieldset > .FileDisplay > span:last-of-type:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.letsdodinner > form > details > summary {
    background-color: var(--color-orange);
    color: var(--color-white);
    padding: var(--space-padding);
    border-radius: var(--space-padding);
    user-select: none;
}
body > main > main.letsdodinner > form > details > main {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    gap: 0;
    border-bottom: var(--space-border) solid var(--color-orange);
}
body > main > main.letsdodinner > form > details > main fieldset {
    display: flex;
    flex-direction: column;
    border: none;
    gap: var(--space-margin);
}
body > main > main.letsdodinner > form > details > main fieldset > input {
    border: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    border-radius: var(--space-padding);
}
body > main > main.letsdodinner > form > fieldset > input[readonly] {
    border-color: var(--color-gray);
}
body > main > main.letsdodinner > form > fieldset > input[readonly]:focus-visible {
    outline: none;
}
body > main > main.letsdodinner > form > details > main fieldset > h2,
body > main > main.letsdodinner > form > details > main fieldset > h3 {
    margin: 0;
}
body > main > main.letsdodinner > form fieldset:has(input[required]:not([type='file'])) > label:after {
    content: '*';
    color: var(--color-orange);
    margin-left: 1ex;
}
body > main > main.letsdodinner > form:invalid > fieldset > button[type='submit'] {
    background-color: var(--color-gray);
    border-color: var(--color-gray);
}

body > main > main.privateevents {
    padding: var(--space-padding);
}
body > main > main.privateevents > header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-margin);
    max-width: 800px;
}
body > main > main.privateevents > header > h1 {
    margin: var(--space-margin) 0 0;
}
body > main > main.privateevents > header > p {
    margin: 0;
    width: 100%;
}
body > main > main.privateevents > form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    gap: 0;
}
body > main > main.privateevents > form > fieldset {
    display: flex;
    flex-direction: column;
    border: none;
    gap: var(--space-margin);
}
body > main > main.privateevents > form > fieldset > input,
body > main > main.privateevents > form > fieldset > textarea {
    border: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    border-radius: var(--space-padding);
}
body > main > main.privateevents > form > fieldset > button {
    border: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    border-radius: var(--space-padding);
    background-color: var(--color-orange);
    color: var(--color-white);
    cursor: pointer;
}
body > main > main.privateevents > form > fieldset > button:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.privateevents > form > fieldset > input:disabled,
body > main > main.privateevents > form > fieldset > textarea:disabled,
body > main > main.privateevents > form > fieldset > button[type='submit']:disabled,
body > main > main.privateevents > form:invalid > fieldset > button[type='submit'] {
    background-color: var(--color-gray);
    border-color: var(--color-gray);
}

body > main > main.about {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-margin);
}
body > main > main.about section {
    padding: var(--space-padding);
}
body > main > main.about section:first-of-type {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-margin);
}
body > main > main.about section:first-of-type div {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(100%, 500px);
    gap: var(--space-margin);
}
body > main > main.about section:first-of-type h1 {
    color: var(--color-blue);
    margin: 0;
}
body > main > main.about section:first-of-type p {
    margin: 0;
}
body > main > main.about section:first-of-type img {
    max-height: 300px;
    object-fit: contain;
    padding: var(--space-padding);
    background-color: var(--color-blue);
}
body > main > main.about section:last-of-type {
    display: flex;
    flex-direction: column;
    background-color: var(--color-pink);
    text-align: center;
    align-items: center;
}
body > main > main.about section:last-of-type h2 {
    margin: 0;
}
body > main > main.about section:last-of-type p {
    width: 100%;
    max-width: min(100%, 500px);
}
body > main > main.about section:last-of-type img {
    max-height: 300px;
    object-fit: contain;
    padding: var(--space-padding);
}

body > main > main.contactus {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    margin-top: var(--space-margin);
    margin-bottom: var(--space-margin);
}
body > main > main.contactus > section {
    background-color: var(--color-pink);
    display: flex;
    flex-direction: column;
    gap: var(--space-margin);
    padding: var(--space-padding);
    width: 100%;
    max-width: calc(400px - (var(--space-padding) * 2));
    border-radius: var(--space-padding);
}
body > main > main.contactus > section > h1,
body > main > main.contactus > section > h2 {
    color: var(--color-orange);
    margin: 0;
}
body > main > main.contactus > section > a {
    color: var(--color-black);
}
body > main > main.contactus > section > address {
    display: flex;
    flex-direction: column;
    gap: var(--space-margin);
}
body > main > main.contactus > section > form {
    display: flex;
    flex-direction: column;
    gap: var(--space-margin);
}
body > main > main.contactus > section > form > input,
body > main > main.contactus > section > form > textarea {
    border: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    border-radius: var(--space-padding);
}
body > main > main.contactus > section > form > button {
    border: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    border-radius: var(--space-padding);
    background-color: var(--color-orange);
    color: var(--color-white);
    cursor: pointer;
}
body > main > main.contactus > section > form > button:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.contactus > section > form > input:disabled,
body > main > main.contactus > section > form > textarea:disabled,
body > main > main.contactus > section > form > button[type='submit']:disabled,
body > main > main.contactus > section > form:invalid > button[type='submit'] {
    background-color: var(--color-gray);
    border-color: var(--color-gray);
}

body > main > main.checkout {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: start;
    margin-top: var(--space-margin);
    padding: var(--space-padding);

    counter-reset: checkout-section;
}
body > main > main.checkout > header {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: var(--space-margin);
}
body > main > main.checkout > header > h1,
body > main > main.checkout > header > p {
    margin: 0;
}
body > main > main.checkout > .NoItems {
    font-weight: bold;
}
body > main > main.checkout > form {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-margin);
}
body > main > main.checkout > form > details {
    width: 100%;
    min-width: calc(300px - (var(--space-padding) * 2));
    flex: 1;
    display: none;
}
body > main > main.checkout > form > details:has(input:not(:disabled)),
body > main > main.checkout > form > details:has(select:not(:disabled)),
body > main > main.checkout > form > details:has(textarea:not(:disabled)) {
    display: flex;
    flex-direction: column;
    counter-increment: checkout-section;
}
body > main > main.checkout > form > details > summary {
    background-color: var(--color-orange);
    color: var(--color-white);
    padding: var(--space-padding);
    user-select: none;
    list-style: none;
    position: relative;
    pointer-events: none;
}
body > main > main.checkout > form > details > summary:before {
    content: counter(checkout-section);
    background-color: var(--color-white);
    color: var(--color-orange);
    padding: var(--space-padding);
    display: inline-block;
    aspect-ratio: 1;
    height: 1ex;
    line-height: 1ex;
    text-align: center;
    border-radius: 50%;
    margin-right: var(--space-margin);
}
body > main > main.checkout > form > details > summary:after {
    content: '';
    padding: var(--space-padding);
    display: inline-block;
    aspect-ratio: 1;
    height: 1ex;
    line-height: 1ex;
    text-align: center;
    margin-right: var(--space-margin);
    transform: rotateZ(45deg);
    position: absolute;
    top: calc(50% + var(--space-padding) - 1px);
    left: var(--space-padding);
    background-color: var(--color-orange);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
body > main > main.checkout > form > details > main {
    margin-top: calc(var(--space-margin) * 2);
}
body > main > main.checkout > form > details > main > fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--space-margin);
    border: none;
}
body > main > main.checkout > form > details > main > fieldset > select,
body > main > main.checkout > form > details > main > fieldset > input,
body > main > main.checkout > form > details > main > fieldset > textarea {
    background-color: var(--color-white);
    border: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    border-radius: var(--space-padding);
}
body > main > main.checkout > form > details > main > fieldset.BillingAddressToggle {
    display: flex;
    flex-direction: row;
    padding: var(--space-padding);
    margin-top: var(--space-margin);
    user-select: none;
}
body > main > main.checkout > form > details > main > fieldset.BillingAddressToggle > input[type='checkbox'] {
    display: none;
}
body > main > main.checkout > form > details > main > fieldset.BillingAddressToggle > input[type='checkbox'] ~ label:before {
    content: '⠀';
    border: var(--space-border) solid var(--color-orange);
    margin-right: var(--space-margin);
    padding: var(--space-padding);
    color: var(--color-orange);
}
body > main > main.checkout > form > details > main > fieldset.BillingAddressToggle > input[type='checkbox']:checked ~ label:before {
    content: '✓';
}
body > main > main.checkout > form > details > main > fieldset.BillingAddressToggle > input[type='checkbox']:disabled ~ label:before {
    background-color: var(--color-gray);
}
body > main > main.checkout > form > details > main > fieldset > .honorific-prefix-hidden {
    display: none;
}

body > main > main.checkout > form > details > main > fieldset > input[type='radio'] {
    display: none;
}
body > main > main.checkout > form > details > main > fieldset > input[type='radio'] ~ label {
    border: var(--space-border) solid var(--color-orange);
    border-radius: var(--space-padding);
    padding: var(--space-padding);
    background-color: var(--color-orange);
    color: var(--color-white);
    text-align: center;
    cursor: pointer;
    user-select: none;
}
body > main > main.checkout > form > details > main > fieldset > input[type='radio'] ~ label:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.checkout > form > details > main > fieldset > input[type='radio']:checked ~ label {
    background-color: var(--color-white);
    color: var(--color-orange);
}
body > main > main.checkout > form > details > main > fieldset > input[type='radio']:disabled ~ label {
    display: none;
}
body > main > main.checkout > form > details > main > fieldset > input[type='radio'][readonly] ~ label {
    background-color: var(--color-gray);
    border-color: var(--color-gray);
    color: var(--color-white);
    pointer-events: none;
}
body > main > main.checkout > form > details > main > fieldset > input[type='radio'][readonly]:checked ~ label {
    border-color: var(--color-orange);
}

body > main > main.checkout > form > details > main > fieldset > select:-webkit-autofill,
body > main > main.checkout > form > details > main > fieldset > input:-webkit-autofill,
body > main > main.checkout > form > details > main > fieldset > textarea:-webkit-autofill {
    background-color: var(--color-white);
    -webkit-text-fill-color: var(--color-black);
    -webkit-box-shadow: 0 0 0px 1000px var(--color-white) inset;
}

body > main > main.checkout > form > details > main > fieldset > select:disabled,
body > main > main.checkout > form > details > main > fieldset > input:disabled,
body > main > main.checkout > form > details > main > fieldset > textarea:disabled,
body > main > main.checkout > form > details:has(input:invalid) ~ details > main > fieldset > select,
body > main > main.checkout > form > details:has(input:invalid) ~ details > main > fieldset > input,
body > main > main.checkout > form > details:has(input:invalid) ~ details > main > fieldset > textarea,
body > main > main.checkout > form > details:has(select:invalid) ~ details > main > fieldset > select,
body > main > main.checkout > form > details:has(select:invalid) ~ details > main > fieldset > input,
body > main > main.checkout > form > details:has(select:invalid) ~ details > main > fieldset > textarea,
body > main > main.checkout > form > details:has(textarea:invalid) ~ details > main > fieldset > select,
body > main > main.checkout > form > details:has(textarea:invalid) ~ details > main > fieldset > input,
body > main > main.checkout > form > details:has(textarea:invalid) ~ details > main > fieldset > textarea,
body > main > main.checkout > form > details > main > fieldset:has(input:invalid) ~ fieldset > select,
body > main > main.checkout > form > details > main > fieldset:has(input:invalid) ~ fieldset > input,
body > main > main.checkout > form > details > main > fieldset:has(input:invalid) ~ fieldset > textarea,
body > main > main.checkout > form > details > main > fieldset:has(select:invalid) ~ fieldset > select,
body > main > main.checkout > form > details > main > fieldset:has(select:invalid) ~ fieldset > input,
body > main > main.checkout > form > details > main > fieldset:has(select:invalid) ~ fieldset > textarea,
body > main > main.checkout > form > details > main > fieldset:has(textarea:invalid) ~ fieldset > select,
body > main > main.checkout > form > details > main > fieldset:has(textarea:invalid) ~ fieldset > input,
body > main > main.checkout > form > details > main > fieldset:has(textarea:invalid) ~ fieldset > textarea {
    background-color: var(--color-gray);
    pointer-events: none;
}
body > main > main.checkout > form > details:has(input:invalid) ~ details > main > .PaymentCollector > .CardDetails,
body > main > main.checkout > form > details:has(select:invalid) ~ details > main > .PaymentCollector > .CardDetails,
body > main > main.checkout > form > details:has(textarea:invalid) ~ details > main > .PaymentCollector > .CardDetails,
body > main > main.checkout > form > details > main > fieldset:has(input:invalid) ~ .PaymentCollector > .CardDetails,
body > main > main.checkout > form > details > main > fieldset:has(select:invalid) ~ .PaymentCollector > .CardDetails,
body > main > main.checkout > form > details > main > fieldset:has(textarea:invalid) ~ .PaymentCollector > .CardDetails {
    display: none;
}
body > main > main.checkout > form > details > main > fieldset > input:user-invalid,
body > main > main.checkout > form > details > main > fieldset > textarea:user-invalid,
body > main > main.checkout > form > details > main > fieldset > select:user-invalid {
    background-color: lightcoral;
}
body > main > main.checkout > form > details > main > .ProductList > .Product:hover {
    box-shadow: none;
}
body > main > main.checkout > form > details > main > .ProductList > .Product > aside {
    grid-template-rows: auto;
    grid-row-start: 3;
}
body > main > main.checkout > form > details > main > .ProductList > .Product > aside > button:nth-of-type(1)  {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}
body > main > main.checkout > form > details > main > .ProductList > .Product:has(aside > label:nth-of-type(1) > span:empty) {
    display: none;
}
body > main > main.checkout > form > details > main > fieldset > .DiscountCodeInput,
body > main > main.checkout > form > details > main > fieldset > .GiftCardCodeInput {
    display: flex;
    flex-direction: row;
}
body > main > main.checkout > form > details > main > fieldset > .DiscountCodeInput > input,
body > main > main.checkout > form > details > main > fieldset > .GiftCardCodeInput > input {
    background-color: var(--color-white);
    border: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    border-top-left-radius: var(--space-padding);
    border-bottom-left-radius: var(--space-padding);
    flex: 1;
}
body > main > main.checkout > form > details > main > fieldset > .GiftCardCodeInput > input:read-only,
body > main > main.checkout > form > details > main > fieldset > .DiscountCodeInput > input:read-only {
    background-color: var(--color-gray);
    border-color: var(--color-gray);
    pointer-events: none;
}
body > main > main.checkout > form > details > main > fieldset > .GiftCardCodeInput > button,
body > main > main.checkout > form > details > main > fieldset > .DiscountCodeInput > button {
    background-color: var(--color-orange);
    color: var(--color-white);
    border: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    border-top-right-radius: var(--space-padding);
    border-bottom-right-radius: var(--space-padding);
    cursor: pointer;
}
body > main > main.checkout > form > details > main > fieldset > .DiscountCodeInput > button:hover,
body > main > main.checkout > form > details > main > fieldset > .GiftCardCodeInput > button:hover {
    border-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.checkout > form > details > main > fieldset > .DiscountCodeInput > button:disabled,
body > main > main.checkout > form > details > main > fieldset > .GiftCardCodeInput > button:disabled {
    border-color: var(--color-gray);
    background-color: var(--color-gray);
}
body > main > main.checkout > form > details > main > fieldset > .DiscountCodeInput > input:placeholder-shown ~ button,
body > main > main.checkout > form > details > main > fieldset > .GiftCardCodeInput > input:placeholder-shown ~ button {
    border-color: var(--color-gray);
    background-color: var(--color-gray);
    pointer-events: none;
}
body > main > main.checkout > form > details > main > fieldset > .PointsInput {
    display: flex;
    align-items: center;
    gap: var(--space-margin);
}
body > main > main.checkout > form > details > main > fieldset > .PointsInput > input[type='range'] {
    flex: 1;
    border: none;
    height: 33pt;
    outline: none;
    background-color: transparent;
    margin-right: 5px;
    -webkit-appearance: none;
}
body > main > main.checkout > form > details > main > fieldset > .PointsInput > input[type='range'] {
    flex: 1;
    border: none;
    height: 33pt;
    outline: none;
    background-color: transparent;
    margin-right: 5px;
    -webkit-appearance: none;
}
body > main > main.checkout > form > details > main > fieldset > .PointsInput > input[type='range']::-webkit-slider-runnable-track {
    background: var(--color-white);
    border: var(--space-border) solid var(--color-orange);
    border-radius: 25px;
}
body > main > main.checkout > form > details > main > fieldset > .PointsInput > input[type='range']::-moz-range-track {
    height: 25px;
    background: var(--color-white);
    border: var(--space-border) solid var(--color-orange);
    border-radius: 25px;
}
body > main > main.checkout > form > details > main > fieldset > .PointsInput > input[type='range']::-webkit-slider-thumb {
    height: 25px;
    width: 25px;
    background: var(--color-orange);
    -webkit-appearance: none;
    border-radius: 50%;
}
body > main > main.checkout > form > details > main > fieldset > .PointsInput > input[type='range']::-moz-range-thumb {
    height: 25px;
    width: 25px;
    background: var(--color-orange);
    -webkit-appearance: none;
    border-radius: 50%;
    border: none;
}
body > main > main.checkout > form > details > main > fieldset > .GiftCardList {
    display: flex;
    flex-direction: column;
    gap: var(--space-margin);
}
body > main > main.checkout > form > details > main > fieldset > .GiftCardList > .GiftCard {
    border: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    display: flex;
    flex-direction: column;
    gap: var(--space-margin);
    text-align: center;
}
body > main > main.checkout > form > details > main > fieldset > .GiftCardList > .GiftCard > button {
    background-color: var(--color-orange);
    padding: var(--space-padding);
    border: var(--space-border) solid var(--color-orange);
    color: var(--color-white);
    cursor: pointer;
}
body > main > main.checkout > form > details > main > fieldset > .GiftCardList > .GiftCard > button:hover {
    border-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.checkout > form > details > main > .Breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-margin);
    width: 100%;
}
body > main > main.checkout > form > details > main > .Breakdown > label {
    text-align: right;
}
body > main > main.checkout > form > details > main > .Breakdown > input {
    padding: 0;
    border: none;
    background-color: var(--color-white) !important;
    appearance: textfield;
    border-radius: 0;
    width: fit-content;
}
body > main > main.checkout > form > details > main > .PaymentCollector {
    display: flex;
    flex-direction: column;
    gap: var(--space-margin);
}
body > main > main.checkout > form > details > main > .PaymentCollector > button {
    background-color: var(--color-orange);
    padding: var(--space-padding);
    border: var(--space-border) solid var(--color-orange);
    color: var(--color-white);
    cursor: pointer;
    width: 100%;
}
body > main > main.checkout > form > details > main > .PaymentCollector > input[type='checkbox'],
body > main > main.checkout > form > details > main > .PaymentCollector > input[type='radio'] {
    display: none;
}
body > main > main.checkout > form:invalid .PaymentCollector > button {
    background-color: var(--color-gray);
    border-color: var(--color-gray);
}
body > main > main.checkout > form > details > main > .PaymentCollector > .CardDetails {
    border: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    text-align: center;
}
body > main > main.checkout > form > details > main > .PaymentCollector > .CardDetails.StripeElement {
    border: none;
}
body > main > main.checkout > form > details > main > .PaymentCollector > .CardDetails > span {
    white-space: pre-wrap;
}

body > main > main.checkingpayment {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: start;
    margin-top: var(--space-margin);
    padding: var(--space-padding);
    text-align: center;
    white-space: pre-wrap;
}

body > main > main.login {
    padding: calc(var(--space-padding) * 2);
}
body > main > main.login form {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: var(--space-padding);
    width: 100%;
    max-width: 500px;
}
body > main > main.login form fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: var(--space-padding);
}
body > main > main.login form fieldset input {
    padding: var(--space-padding);
    border: var(--space-border) solid var(--color-orange);
    border-radius: var(--space-padding);
}
body > main > main.login form fieldset input:disabled {
    background-color: var(--color-gray);
}
body > main > main.login form output {
    background-color: var(--color-pink);
    border: var(--space-border) solid var(--color-pink);
    padding: var(--space-padding);
    text-align: center;
}
body > main > main.login form output:empty {
    display: none;
}
body > main > main.login form span {
    text-align: center;
}
body > main > main.login form a {
    color: var(--color-orange);
    text-decoration: underline;
    text-align: center;
}
body > main > main.login form .SignUpButton,
body > main > main.login form button {
    border: none;
    padding: var(--space-padding);
    background-color: var(--color-orange);
    border-radius: var(--space-padding);
    color: var(--color-white);
    cursor: pointer;
    text-decoration: none;
}
body > main > main.login form .SignUpButton:hover,
body > main > main.login form button:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.login form:invalid button {
    background-color: var(--color-gray);
    pointer-events: none;
}

body > main > main.register {
    padding: calc(var(--space-padding) * 2);
}
body > main > main.register form {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: var(--space-padding);
    width: 100%;
    max-width: 500px;
}
body > main > main.register form fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: var(--space-padding);
}
body > main > main.register form fieldset select,
body > main > main.register form fieldset input {
    padding: var(--space-padding);
    border: var(--space-border) solid var(--color-orange);
    background-color: var(--color-white);
    border-radius: var(--space-padding);
}
body > main > main.register form fieldset input:disabled {
    background-color: var(--color-gray);
}
body > main > main.register form fieldset input:user-invalid,
body > main > main.register form fieldset textarea:user-invalid,
body > main > main.register form fieldset select:user-invalid {
    background-color: lightcoral;
}
body > main > main.register form fieldset input[type='checkbox'] {
    display: none;
}
body > main > main.register form fieldset:has(input[type='checkbox']) label {
    padding-top: var(--space-padding);
    padding-bottom: var(--space-padding);
    user-select: none;
}
body > main > main.register form fieldset:has(input[type='checkbox']) label:after {
    content: '⠀';
    padding: var(--space-padding);
    margin-left: var(--space-margin);
    border: var(--space-border) solid var(--color-orange);
    background-color: var(--color-white);
}
body > main > main.register form fieldset:has(input[type='checkbox']:checked) label:after {
    content: '✓';
}
body > main > main.register form fieldset a {
    color: var(--color-orange);
}
body > main > main.register form output {
    background-color: var(--color-pink);
    border: var(--space-border) solid var(--color-pink);
    padding: var(--space-padding);
    text-align: left;
    white-space: pre-wrap;
}
body > main > main.register form output:empty {
    display: none;
}
body > main > main.register form button {
    border: none;
    padding: var(--space-padding);
    background-color: var(--color-orange);
    border-radius: var(--space-padding);
    color: var(--color-white);
    cursor: pointer;
    text-decoration: none;
}
body > main > main.register form button:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.register form:invalid button {
    background-color: var(--color-gray);
    pointer-events: none;
}

body > main > main.resetpassword {
    padding: calc(var(--space-padding) * 2);
}
body > main > main.resetpassword form {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: var(--space-padding);
    width: 100%;
    max-width: 500px;
}
body > main > main.resetpassword form fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: var(--space-padding);
}
body > main > main.resetpassword form fieldset select,
body > main > main.resetpassword form fieldset input {
    padding: var(--space-padding);
    border: var(--space-border) solid var(--color-orange);
    background-color: var(--color-white);
    border-radius: var(--space-padding);
}
body > main > main.resetpassword form fieldset input:disabled {
    background-color: var(--color-gray);
}
body > main > main.resetpassword form fieldset input:user-invalid,
body > main > main.resetpassword form fieldset textarea:user-invalid,
body > main > main.resetpassword form fieldset select:user-invalid {
    background-color: lightcoral;
}
body > main > main.resetpassword form fieldset input[type='checkbox'] {
    display: none;
}
body > main > main.resetpassword form fieldset:has(input[type='checkbox']) label {
    padding-top: var(--space-padding);
    padding-bottom: var(--space-padding);
    user-select: none;
}
body > main > main.resetpassword form fieldset:has(input[type='checkbox']) label:after {
    content: '⠀';
    padding: var(--space-padding);
    margin-left: var(--space-margin);
    border: var(--space-border) solid var(--color-orange);
    background-color: var(--color-white);
}
body > main > main.resetpassword form fieldset:has(input[type='checkbox']:checked) label:after {
    content: '✓';
}
body > main > main.resetpassword form fieldset a {
    color: var(--color-orange);
}
body > main > main.resetpassword form output {
    background-color: var(--color-pink);
    border: var(--space-border) solid var(--color-pink);
    padding: var(--space-padding);
    text-align: left;
    white-space: pre-wrap;
}
body > main > main.resetpassword form output:empty {
    display: none;
}
body > main > main.resetpassword form button {
    border: none;
    padding: var(--space-padding);
    background-color: var(--color-orange);
    border-radius: var(--space-padding);
    color: var(--color-white);
    cursor: pointer;
    text-decoration: none;
}
body > main > main.resetpassword form button:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.resetpassword form:invalid button {
    background-color: var(--color-gray);
    pointer-events: none;
}

body > main > main.resetpasswordwithcode {
    padding: calc(var(--space-padding) * 2);
}
body > main > main.resetpasswordwithcode form {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: var(--space-padding);
    width: 100%;
    max-width: 500px;
}
body > main > main.resetpasswordwithcode form fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: var(--space-padding);
}
body > main > main.resetpasswordwithcode form fieldset select,
body > main > main.resetpasswordwithcode form fieldset input {
    padding: var(--space-padding);
    border: var(--space-border) solid var(--color-orange);
    background-color: var(--color-white);
    border-radius: var(--space-padding);
}
body > main > main.resetpasswordwithcode form fieldset input:disabled {
    background-color: var(--color-gray);
}
body > main > main.resetpasswordwithcode form fieldset input:user-invalid,
body > main > main.resetpasswordwithcode form fieldset textarea:user-invalid,
body > main > main.resetpasswordwithcode form fieldset select:user-invalid {
    background-color: lightcoral;
}
body > main > main.resetpasswordwithcode form fieldset input[type='checkbox'] {
    display: none;
}
body > main > main.resetpasswordwithcode form fieldset:has(input[type='checkbox']) label {
    padding-top: var(--space-padding);
    padding-bottom: var(--space-padding);
    user-select: none;
}
body > main > main.resetpasswordwithcode form fieldset:has(input[type='checkbox']) label:after {
    content: '⠀';
    padding: var(--space-padding);
    margin-left: var(--space-margin);
    border: var(--space-border) solid var(--color-orange);
    background-color: var(--color-white);
}
body > main > main.resetpasswordwithcode form fieldset:has(input[type='checkbox']:checked) label:after {
    content: '✓';
}
body > main > main.resetpasswordwithcode form fieldset a {
    color: var(--color-orange);
}
body > main > main.resetpasswordwithcode form output {
    background-color: var(--color-pink);
    border: var(--space-border) solid var(--color-pink);
    padding: var(--space-padding);
    text-align: left;
    white-space: pre-wrap;
}
body > main > main.resetpasswordwithcode form output:empty {
    display: none;
}
body > main > main.resetpasswordwithcode form button {
    border: none;
    padding: var(--space-padding);
    background-color: var(--color-orange);
    border-radius: var(--space-padding);
    color: var(--color-white);
    cursor: pointer;
    text-decoration: none;
}
body > main > main.resetpasswordwithcode form button:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.resetpasswordwithcode form:invalid button {
    background-color: var(--color-gray);
    pointer-events: none;
}

body > main > main.resetpasswordemailsent {
    padding: calc(var(--space-padding) * 2);
    text-align: center;
    justify-content: start;
}

body > main > main.profile {
    padding: calc(var(--space-padding) * 2);
    justify-content: center;
    align-items: start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
body > main > main.profile section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-margin);
    min-width: calc(500px - (var(--space-padding) * 4));
}
body > main > main.profile section:first-of-type {
    max-width: min(350px, 100%);
    flex: 1;
}
body > main > main.profile h2 {
    margin: 0;
}
body > main > main.profile img {
    max-width: 300px;
}
body > main > main.profile .ReferralLinkButton {
    border: none;
    padding: var(--space-padding);
    background-color: var(--color-orange);
    border-radius: var(--space-padding);
    color: var(--color-white);
    cursor: pointer;
    text-decoration: none;
}
body > main > main.profile .ReferralLinkButton:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.profile details {
    width: 100%;
}
body > main > main.profile details summary {
    background-color: var(--color-orange);
    color: var(--color-white);
    padding: var(--space-padding);
    list-style: none;
    display: flex;
    user-select: none;
}
body > main > main.profile details summary span {
    flex: 1;
}
body > main > main.profile details summary:after {
    content: '⮟';
}
body > main > main.profile details[open] summary:after {
    content: '⮞';
}
body > main > main.profile details main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-margin);
    margin-top: var(--space-margin);
    padding-left: var(--space-padding);
    padding-right: var(--space-padding);
}
body > main > main.profile form {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: var(--space-padding);
    width: 100%;
    max-width: 500px;
}
body > main > main.profile form fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: var(--space-padding);
}
body > main > main.profile form fieldset select,
body > main > main.profile form fieldset input {
    padding: var(--space-padding);
    border: var(--space-border) solid var(--color-orange);
    background-color: var(--color-white);
    border-radius: var(--space-padding);
}
body > main > main.profile form fieldset input:disabled {
    background-color: var(--color-gray);
}
body > main > main.profile form fieldset input:user-invalid,
body > main > main.profile form fieldset textarea:user-invalid,
body > main > main.profile form fieldset select:user-invalid {
    background-color: lightcoral;
}
body > main > main.profile form fieldset input[type='checkbox'] {
    display: none;
}
body > main > main.profile form fieldset:has(input[type='checkbox']) label {
    padding-top: var(--space-padding);
    padding-bottom: var(--space-padding);
    user-select: none;
}
body > main > main.profile form fieldset:has(input[type='checkbox']) label:after {
    content: '⠀';
    padding: var(--space-padding);
    margin-left: var(--space-margin);
    border: var(--space-border) solid var(--color-orange);
    background-color: var(--color-white);
}
body > main > main.profile form fieldset:has(input[type='checkbox']:checked) label:after {
    content: '✓';
}
body > main > main.profile form fieldset a {
    color: var(--color-orange);
}
body > main > main.profile form output {
    background-color: var(--color-pink);
    border: var(--space-border) solid var(--color-pink);
    padding: var(--space-padding);
    text-align: left;
    white-space: pre-wrap;
}
body > main > main.profile form output:empty {
    display: none;
}
body > main > main.profile form button {
    border: none;
    padding: var(--space-padding);
    background-color: var(--color-orange);
    border-radius: var(--space-padding);
    color: var(--color-white);
    cursor: pointer;
    text-decoration: none;
}
body > main > main.profile form button:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.profile form:invalid button {
    background-color: var(--color-gray);
    pointer-events: none;
}
body > main > main.profile .MyOrders {
    width: 100%;
}
body > main > main.profile .MyOrders .Filter,
body > main > main.profile .MyOrders .Toggle {
    max-width: 250px;
    min-width: 250px;
    position: relative;
}
body > main > main.profile .MyOrders .Filter ul {
    position: absolute;
    top: calc(var(--space-padding) * 2);
    width: 250px;
    background-color: var(--color-orange);
    list-style: none;
    padding: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    max-height: 400px;
    overflow-y: scroll;
}
body > main > main.profile .MyOrders .Filter ul li {
    color: var(--color-white);
}
body > main > main.profile .MyOrders .Filter ul li input[type='checkbox'] {
    display: none;
}
body > main > main.profile .MyOrders .Filter ul li label {
    display: block;
    text-align: center;
    padding: var(--space-padding);
    cursor: pointer;
}
body > main > main.profile .MyOrders .Filter ul li input[type='checkbox']:checked ~ label,
body > main > main.profile .MyOrders .Filter ul li label:hover {
    color: gold;
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.profile .MyOrders .Filter ul li label span.Half {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
body > main > main.profile .MyOrders .Filter ul li label span.OtherHalf {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
    margin-left: -2.6ex;
}

body > main > main.profile .MyOrders .Toggle {
    display: flex;
    flex-direction: row;
}
body > main > main.profile .MyOrders .Toggle label {
    padding: var(--space-padding);
    flex: 1;
    text-align: center;
    background-color: var(--color-orange);
    color: var(--color-white);
    border-top: var(--space-border) solid var(--color-orange);
    border-bottom: var(--space-border) solid var(--color-orange);
}
body > main > main.profile .MyOrders .Toggle label[for='MyOrderSalesDisplay'] {
    border-left: var(--space-border) solid var(--color-orange);
    border-top-left-radius: calc(var(--space-border) * 10);
    border-bottom-left-radius: calc(var(--space-border) * 10);
}
body > main > main.profile .MyOrders .Toggle label[for='MyOrderProductDisplay'] {
    border-right: var(--space-border) solid var(--color-orange);
    border-top-right-radius: calc(var(--space-border) * 10);
    border-bottom-right-radius: calc(var(--space-border) * 10);
}
body > main > main.profile .MyOrders .Toggle #MyOrderSalesDisplay:checked ~ label[for='MyOrderSalesDisplay'],
body > main > main.profile .MyOrders .Toggle #MyOrderProductDisplay:checked ~ label[for='MyOrderProductDisplay'] {
    background-color: var(--color-white);
    color: var(--color-black);
}
body > main > main.profile .MyOrders .Toggle input[type='radio'] {
    display: none;
}

body > main > main.profile .MyOrders div[data-target="Sales"] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-margin);
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale {
    width: 100%;
    display: none;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .TableScroller {
    width: 100%;
    overflow-x: scroll;
    border-left: var(--space-border) solid var(--color-orange);
    border-right: var(--space-border) solid var(--color-orange);
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .TableScroller table {
    border-collapse: collapse;
    width: 100%;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .TableScroller table thead tr th,
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .TableScroller table tbody tr td {
    border-left: var(--space-border) solid var(--color-orange);
    border-right: var(--space-border) solid var(--color-orange);
    border-bottom: var(--space-border) solid var(--color-orange);
    text-wrap: nowrap;
    padding: var(--space-padding);
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .TableScroller table thead tr th:first-of-type,
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .TableScroller table tbody tr td:first-of-type {
    border-left: none;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .TableScroller table thead tr th:last-of-type,
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .TableScroller table tbody tr td:last-of-type {
    border-right: none;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList {
    display: flex;
    flex-direction: column;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    min-width: 100%;
    width: 100%;
    display: none;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product:hover {
    box-shadow: none;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section {
    display: flex;
    flex-direction: column;
    width: fit-content;
    min-width: 250px;
    max-width: 100%;
    overflow: hidden;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section a img {
    width: 150px;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating {
    --dir: right;
    --fill: var(--color-orange);
    --fillbg: lightgray;
    --star: url('/images/star.svg');
    --stars: 5;
    --starsize: 3rem;
    --symbol: var(--star);
    --value: 1;
    --w: calc(var(--stars) * var(--starsize));

    position: relative;
    width: fit-content;
    overflow: hidden;
    padding-left: 1.5rem;
    margin-left: -1.5rem;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating label {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5rem;
    height: 100%;
    user-select: none;
    opacity: 0;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating label:nth-of-type(2) {
    left: 1.5rem;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating label:nth-of-type(3) {
    left: 3rem;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating label:nth-of-type(4) {
    left: 4.5rem;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating label:nth-of-type(5) {
    left: 6rem;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating label:nth-of-type(6) {
    left: 7.5rem;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating label:nth-of-type(7) {
    left: 9rem;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating label:nth-of-type(8) {
    left: 10.5rem;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating label:nth-of-type(9) {
    left: 12rem;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating label:nth-of-type(10) {
    left: 13.5rem;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating label:nth-of-type(11) {
    left: 15rem;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating input[type='range'] {
    block-size: var(--starsize);
    inline-size: var(--w);
    position: relative;
    -webkit-appearance: none;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating input[type='range']::-moz-range-track {
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
    background: var(--fillbg);
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating input[type='range']::-moz-range-thumb {
    height: var(--starsize);
    width: var(--starsize);
    opacity: 0;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating input[type='range']::-moz-range-progress {
    background: var(--fill);
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--star);
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating input[type='range']::-webkit-slider-runnable-track {
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
    -webkit-mask: repeat left center/var(--starsize) var(--symbol);
    background: var(--fillbg);
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main .StarRating input[type='range']::-webkit-slider-thumb {
    height: var(--starsize);
    -webkit-appearance: none;
    box-shadow: calc(0rem - var(--w)) 0 0 var(--w) var(--fill);
    opacity: 1;
    width: 1px;
}

body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section textarea {
    width: calc(100% - (var(--space-padding) * 4));
    border: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    resize: none;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section textarea:disabled {
    background-color: lightgray;
    border-color: lightgray;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main button {
    background-color: var(--color-orange);
    color: var(--color-white);
    border: none;
    padding: var(--space-padding);
    cursor: pointer;
    border-radius: var(--space-margin);
    width: 100%;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section main button:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}

body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside {
    display: grid;
    grid-template-columns: auto auto auto;
    text-align: center;
    width: 100%;
    gap: var(--space-margin);
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside > button,
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside > a {
    background-color: var(--color-orange);
    color: var(--color-white);
    border: none;
    padding: var(--space-padding);
    cursor: pointer;
    border-radius: var(--space-margin);
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside > button:hover,
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside > a:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside > button:nth-of-type(1) {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside > button:nth-of-type(2) {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside > label:nth-of-type(1) {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside > button:nth-of-type(3) {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside > a:nth-of-type(1) {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    text-align: center;
    text-decoration: none;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside:has(> label:nth-of-type(1) > span:empty) > button:nth-of-type(2),
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside:has(> label:nth-of-type(1) > span:empty) > label:nth-of-type(1),
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside:has(> label:nth-of-type(1) > span:empty) > button:nth-of-type(3),
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside:has(> label:nth-of-type(1) > span:empty) > a:nth-of-type(1) {
    display: none;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside:has(> label:nth-of-type(1) > span:empty) > a:nth-of-type(1) {
    display: none;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section aside > button:disabled {
    background-color: var(--color-gray);
}

body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section .SaleDetail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: left;
    padding: 0;
    align-items: start;
}
body > main > main.profile .MyOrders div[data-target="Sales"] .Sale .ProductList .Product section article {
    text-align: left;
    white-space: pre-wrap;
    text-wrap: wrap;
    width: 100%;
}

body > main > main.profile .MyOrders div[data-target="Products"] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-margin) * 2);
}

body > main > main.profile .MyOrders div[data-target="Products"] .Product {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    min-width: 100%;
    width: 100%;
    display: none;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product:hover {
    box-shadow: none;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section {
    display: flex;
    flex-direction: column;
    width: fit-content;;
    min-width: 250px;
    max-width: 100%;
    overflow: hidden;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section a img {
    width: 150px;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: var(--space-margin);
}

body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating {
    --dir: right;
    --fill: var(--color-orange);
    --fillbg: lightgray;
    --star: url('/images/star.svg');
    --stars: 5;
    --starsize: 3rem;
    --symbol: var(--star);
    --value: 1;
    --w: calc(var(--stars) * var(--starsize));

    position: relative;
    width: fit-content;
    overflow: hidden;
    padding-left: 1.5rem;
    margin-left: -1.5rem;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating label {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5rem;
    height: 100%;
    user-select: none;
    opacity: 0;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating label:nth-of-type(2) {
    left: 1.5rem;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating label:nth-of-type(3) {
    left: 3rem;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating label:nth-of-type(4) {
    left: 4.5rem;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating label:nth-of-type(5) {
    left: 6rem;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating label:nth-of-type(6) {
    left: 7.5rem;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating label:nth-of-type(7) {
    left: 9rem;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating label:nth-of-type(8) {
    left: 10.5rem;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating label:nth-of-type(9) {
    left: 12rem;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating label:nth-of-type(10) {
    left: 13.5rem;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating label:nth-of-type(11) {
    left: 15rem;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating input[type='range'] {
    block-size: var(--starsize);
    inline-size: var(--w);
    position: relative;
    -webkit-appearance: none;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating input[type='range']::-moz-range-track {
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
    background: var(--fillbg);
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating input[type='range']::-moz-range-thumb {
    height: var(--starsize);
    width: var(--starsize);
    opacity: 0;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating input[type='range']::-moz-range-progress {
    background: var(--fill);
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--star);
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating input[type='range']::-webkit-slider-runnable-track {
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
    -webkit-mask: repeat left center/var(--starsize) var(--symbol);
    background: var(--fillbg);
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main .StarRating input[type='range']::-webkit-slider-thumb {
    height: var(--starsize);
    -webkit-appearance: none;
    box-shadow: calc(0rem - var(--w)) 0 0 var(--w) var(--fill);
    opacity: 1;
    width: 1px;
}

body > main > main.profile .MyOrders div[data-target="Products"] .Product section textarea {
    width: calc(100% - (var(--space-padding) * 4));
    border: var(--space-border) solid var(--color-orange);
    padding: var(--space-padding);
    resize: none;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section textarea:disabled {
    background-color: lightgray;
    border-color: lightgray;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main button {
    background-color: var(--color-orange);
    color: var(--color-white);
    border: none;
    padding: var(--space-padding);
    cursor: pointer;
    border-radius: var(--space-margin);
    width: 100%;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section main button:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}

body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside {
    display: grid;
    grid-template-columns: auto auto auto;
    text-align: center;
    width: 100%;
    gap: var(--space-margin);
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside > button,
body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside > a {
    background-color: var(--color-orange);
    color: var(--color-white);
    border: none;
    padding: var(--space-padding);
    cursor: pointer;
    border-radius: var(--space-margin);
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside > button:hover,
body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside > a:hover {
    background-color: color-mix(in hsl, var(--color-orange), var(--color-black) 10%);
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside > button:nth-of-type(1) {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside > button:nth-of-type(2) {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside > label:nth-of-type(1) {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside > button:nth-of-type(3) {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside > a:nth-of-type(1) {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    text-align: center;
    text-decoration: none;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside:has(> label:nth-of-type(1) > span:empty) > button:nth-of-type(2),
body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside:has(> label:nth-of-type(1) > span:empty) > label:nth-of-type(1),
body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside:has(> label:nth-of-type(1) > span:empty) > button:nth-of-type(3),
body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside:has(> label:nth-of-type(1) > span:empty) > a:nth-of-type(1) {
    display: none;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside:has(> label:nth-of-type(1) > span:empty) > a:nth-of-type(1) {
    display: none;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section aside > button:disabled {
    background-color: var(--color-gray);
}

body > main > main.profile .MyOrders div[data-target="Products"] .Product section .SaleDetail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: left;
    padding: 0;
    align-items: start;
}
body > main > main.profile .MyOrders div[data-target="Products"] .Product section article {
    text-align: left;
    white-space: pre-wrap;
    text-wrap: wrap;
    width: 100%;
}

body > main > main.profile .MyOrders:has(.Toggle #MyOrderSalesDisplay:checked) div[data-target="Products"],
body > main > main.profile .MyOrders:has(.Toggle #MyOrderProductDisplay:checked) div[data-target="Sales"] {
    display: none;
}

body > main > main.profile .MyOrders:not(:has(.Filter ul li input[type='checkbox']:checked)) div[data-target="Sales"] .Sale,
body > main > main.profile .MyOrders:not(:has(.Filter ul li input[type='checkbox']:checked)) div[data-target="Sales"] .Sale .ProductList .Product,
body > main > main.profile .MyOrders:not(:has(.Filter ul li input[type='checkbox']:checked)) div[data-target="Products"] .Product {
    display: flex;
    flex-direction: column;
}
body > main > main.profile .MyOrders:not(:has(.Filter ul li input[type='checkbox']:checked)) div[data-target="Products"] .Product,
body > main > main.profile .MyOrders:not(:has(.Filter ul li input[type='checkbox']:checked)) div[data-target="Sales"] .Sale .ProductList .Product {
    flex-direction: row;
}

body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='5']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='5']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='5']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='5']) .ProductList .Product:has(section main .StarRating input[type='range'][value='5']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='5']:checked) div[data-target="Products"] .Product:has(section main .StarRating input[type='range'][value='5']) {
    display: flex;
}

body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='4.5']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='4.5']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='4.5']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='4.5']) .ProductList .Product:has(section main .StarRating input[type='range'][value='4.5']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='4.5']:checked) div[data-target="Products"] .Product:has(section main .StarRating input[type='range'][value='4.5']) {
    display: flex;
}

body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='4']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='4']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='4']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='4']) .ProductList .Product:has(section main .StarRating input[type='range'][value='4']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='4']:checked) div[data-target="Products"] .Product:has(section main .StarRating input[type='range'][value='4']) {
    display: flex;
}

body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='3.5']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='3.5']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='3.5']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='3.5']) .ProductList .Product:has(section main .StarRating input[type='range'][value='3.5']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='3.5']:checked) div[data-target="Products"] .Product:has(section main .StarRating input[type='range'][value='3.5']) {
    display: flex;
}

body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='3']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='3']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='3']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='3']) .ProductList .Product:has(section main .StarRating input[type='range'][value='3']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='3']:checked) div[data-target="Products"] .Product:has(section main .StarRating input[type='range'][value='3']) {
    display: flex;
}

body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='2.5']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='2.5']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='2.5']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='2.5']) .ProductList .Product:has(section main .StarRating input[type='range'][value='2.5']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='2.5']:checked) div[data-target="Products"] .Product:has(section main .StarRating input[type='range'][value='2.5']) {
    display: flex;
}

body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='2']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='2']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='2']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='2']) .ProductList .Product:has(section main .StarRating input[type='range'][value='2']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='2']:checked) div[data-target="Products"] .Product:has(section main .StarRating input[type='range'][value='2']) {
    display: flex;
}
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='1.5']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='1.5']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='1.5']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='1.5']) .ProductList .Product:has(section main .StarRating input[type='range'][value='1.5']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='1.5']:checked) div[data-target="Products"] .Product:has(section main .StarRating input[type='range'][value='1.5']) {
    display: flex;
}

body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='1']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='1']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='1']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='1']) .ProductList .Product:has(section main .StarRating input[type='range'][value='1']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='1']:checked) div[data-target="Products"] .Product:has(section main .StarRating input[type='range'][value='1']) {
    display: flex;
}

body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='0.5']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='0.5']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='0.5']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='0.5']) .ProductList .Product:has(section main .StarRating input[type='range'][value='0.5']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='0.5']:checked) div[data-target="Products"] .Product:has(section main .StarRating input[type='range'][value='0.5']) {
    display: flex;
}

body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='0']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='0']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='0']:checked) div[data-target="Sales"] .Sale:has(.ProductList .Product section main .StarRating input[type='range'][value='0']) .ProductList .Product:has(section main .StarRating input[type='range'][value='0']),
body > main > main.profile .MyOrders:has(.Filter ul li input[type='checkbox'][value='0']:checked) div[data-target="Products"] .Product:has(section main .StarRating input[type='range'][value='0']) {
    display: flex;
}

body > main > main.termsandconditions {
    display: flex;
    flex-direction: column;
    padding: var(--space-padding);
}
body > main > main.termsandconditions h1,
body > main > main.termsandconditions a,
body > main > main.termsandconditions .highlight {
    color: var(--color-orange);
}