@layer system,base,utilities,components,animations;@layer system.props;@layer system.props{:root{--brand-primary: light-dark(oklch(62.3% .4 342.88), oklch(73.37% .21454 342.88));--brand-secondary: light-dark(oklch(55% .15455 194.77), oklch(80.25% .12028 226.51));--palette-hue: 250;--palette-hue-rotate-by: 0;--palette-chroma: .02;--color-1: oklch( 98% calc(.03 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (0 * var(--palette-hue-rotate-by))) );--color-2: oklch( 97% calc(.06 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (1 * var(--palette-hue-rotate-by))) );--color-3: oklch( 93% calc(.1 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (2 * var(--palette-hue-rotate-by))) );--color-4: oklch( 84% calc(.12 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (3 * var(--palette-hue-rotate-by))) );--color-5: oklch( 80% calc(.16 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (4 * var(--palette-hue-rotate-by))) );--color-6: oklch( 71% calc(.19 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (5 * var(--palette-hue-rotate-by))) );--color-7: oklch( 66% calc(.2 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (6 * var(--palette-hue-rotate-by))) );--color-8: oklch( 58% calc(.21 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (7 * var(--palette-hue-rotate-by))) );--color-9: oklch( 53% calc(.2 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (8 * var(--palette-hue-rotate-by))) );--color-10: oklch( 49% calc(.19 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (9 * var(--palette-hue-rotate-by))) );--color-11: oklch( 42% calc(.17 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (10 * var(--palette-hue-rotate-by))) );--color-12: oklch( 35% calc(.15 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (11 * var(--palette-hue-rotate-by))) );--color-13: oklch( 27% calc(.12 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (12 * var(--palette-hue-rotate-by))) );--color-14: oklch( 20% calc(.09 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (13 * var(--palette-hue-rotate-by))) );--color-15: oklch( 16% calc(.07 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (14 * var(--palette-hue-rotate-by))) );--color-16: oklch( 10% calc(.05 * var(--palette-chroma, 1)) calc(var(--palette-hue) + (15 * var(--palette-hue-rotate-by))) );--surface-1: light-dark(var(--color-0), var(--color-11));--surface-2: light-dark(var(--color-1), var(--color-12));--surface-3: light-dark(var(--color-3), var(--color-13));--surface-document: light-dark(white, var(--color-14));--text-1: light-dark(var(--color-16), var(--color-1));--text-2: light-dark(var(--color-12), var(--color-5))}}@layer system.props{:root{--body-rails: 4rem;--sidebar-width: 12rem;--brand-border_radius: .25rem;--shadow-color-1: hsl(0 0% 0% / .3);--shadow-color-2: hsl(0 0% 0% / .15);--depth-5: 0 4px 4px 0 var(--shadow-color-1), 0 8px 12px 6px var(--shadow-color-2)}}@layer base{@view-transition{navigation: auto;}*{box-sizing:border-box}html{color-scheme:dark light;background:var(--surface-document);color:var(--text-1)}body{margin:0;opacity:100%;transition:opacity ease-in-out .3s}@starting-style{body{opacity:0%}}}@layer base{body{font-family:system-ui}h1,h2,h3,h4,h5,h6{font-family:system-ui;font-weight:700;text-transform:uppercase;text-wrap:balance;text-wrap:pretty;margin-block-start:0;margin-block-end:1em}p{line-height:1.5;text-wrap:balance;text-wrap:pretty}}@layer base{:focus{outline-color:light-dark(var(--brand-primary),var(--brand-secondary))}:where(:not(:active):focus-visible){outline-offset:5px}@media (prefers-reduced-motion: no-preference){:where(:focus-visible){transition:outline-offset .2s ease}:where(:not(:active):focus-visible){transition-duration:.25s}}}@layer animations{@keyframes circle-in-top-right{0%{clip-path:circle(0% at calc(100% - 5.25rem) 2rem)}to{clip-path:circle(150% at calc(100% - 5.25rem) 2rem)}}@media (prefers-reduced-motion){:root{view-transition-name:root}:root::view-transition-new(root),:root::view-transition-old(root){animation-duration:inherit;animation-fill-mode:inherit}:root::view-transition-new(root){animation-name:-ua-view-transition-fade-in,-ua-mix-blend-mode-plus-lighter}:root::view-transition-old(root){animation-name:-ua-view-transition-fade-out,-ua-mix-blend-mode-plus-lighter}:root *{view-transition-name:none}}}@layer animations{html:active-view-transition-type(theme-toggle) *{view-transition-name:none}html:active-view-transition-type(theme-toggle)::view-transition-old(root){animation:none}html:active-view-transition-type(theme-toggle)::view-transition-new(root){animation:.5s ease-in-out circle-in-top-right forwards}}@layer animations{html:active-view-transition-type(product-page) .product-card-container:first-child img{view-transition-name:image}html:active-view-transition-type(product-page) .product-card-container:first-child .product-meta>a{view-transition-name:name}html:active-view-transition-type(product-page) .product-card-container:first-child .product-meta>small{view-transition-name:type}html:active-view-transition-type(product-page) .product-card-container:first-child .product-cost>span:not([class]){view-transition-name:note}html:active-view-transition-type(product-page) .product-card-container:first-child .product-cost>.money{view-transition-name:price}html:active-view-transition-type(product-page) .product-card-container:first-child button{view-transition-name:button}html:active-view-transition-type(product-page) .product-card-container:first-child button>div{view-transition-name:button-inner}::view-transition-group(image),::view-transition-group(name),::view-transition-group(type),::view-transition-group(note),::view-transition-group(price),::view-transition-group(button),::view-transition-group(button-inner){z-index:1}::view-transition-old(image),::view-transition-new(image){animation:none;mix-blend-mode:normal;block-size:100%;overflow:clip}::view-transition-old(image){object-fit:cover}::view-transition-new(image){object-fit:contain}::view-transition-old(name),::view-transition-new(name),::view-transition-old(type),::view-transition-new(type),::view-transition-old(note),::view-transition-new(note),::view-transition-old(price),::view-transition-new(price),::view-transition-old(button),::view-transition-new(button){block-size:100%;inline-size:100%}::view-transition-old(button-inner),::view-transition-new(button-inner){block-size:100%;inline-size:fit-content}}@layer components{body{display:grid;gap:2rem}}@layer components{nav{background:var(--surface-document);block-size:var(--body-rails);display:grid;grid-auto-flow:column;align-items:center;grid-template-columns:var(--body-rails) minmax(min-content,var(--sidebar-width)) 1fr var(--body-rails);view-transition-name:nav}nav>:is(:first-child,:last-child){justify-self:center}nav>button:not(:last-child){justify-self:end}nav button[aria-label=Cart]{position:relative;gap:0}nav button[aria-label=Cart]>*{grid-area:1 / 1}nav button[aria-label=Cart][data-count]:after{content:attr(data-count);position:absolute;background-color:var(--brand-primary);border-radius:calc(infinity * 1px);aspect-ratio:1;font-size:.8em;grid-template-columns:1.2em;display:grid;padding-inline-start:.15em;padding-inline-end:.25em;padding-block-start:.2em;padding-block-end:.125em;align-items:center;font-variant-numeric:tabular-nums;left:calc(90% - 1rem);bottom:calc(90% - 1rem)}}@layer components{main{display:grid;margin-inline:1rem;gap:2rem 0;padding-block-end:10vh}@media (width >= 768px){main{grid-template-columns:var(--sidebar-width) 1fr;margin-inline:var(--body-rails)}}}@layer components{.name{color:var(--text-1);font-weight:400}@media (width <= 350px){.name{inline-size:0;overflow:hidden}}}@layer components{a{color:var(--text-2);display:inline-grid;grid-auto-flow:column;gap:.5rem;align-items:center;text-underline-offset:.1em}a:hover{color:var(--text-1)}a:hover>svg>.secondary{stroke:var(--text-2);fill:var(--surface-document)}a:hover>svg>.primary{fill:var(--text-2)}a:focus:not(:focus-visible){outline:none}a>svg{inline-size:1rem;block-size:1rem}}@layer components{form>fieldset{border:none;padding:0;margin:0;display:flex;flex-direction:column;flex-wrap:wrap;gap:1rem 2rem}@media (width <= 768px){form>fieldset{flex-direction:row;row-gap:.25rem}}form>fieldset>legend{margin-block-end:1em;padding:0;font-size:1.5em;font-weight:200}@media (width <= 768px){form>fieldset>legend{margin-block-end:.5em}}form>fieldset label{color:var(--text-2);position:relative;font-size:.9rem;padding-block:1ex;cursor:pointer}form>fieldset label:before{content:"";display:block;position:absolute;inset-inline-start:calc((var(--body-rails) + .25rem) / 2 * -1);inset-block-start:0;inline-size:.25rem;block-size:100%;border-radius:10px;transition:background-color .3s ease}@media (width <= 768px){form>fieldset label:before{inset-inline-start:0;inset-block-start:90%;inline-size:100%;block-size:.25rem}}form>fieldset label:hover,form>fieldset label:has(:focus-within){color:var(--text-1)}form>fieldset label:hover:before,form>fieldset label:has(:focus-within):before{background-color:var(--brand-secondary)}form>fieldset label:has(:checked){color:var(--text-1)}form>fieldset label:has(:checked):before{background-color:var(--brand-primary)}form>fieldset input[type=radio]{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:100%}}@layer components{hr{margin-block:1rem}@media (width >= 768px){hr{margin-block:4rem;margin-inline-end:2rem}}}@layer components{button{display:inline-grid;align-items:center;gap:.5rem;font-size:1rem;padding:.75rem 1rem;border:none;border-radius:var(--brand-border_radius);background:var(--surface-document);cursor:pointer}button:focus:not(:focus-visible){outline:none}button[primary]{background:var(--brand-primary);color:#000}button[light]{background:var(--surface-2);color:var(--text-1)}button>svg{inline-size:100%}button:is([small-icon],[large-icon]){padding:.25rem;border-radius:50%;border:1px solid transparent;transition:border-color .2s ease,outline-offset .2s ease}button:is([small-icon],[large-icon]):hover{border-color:var(--surface-2)}button:is([small-icon],[large-icon]):active{border-color:var(--brand-primary)}button[small-icon]{inline-size:2.5rem;block-size:2.5rem}button[large-icon]{inline-size:3rem;block-size:3rem}}@layer components{button-list{display:grid;gap:1rem;grid-auto-flow:column}icon-button-list{display:flex;justify-content:flex-end}icon-button-list>button{margin-inline-start:.5rem}}@layer components{.greeting{font-size:2.5rem;font-weight:200;text-transform:none;margin-block:2vh .5vh;margin-inline-start:1rem}@media (width >= 768px){.greeting{margin-block:5vh 2.5vh;margin-inline-start:var(--body-rails)}}}@layer components{.product-card-container{container:product-card / inline-size;list-style:none;padding:0}.product-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:10rem;gap:.5rem;padding-block:.5rem;padding-inline:.5rem .75rem;box-sizing:border-box;margin:0;border:.125rem solid var(--surface-3);border-radius:var(--brand-border_radius)}.product-card:focus-within{border-color:var(--text-2)}.product-card>.product-details{display:grid;text-align:end;justify-content:end;justify-items:end;gap:1rem}.product-card>.product-details *{inline-size:fit-content}.product-card>.product-details>*{display:grid;justify-items:end}.product-card>.product-details>.product-meta{place-self:end}.product-card>.product-details>.product-cost{place-self:end}.product-card>.product-details>button{border:.0625rem solid currentColor}.product-card :is(p,small){margin:0}.product-card a{text-wrap:balance;color:var(--text-1);font-size:1.5rem;font-weight:300;line-height:1.1}@media (min-resolution: 1.25dppx){.product-card a{font-weight:400}}.product-card picture{display:flex}.product-card img{width:10rem;height:auto}.product-card small{margin-block-start:.25rem;color:var(--text-2)}.product-card p{font-size:.8rem;color:var(--text-1);margin-block-end:.25rem;flex:2;display:inline-flex;align-items:flex-start}.product-card span:not([class]){font-size:.8rem;color:var(--brand-primary);margin-block-end:.25rem}@container (inline-size < 30em){.product-card{grid:auto 1fr / auto;block-size:100%;place-items:end stretch}.product-card img{aspect-ratio:5/3;inline-size:100%;block-size:auto;overflow:clip;object-fit:cover}.product-card .product-details{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding:1rem}.product-card .product-details>.product-meta{text-align:start;max-inline-size:50cqi;justify-items:start}.product-card .product-details>.product-cost>span{margin:0}.product-card .product-details>button{justify-items:center;flex-basis:100%}.product-card a{font-size:2rem}}}@layer components{picture:is([contain],[cover])>img{inline-size:100%;block-size:100%}picture[contain]>img{object-fit:contain}picture[cover]>img{object-fit:cover}}@layer components{svg>.primary{fill:var(--text-2)}svg>.secondary{fill:light-dark(var(--color-5),var(--surface-2))}}@layer components{.money{color:var(--text-1)}}@layer components{.most-popular-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(20em,1fr));gap:1rem;padding:0}}@layer components;@layer components{.sun-and-moon>:is(.moon,.sun,.sun-beams){transform-origin:center center}.sun-and-moon>:is(.moon,.sun){fill:var(--icon-fill)}.theme-toggle:is(:hover,:focus-visible)>:is(.sun-and-moon>:is(.moon,.sun)){fill:var(--icon-fill-hover)}.sun-and-moon>.sun-beams{stroke:var(--icon-fill);stroke-width:2px}.theme-toggle:is(:hover,:focus-visible) :is(.sun-and-moon>.sun-beams){stroke:var(--icon-fill-hover)}[data-theme=dark] .sun-and-moon>.sun{transform:scale(1.75)}[data-theme=dark] .sun-and-moon>.sun-beams{opacity:0}[data-theme=dark] .sun-and-moon>.moon>circle{transform:translate(-7px)}@supports (cx: 1){[data-theme=dark] .sun-and-moon>.moon>circle{transform:translate(0);cx:17}}@media (prefers-reduced-motion: no-preference){.sun-and-moon>.sun{transition:transform .5s ease-out}.sun-and-moon>.sun-beams{transition:transform .5s ease,opacity .5s ease}.sun-and-moon .moon>circle{transition:transform .25s ease-in-out}@supports (cx: 1){.sun-and-moon .moon>circle{transition:cx .25s ease-in-out}}[data-theme=dark] .sun-and-moon>.sun{transform:scale(1.75);transition-timing-function:ease;transition-duration:.25s}[data-theme=dark] .sun-and-moon>.sun-beams{transform:rotate(-25deg);transition-duration:.15s}[data-theme=dark] .sun-and-moon>.moon>circle{transition-delay:.25s;transition-duration:.5s}}}@layer components{.theme-toggle{--icon-fill: var(--text-2);--icon-fill-hover: var(--text-1)}[data-theme=light]{color-scheme:light}[data-theme=dark]{color-scheme:dark}}