@font-face{font-style:normal;src:local("Open Sans"),url(./OpenSans-VariableFont_wdth_wght-_zKKw-kd.ttf);font-family:OpenSans;font-display:swap;font-optical-sizing:auto;font-variation-settings:"wdth" 100}@font-face{font-style:italic;src:local("Open Sans"),url(./OpenSans-Italic-VariableFont_wdth_wght-DMGVWctF.ttf);font-family:OpenSans;font-display:swap;font-optical-sizing:auto;font-variation-settings:"wdth" 100}:root{font-family:OpenSans,sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;--color: #21c921;--color-dark: #208520;--color-bright: #1cff1c;--accent: #163c3e;color:#000;letter-spacing:2px}button{all:unset;cursor:pointer}html,body{margin:0;padding:0}html{width:100%;min-height:100vh;font-size:14px;background:#fff}body{padding:10px 40px}.layout{display:grid;grid-template-columns:200px 1fr;gap:20px;min-height:100vh}.layout aside{display:flex;flex-direction:column;gap:20px}.layout main{display:flex;flex-direction:column;gap:10px}.layout main header{display:flex;justify-content:space-between;align-items:center}.layout main header .headerControls{display:flex;align-items:center;gap:20px}.search{position:relative}.search>input{width:100%}.search .resetButton{position:absolute;right:0;top:0}.search .searchList{display:flex;position:absolute;left:0;right:0;top:100%;background-color:#fff;z-index:1;border:1px solid #333;flex-direction:column}.search .searchList .result{all:unset;cursor:pointer;display:block;padding:5px}.search .searchList .result:hover{background-color:#eee}.search .searchList .result span{font-weight:700;text-decoration:underline}.shoeList{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.shoeList:has(>.group){display:flex;flex-direction:column}.group{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.group .title{font-size:120%;font-weight:700;column-span:99;grid-column-start:1;grid-column-end:-1}.accordion{display:flex;flex-direction:column;gap:20px}.accordion .item{display:flex;flex-direction:column;border-bottom:1px solid #ccc}.accordion .item .accordionItemWrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.accordion .item .accordionItemWrapper .accordionItemContent{display:grid;overflow:hidden}.accordion .item .accordionItemWrapper .accordionItemContent .accordionItemPadding{padding:10px 0}.accordion .item[data-expanded=true] .accordionItemWrapper{grid-template-rows:1fr}.accordion .item .label{font-weight:700;padding:10px 0;border-bottom:1px solid #eee;position:relative}.accordion .item .label:after{content:"";position:absolute;right:0;top:50%;translate:0 -50%;background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%235f6368'%3e%3cpath%20d='m480-340%20180-180-57-56-123%20123-123-123-57%2056%20180%20180Zm0%20260q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Zm0-320Z'/%3e%3c/svg%3e");width:20px;aspect-ratio:1/1;background-size:contain;rotate:-.25turn;transition:all .1s ease-out}.accordion .item[data-expanded=true]>button:after{rotate:0turn}.filter{display:flex;flex-direction:column;gap:10px}.filter .label{font-weight:700}.checkboxFilterList{display:grid;grid-template-columns:min-content 1fr min-content;gap:20px 0}.checkboxFilterList label{display:grid;grid-column:span 3;grid-template-columns:subgrid;gap:5px}.checkboxFilterList label span{text-align:right;color:#999}.gridFilterList{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.gridFilterList button{text-align:center;border:1px solid #ccc}.gridFilterList button.selected{background-color:#add8e6}.shoe{display:flex;flex-direction:column;gap:10px;max-width:200px}.shoe .name span{font-weight:700;text-decoration:underline}.shoe .imagePedestal{background-color:#eee;position:relative}.shoe .imagePedestal .image{width:100%;aspect-ratio:1/1;image-rendering:pixelated;background-position:50% 80%;background-size:50%;background-repeat:no-repeat;scale:-1 1}.shoe[data-selected=true]{outline:2px solid lightblue;outline-offset:5px}.shoe[data-in-stock=false] .imagePedestal:after{position:absolute;top:5px;right:5px;content:"Out of stock";background-color:#ccc;font-size:80%;text-transform:uppercase;white-space:nowrap;border-radius:5px}.shoe[data-in-stock=false] .image{filter:grayscale(1);opacity:.5}.shoe .colorList{position:absolute;left:0;bottom:0;display:flex;gap:2px}.shoe .colorList .color{width:10px;aspect-ratio:1/1}.shoe .brand{font-weight:800;font-variant:small-caps}.shoe .price{font-style:italic}.colorFilterList{display:grid;grid-template-columns:min-content 1fr min-content;gap:20px 0}.colorFilterList button{display:grid;grid-column:span 3;grid-template-columns:subgrid;gap:5px}.colorFilterList button>div{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.colorFilterList button .color{display:inline-block;vertical-align:middle;margin-right:5px;aspect-ratio:1/1;width:20px}.colorFilterList button span{text-align:right;color:#999}.chipList{display:flex;gap:10px}.chipList .chip{display:flex;gap:1px;border-radius:20px;font-size:80%;-webkit-user-select:none;user-select:none}.chipList .chip :first-child{border-top-left-radius:10px;border-bottom-left-radius:10px;padding:5px 5px 5px 10px}.chipList .chip :last-child{border-top-right-radius:10px;border-bottom-right-radius:10px;padding-right:5px;padding-top:5px;padding-bottom:5px;text-align:center}.chipList .chip button{display:flex;padding-left:5px;align-items:center;justify-content:center;text-align:center}.chipList .chip button:hover{filter:brightness(1.1)}.priceFilter{display:flex;flex-direction:column;gap:10px}.priceFilter .customValue{display:flex;align-items:center;gap:3px}.priceFilter .customValue input{width:30px;padding:5px;text-align:right}