:root:not([data-theme=dark]),[data-theme=light] {
    --pico-demo-border-gradient-colors: transparent 33%,#e9cbe8,#ddcef4,#d0d3f2,#cbd4f5;
    --pico-card-box-shadow: var(--pico-box-shadow);
    --pico-card-component-outline-width: .0625rem;
    --pico-card-component-outline-color: transparent;
    --pico-mark-gradient: linear-gradient(to right, #84266d, #6f3985, #5d409a, #43489d);
    --pico-stats-color: #2a628a;
    --pico-features-icon-color: #934daf;
    --pico-comparison-gradient-valid: linear-gradient(var(--pico-comparison-gradient-direction, to bottom), #7bb2c6, #5aa6a4, #649b66);
    --pico-comparison-gradient-invalid: linear-gradient(var(--pico-comparison-gradient-direction, to bottom), #d0a164, #cf7e6d, #d46c63);
    --pico-badge-html-background-color: rgba(168, 52, 16, .125);
    --pico-badge-html-color: #a83410;
    --pico-badge-react-background-color: rgba(35, 114, 143, .125);
    --pico-badge-react-color: #23728f;
    --pico-badge-sass-background-color: rgba(150, 45, 124, .125);
    --pico-badge-sass-color: #962d7c;
    --pico-badge-javascript-background-color: rgba(130, 84, 0, .125);
    --pico-badge-javascript-color: #825400;
    --pico-badge-css-background-color: rgba(29, 89, 208, .125);
    --pico-badge-css-color: #1d59d0
}

@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --pico-demo-border-gradient-colors:transparent 33%,#4a1544,#3b2156,#2d2565,#1a2b6b;
        --pico-card-box-shadow: none;
        --pico-card-background-color: #161922;
        --pico-card-component-outline-width: .0625rem;
        --pico-card-component-outline-color: #1c212c;
        --pico-card-border-color: var(--pico-card-component-outline-color);
        --pico-mark-gradient: linear-gradient(to right, #d78dd2, #b999ee, #9da5e9, #8fa9f0);
        --pico-stats-color: #79b0e3;
        --pico-features-icon-color: #b999ee;
        --pico-comparison-gradient-valid: linear-gradient(var(--pico-comparison-gradient-direction, to bottom), #4f7c94, #3a7174, #3f6643);
        --pico-comparison-gradient-invalid: linear-gradient(var(--pico-comparison-gradient-direction, to bottom), #8b6e4d, #994e3f, #983734);
        --pico-badge-html-background-color: rgba(225, 150, 128, .125);
        --pico-badge-html-color: #e19680;
        --pico-badge-react-background-color: rgba(79, 168, 195, .125);
        --pico-badge-react-color: #4fa8c3;
        --pico-badge-sass-background-color: rgba(205, 152, 199, .125);
        --pico-badge-sass-color: #cd98c7;
        --pico-badge-javascript-background-color: rgba(188, 167, 100, .125);
        --pico-badge-javascript-color: #bca764;
        --pico-badge-css-background-color: rgba(156, 167, 250, .125);
        --pico-badge-css-color: #9ca7fa
    }
}

[data-theme=dark] {
    --pico-demo-border-gradient-colors: transparent 33%,#4a1544,#3b2156,#2d2565,#1a2b6b;
    --pico-card-box-shadow: none;
    --pico-card-background-color: #161922;
    --pico-card-component-outline-width: .0625rem;
    --pico-card-component-outline-color: #1c212c;
    --pico-card-border-color: var(--pico-card-component-outline-color);
    --pico-mark-gradient: linear-gradient(to right, #d78dd2, #b999ee, #9da5e9, #8fa9f0);
    --pico-stats-color: #79b0e3;
    --pico-features-icon-color: #b999ee;
    --pico-comparison-gradient-valid: linear-gradient(var(--pico-comparison-gradient-direction, to bottom), #4f7c94, #3a7174, #3f6643);
    --pico-comparison-gradient-invalid: linear-gradient(var(--pico-comparison-gradient-direction, to bottom), #8b6e4d, #994e3f, #983734);
    --pico-badge-html-background-color: rgba(225, 150, 128, .125);
    --pico-badge-html-color: #e19680;
    --pico-badge-react-background-color: rgba(79, 168, 195, .125);
    --pico-badge-react-color: #4fa8c3;
    --pico-badge-sass-background-color: rgba(205, 152, 199, .125);
    --pico-badge-sass-color: #cd98c7;
    --pico-badge-javascript-background-color: rgba(188, 167, 100, .125);
    --pico-badge-javascript-color: #bca764;
    --pico-badge-css-background-color: rgba(156, 167, 250, .125);
    --pico-badge-css-color: #9ca7fa
}



body>main {
    --pico-homepage-spacing-vertical: calc(var(--pico-spacing) * 5);
    --pico-homepage-spacing-horizontal: calc(var(--pico-spacing) * 3.5);
    padding: 0
}

article.product {
    margin-bottom: var(--pico-block-spacing-vertical);
    padding: 0 0;
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    box-shadow: var(--pico-card-box-shadow);
    display: grid;
    grid-template-rows: 1fr auto;
    overflow: hidden;
}


article.product h2 {
    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
}





article.product img {
    padding: unset;
    object-fit: fill;
    min-width: 99%;
}

article.product p {
    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
}


article.product button {
    min-width: 100%;
    margin-bottom: 0;
}

section.product-grid {
    display: grid;
    -moz-column-gap: calc(var(--pico-homepage-spacing-horizontal)/2);
    column-gap: calc(var(--pico-homepage-spacing-horizontal)/2);
    row-gap: calc(var(--pico-homepage-spacing-vertical)/2);
    margin-top: calc(var(--pico-homepage-spacing-vertical)/2)
}

@media(min-width: 800px) {
    section.product-grid {
        grid-template-columns:1fr 1fr;
        row-gap: calc(var(--pico-homepage-spacing-horizontal)/2)
    }
}

@media(min-width: 1024px) {
    section.product-grid {
        grid-template-columns:1fr 1fr 1fr;
        row-gap: calc(var(--pico-homepage-spacing-horizontal)/2)
    }
}

@media(min-width: 1536px) {
    section.product-grid {
        grid-template-columns:1fr 1fr 1fr 1fr
    }
}

@media(min-width: 1836px) {
    section.product-grid {
        grid-template-columns:1fr 1fr 1fr 1fr 1fr
    }
}

section.product-grid article {
    margin: 0;
    outline-color: var(--pico-card-component-outline-color);
    outline-style: solid;
    outline-width: var(--pico-card-component-outline-width)
}

@media(min-width: 1280px) {
    section.product-grid article {
        --pico-block-spacing-vertical:calc(var(--pico-spacing) * 1.75);
        --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.75)
    }
}

article.product>h2 {
    font-size: 1.1rem;
    line-height: 1.2;
    text-wrap: balance;
    margin-bottom: calc(var(--pico-spacing)/4)
}

.logo-dark {
    display: none;
}
.logo-light {
    display: inline-block;
}
[data-theme="dark"] .logo-dark {
    display: inline-block;
}
[data-theme="dark"] .logo-light {
    display: none;
}
[data-theme="light"] .logo-dark {
    display: none;
}
[data-theme="light"] .logo-light {
    display: inline-block;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-dark,
    html:not([data-theme="light"]) .logo-dark {
        display: inline-block;
    }
    :root:not([data-theme="light"]) .logo-light,
    html:not([data-theme="light"]) .logo-light {
        display: none;
    }
}

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--pico-background-color);
    border-bottom: 1px solid var(--pico-card-component-outline-color, rgba(0, 0, 0, 0.1));
}