*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html{color-scheme:dark light;hanging-punctuation:first last}body{min-height:100svh}img,picture,svg,video{display:block;max-width:100%}h1,h2,h3,h4,h5,h6{text-wrap:balance}p,li{max-width:65ch;text-wrap:pretty}:root{--clr-primary: #121212;--clr-secondary: #f2f2f2;--clr-accent: green}html{scroll-behavior:smooth;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}#root{background-color:var(--clr-primary);height:100vh;width:100%;display:grid;grid-template-columns:auto;grid-template-rows:1fr 8fr 1fr;grid-template-areas:"header" "main" "footer";align-items:center}header{padding:.5rem;grid-area:header;border-bottom:.5rem solid var(--clr-secondary);display:flex;justify-content:center;align-items:center}main{padding:.5rem;grid-area:main;height:100%;display:flex;justify-content:center;align-items:center;gap:2rem;overflow-y:hidden}footer{padding:.5rem;grid-area:footer;border-top:.5rem solid var(--clr-secondary);display:flex;justify-content:center;align-items:center}header{display:flex;justify-content:space-between;border-bottom:.5rem solid #f2f2f2}header>nav{display:grid;grid-auto-flow:column;grid-template-columns:repeat(auto-fill,minmax(min-content,1fr));gap:1rem}header>nav>a{color:var(--clr-secondary);height:3rem;min-width:6rem;display:grid;place-items:center;white-space:nowrap;text-decoration:none}header>nav>a:first-child{font-weight:bolder}header>nav>a:not(:first-child):not(.active):hover{outline:.1rem solid var(--clr-accent)}header>nav>a:visited{color:var(--clr-secondary)}header>nav>a.active{outline:.1rem solid #f2f2f2}header>:last-child{margin-left:1rem}button:has(>span){height:3rem;width:3rem;background-color:var(--clr-secondary);border-radius:.5rem;border:none;position:relative}button:has(>span):hover{background-color:var(--clr-accent);cursor:pointer}button>span{position:absolute;padding:.5rem;top:-.3rem;right:-.3rem;background-color:red;border-radius:50%;color:#fff;display:flex;justify-content:center;align-items:center;min-width:.3rem;height:.3rem}button>span:empty{display:none}#productList{padding:.5rem;grid-area:productos;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;max-height:100%;overflow-y:auto}#productList>li{padding:.5rem;width:15rem;height:20rem;list-style-type:none;border:.1rem solid var(--clr-secondary);border-radius:.5rem;display:flex;flex-direction:column;gap:2rem;justify-content:center;align-items:center}#productList>li>:nth-child(2){height:2rlh}#productList>li>a{display:grid;place-items:center;height:3rem;width:6rem;background-color:var(--clr-secondary);color:var(--clr-primary);border-radius:.5rem;border:none;outline:.1rem solid var(--clr-secondary);text-decoration:none}#productList>li>a:hover{background-color:var(--clr-primary);color:var(--clr-secondary);cursor:pointer}.itemDetail{display:flex;width:80vw;gap:none}.itemDetail>div:first-child{display:grid;place-items:center;width:50%}.itemDetail>div:last-child{padding:1rem;width:50%;display:flex;flex-direction:column;justify-content:center;gap:1rem}.itemDetail>div:last-child>button{height:3rem;width:9rem;background-color:var(--clr-secondary);color:var(--clr-primary);border-radius:.5rem;border:none;outline:.1rem solid white}.itemDetail>div:last-child>button:hover{background-color:var(--clr-accent);cursor:pointer}#itemQuantitySelector{display:flex;align-items:center;gap:1rem}#itemQuantitySelector>button{height:3rem;width:3rem;background-color:var(--clr-secondary);color:var(--clr-primary);border-radius:.5rem;border:none;outline:.1rem solid white}#itemQuantitySelector>div{width:2ch;text-align:center}#itemQuantitySelector>button:hover{background-color:var(--clr-accent);cursor:pointer}#cartItemList+div{align-self:start;width:25%;padding:.5rem;border:.1rem solid var(--clr-secondary);display:flex;flex-direction:column;justify-content:space-between;gap:1rem}#cartItemList+div>:nth-child(2)>*{display:flex;justify-content:space-between}#cartItemList+div>:nth-child(2)>*:nth-child(2)>span{color:var(--clr-accent)}#cartItemList+div>:nth-child(3){align-self:center;height:3rem;width:9rem;background-color:var(--clr-primary);color:var(--clr-secondary);border-radius:.5rem;border:none}#cartItemList+div>a>:last-child{height:3rem;width:100%;background-color:var(--clr-secondary);color:var(--clr-primary);border-radius:.5rem;border:none;outline:.1rem solid white}#cartItemList+div>:nth-child(3):hover{background-color:red;color:var(--clr-primary);cursor:pointer}#cartItemList+div>a>:last-child:hover{background-color:var(--clr-accent);cursor:pointer}#cartItemList{align-self:start;max-height:100%;height:100%;width:75%;display:flex;flex-direction:column;gap:1rem;overflow-y:scroll}#cartItemList>li{max-width:inherit;width:100%;text-decoration:none;display:flex;justify-content:start;align-items:center;gap:.5rem}#cartItemList>li>:first-child{width:13%}#cartItemList>li>:nth-child(2){width:50%;display:flex;flex-direction:column;gap:.5rem}#cartItemList>li>:nth-child(3){width:25%;display:flex;flex-direction:column;gap:.5rem}#cartItemList>li>:nth-child(2)>:last-child{height:3rem;width:6rem;background-color:var(--clr-secondary);color:var(--clr-primary);border-radius:.5rem;border:none}#cartItemList>li>:nth-child(2)>:last-child:hover{background-color:red;color:var(--clr-primary);cursor:pointer}#cartItemList>li>:last-child{width:12%}#checkoutForm{align-self:start;max-height:100%;height:100%;width:75%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:1rem;overflow-y:scroll}#checkoutForm>fieldset{width:95%;padding:.5rem;display:flex;flex-direction:column;border-radius:.5rem}#checkoutForm>fieldset>legend{text-wrap:balance;text-align:center}#checkoutForm>fieldset>div{padding:.5rem;display:flex;flex-direction:column}#checkoutForm>fieldset>div>label{padding:.5rem}#checkoutForm>fieldset>div>input,#checkoutForm>fieldset>div>select{min-height:3rem;padding:.5rem;background-color:var(--clr-secondary);color:var(--clr-primary);border:none;border-radius:.5rem}#checkoutForm>fieldset>div>input:hover,#checkoutForm>fieldset>div>select:hover{cursor:pointer}#checkoutForm>fieldset>div>input:focus,#checkoutForm>fieldset>div>select:focus{background-color:var(--clr-primary);color:var(--clr-secondary);outline:.3rem solid var(--clr-secondary);cursor:pointer}#checkoutForm>button{margin:.5rem;min-height:3rem;width:9rem;background-color:var(--clr-secondary);color:var(--clr-primary);border-radius:.5rem;border:none;outline:.1rem solid white}#checkoutForm>button:hover{background-color:var(--clr-accent);cursor:pointer}#checkoutTotal{align-self:start;height:90%;width:25%;display:flex;flex-direction:column;justify-content:space-between}#checkoutTotal>:first-child{padding:.5rem;border:.1rem solid var(--clr-secondary);border-radius:.5rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem}#checkoutTotal>div>:nth-child(2)>*{display:flex;justify-content:space-between}#checkoutTotal>div>:nth-child(2)>*:nth-child(2)>span{color:var(--clr-accent)}#checkoutTotal>:last-child{display:flex}