/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}
@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:600;src:url(623603c20b9700d7381a.ttf) format("truetype")}@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:400;src:url(ed3e1a0f0cbd41e2d920.ttf) format("truetype")}
.root{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;text-rendering:optimizeLegibility;background:#fffefb;color:#3f3f3f;display:grid;font-family:Source Sans Pro,sans-serif;gap:16px;grid-template-areas:"header header" "aside products";grid-template-columns:332px 1fr;grid-template-rows:auto auto;margin:0 auto;max-width:1792px;min-width:320px;padding:32px}@media screen and (max-width:414px){.root{align-items:center;display:flex;flex-flow:column;gap:0;padding:16px}}
.header__title{color:#3f3f3f;font-size:28px;font-style:normal;font-weight:600;line-height:35px;margin:0}
.header__sort-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fffefb;background-image:url(20341b0ecdce2b9e4256.svg);background-position:90% 15px;background-repeat:no-repeat;border:0;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.1);color:#b4b4b4;cursor:pointer;font-family:Source Sans Pro;font-size:12px;font-style:normal;font-weight:400;line-height:15px;padding:10px 28px 11px 16px;text-align:center;text-align:-webkit-center;transition:all .25s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header__sort-button:focus{outline:0}.header__sort-button:hover{background-image:url(441d2e6d0cf16e874bfa.svg);color:#3f3f3f}@media screen and (max-width:768px){.header__sort-button{color:#3f3f3f;font-size:14px;margin-top:16px;width:100%}}
.header{align-items:center;display:flex;flex-flow:row nowrap;grid-area:header;justify-content:space-between;width:100%}@media screen and (max-width:768px){.header{align-items:center;flex-flow:column;margin-top:25px;padding:0 16px}}
.aside{grid-area:aside;height:calc(100vh - 116px);max-width:332px;position:-webkit-sticky;position:sticky;top:32px}@media screen and (max-width:415px){.aside{height:auto;margin:16px 0;max-width:none;position:static;width:100%}}
.form__input-group{display:flex;flex-direction:column;margin-top:16px;position:relative}.form__input-group:first-of-type{margin-top:0}
.form__input{background:#fffefb;border:1px solid transparent;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.1);box-sizing:border-box;color:#000;font-size:12px;font-style:normal;font-weight:400;line-height:15px;max-height:36px;outline:none;padding:10px 16px;resize:none;transition:border .2s}textarea.form__input{min-height:108px}.form__input::-moz-placeholder{color:#b4b4b4;font-size:12px;line-height:15px}.form__input:-ms-input-placeholder{color:#b4b4b4;font-size:12px;line-height:15px}.form__input::placeholder{color:#b4b4b4;font-size:12px;line-height:15px}.form__input:focus{border:1px solid #7bae73}
.form__label_required{background-image:url(ec4a711d6622bcf5a6d7.svg);background-position:50%;background-repeat:no-repeat;display:inline-block;height:4px;position:absolute;width:4px}
.form__label{color:#49485e;display:block;font-family:Source Sans Pro;font-size:10px;font-style:normal;font-weight:400;letter-spacing:-.02em;line-height:13px;margin:0 0 4px}
.form__input:focus.form__input_validity_error,.form__input_validity_error{border:1px solid #ff8484}
.form__error{bottom:-12px;color:#ff8484;font-size:8px;font-weight:400;left:0;letter-spacing:-.02em;line-height:10px;margin-top:4px;position:absolute}
.form__submit-button{background-color:#7bae73;border:0;border-radius:10px;box-shadow:0 2px 5px rgba(0,0,0,.1);color:#fff;cursor:pointer;font-family:Source Sans Pro;font-size:12px;font-style:normal;font-weight:600;height:36px;letter-spacing:-.02em;line-height:15px;margin-top:24px;padding:10px auto 11px;text-align:center;transition:all .25s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.form__submit-button:focus{outline:none}.form__submit-button:enabled:hover{opacity:.8}.form__submit-button:disabled{background-color:#eee;box-shadow:none;color:#b4b4b4;cursor:default}
.form{background:#fffefb;border-radius:4px;box-shadow:0 20px 30px rgba(0,0,0,.04),0 6px 10px rgba(0,0,0,.02);padding:24px}.form__input:required~.form__label:before{content:"*";margin-right:auto}
.products__items{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,332px);justify-content:center;justify-items:center;list-style:none;margin:0;padding:0}@media screen and (max-width:768px){.products__items{display:flex;flex-flow:column}}
.products{grid-area:products;width:100%}
.product__title{color:#3f3f3f;font-size:20px;font-style:normal;font-weight:600;line-height:25px;margin:16px 0;overflow:hidden;padding:0 16px;text-overflow:ellipsis;white-space:nowrap}
.product__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}
.product__delete-button{background-color:#ff8484;background-image:url(d1cfb7fb124ff48e884f.svg);background-position:50%;background-repeat:no-repeat;background-size:16px 16px;border:0;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,.1);cursor:pointer;display:none;height:32px;position:absolute;right:-8px;top:-8px;transition:background-color .25s;width:32px}.product__delete-button:hover{background-color:#fdb2b1}.product__delete-button:focus{outline:0}
.product__desc{color:#3f3f3f;font-size:16px;font-style:normal;font-weight:400;line-height:20px;margin:0;max-height:80px;overflow:hidden;padding:0 16px;text-overflow:ellipsis;white-space:normal}
.product__price{color:#3f3f3f;font-size:24px;font-style:normal;font-weight:600;line-height:30px;margin:auto 0 24px;padding:0 16px}
.product{background:#fffefb;border-radius:4px;box-shadow:0 20px 30px rgba(0,0,0,.04),0 6px 10px rgba(0,0,0,.02);display:flex;flex-flow:column nowrap;height:423px;justify-content:flex-start;position:relative;width:332px}.product:hover .product__delete-button{display:block}.new-product{-webkit-animation:newAnim .52s ease-in-out 0s 1 normal forwards;animation:newAnim .52s ease-in-out 0s 1 normal forwards}.remove-product{-webkit-animation:removeAnim .4s ease-in-out 0s 1 normal forwards;animation:removeAnim .4s ease-in-out 0s 1 normal forwards}@media screen and (max-width:768px){.product{width:100%}}@-webkit-keyframes removeAnim{0%{opacity:1}to{opacity:0}}@keyframes removeAnim{0%{opacity:1}to{opacity:0}}@-webkit-keyframes newAnim{0%{opacity:0}to{opacity:1}}@keyframes newAnim{0%{opacity:0}to{opacity:1}}
.notifications{bottom:32px;display:flex;flex-flow:column nowrap;left:32px;position:fixed}@media screen and (max-width:414px){.notifications{bottom:16px;left:50%;margin-left:-164px}}
.notification__message{color:#3f3f3f;font-size:16px;font-style:normal;font-weight:400;line-height:20px;padding:0 25px}
.notification__message_hided{-webkit-animation:hide 1s ease 0s 1 normal forwards;animation:hide 1s ease 0s 1 normal forwards}@-webkit-keyframes hide{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-50px)}}@keyframes hide{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-50px)}}
.notification__message_shown{-webkit-animation:popup 1s ease 0s 1 normal forwards;animation:popup 1s ease 0s 1 normal forwards;display:flex}@-webkit-keyframes popup{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes popup{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}
.notification{align-items:center;background-color:#fff;border-radius:4px;box-shadow:0 20px 30px rgba(0,0,0,.04),0 6px 10px rgba(0,0,0,.02);display:flex;justify-content:center;margin-bottom:5px;min-height:38px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:332px}.notification:last-of-type{margin-bottom:0}.notification:before{-webkit-animation:bounce 1s ease 0s infinite normal forwards;animation:bounce 1s ease 0s infinite normal forwards;background-color:#7bae73;border-radius:100%;content:"";height:12px;left:-6px;position:absolute;top:-6px;width:12px}@media screen and (max-width:414px){.notification{max-width:328px}}@-webkit-keyframes bounce{0%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;transform:scale(1.5);transform-origin:center center}45%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;transform:scale(1)}}@keyframes bounce{0%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;transform:scale(1.5);transform-origin:center center}45%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;transform:scale(1)}}