*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}body{background-color:#e9f1f0}main{font-family:"Arial",sans-serif;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:100vh}.card_product{width:280px;min-height:400px;background:#fff;border-radius:12px;-webkit-box-shadow:0 4px 8px rgba(0,0,0,.1);box-shadow:0 4px 8px rgba(0,0,0,.1);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;-webkit-transition:all .3s ease;transition:all .3s ease;position:relative}.card_product:hover{-webkit-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px);-webkit-box-shadow:0 8px 25px rgba(0,0,0,.15);box-shadow:0 8px 25px rgba(0,0,0,.15)}.card_product__image-wrapper{width:100%;min-height:150px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#f8f9fa;position:relative}.card_product__image-link{display:block;max-width:150px;height:auto}.card_product__image{width:100%;min-height:150px;-o-object-fit:cover;object-fit:cover;border-radius:8px}.card_product__favorite{position:absolute;top:15px;right:15px;width:30px;height:30px;background:#fff;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.1);box-shadow:0 2px 4px rgba(0,0,0,.1);-webkit-transition:all .3s ease;transition:all .3s ease}.card_product__favorite::before{content:"";width:16px;height:16px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z' stroke='%23ff4757' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;-webkit-transition:background-image .3s ease;transition:background-image .3s ease}.card_product__favorite:hover{background:#ff4757;color:#fff}.card_product__favorite:hover::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z' fill='%23ffffff' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}.card_product__content{padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.card_product__title{font-size:18px;font-weight:600;color:#2c3e50;margin-bottom:8px;line-height:1.3}.card_product__description{font-size:14px;color:#7f8c8d;line-height:1.4;margin-bottom:15px}.card_product__price-section{margin-bottom:15px}.card_product__price-old{font-size:14px;color:#95a5a6;text-decoration:line-through;margin-right:8px}.card_product__price-new{font-size:20px;font-weight:700;color:#e74c3c}.card_product__button{width:100%;padding:12px;background:#31af30;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;-webkit-transition:all .3s ease;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.card_product__button:hover{background:#31a531;-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 4px 12px rgba(52,152,219,.3);box-shadow:0 4px 12px rgba(52,152,219,.3)}@media screen and (max-width: 320px){main{padding:0 10px}.card_product{width:100%;max-width:100%}}.nav_menu{background:linear-gradient(90deg, #abbd3e, #26930f, #24ae61, #44c89d, #60d296);-webkit-box-shadow:0 4px 15px rgba(0,0,0,.1);box-shadow:0 4px 15px rgba(0,0,0,.1);overflow:visible;font-family:"Arial",sans-serif}.nav_menu__list{list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.nav_menu__item{position:relative}.nav_menu__toggle{display:none}.nav_menu__link{display:block;padding:20px 25px;text-decoration:none;color:#333;font-weight:500;font-size:16px;-webkit-transition:background-color .3s ease,color .3s ease;transition:background-color .3s ease,color .3s ease}.nav_menu__link:hover{background-color:linear-gradient(90deg, #dddc4e, #fc9396, #81627a);color:#fff}.nav_menu__dropdown_item:last-child .nav_menu__dropdown_link{border-bottom:none}.nav_menu__dropdown_link{display:block;padding:15px 25px;color:#e2e8f0;font-size:14px;text-decoration:none;-webkit-transition:all .3s ease;transition:all .3s ease;border-bottom:1px solid hsla(0,0%,100%,.1);white-space:nowrap}.nav_menu__dropdown_link:hover{background-color:hsla(0,0%,100%,.1);color:#fff;padding-left:35px}.menu-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none}@media screen and (max-width: 768px){.nav_menu__toggle:checked+.menu-overlay{display:block;pointer-events:all}.dropdown-content-area{position:relative;z-index:1001;pointer-events:auto}}@media screen and (min-width: 769px){.nav_menu__item--has-dropdown .nav_menu__link{position:relative;padding-right:45px}.nav_menu__item--has-dropdown .nav_menu__link:after{content:"";position:absolute;right:20px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:12px;height:12px;background-image:url("data:image/svg+xml,%3Csvg fill='%23333' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3Edown%3C/title%3E%3Cpath d='M11.125 16.313l7.688-7.688 3.594 3.719-11.094 11.063-11.313-11.313 3.5-3.531z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.nav_menu__item--has-dropdown:hover .nav_menu__link:after{background-image:url("data:image/svg+xml,%3Csvg fill='white' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3Edown%3C/title%3E%3Cpath d='M11.125 16.313l7.688-7.688 3.594 3.719-11.094 11.063-11.313-11.313 3.5-3.531z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}}@media screen and (min-width: 769px){.nav_menu__item:hover .nav_menu__link{background-color:#31a531;color:#fff}.nav_menu__item:hover .nav_menu__dropdown{opacity:1;visibility:visible;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@media screen and (min-width: 769px){.nav_menu__dropdown{position:absolute;top:100%;left:0;background:#2d3748;min-width:250px;list-style:none;-webkit-box-shadow:0 8px 20px rgba(0,0,0,.2);box-shadow:0 8px 20px rgba(0,0,0,.2);border-radius:0 0 10px 10px;z-index:9999;opacity:0;visibility:hidden;-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px);-webkit-transition:all .3s ease;transition:all .3s ease}}@media screen and (max-width: 768px){.nav_menu__list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nav_menu__item{width:100%}.nav_menu__item--has-dropdown .nav_menu__link{position:relative;padding-right:45px}.nav_menu__item--has-dropdown .nav_menu__link:after{content:"";position:absolute;right:20px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:12px;height:12px;background-image:url("data:image/svg+xml,%3Csvg fill='%23333' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3Edown%3C/title%3E%3Cpath d='M11.125 16.313l7.688-7.688 3.594 3.719-11.094 11.063-11.313-11.313 3.5-3.531z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.nav_menu__toggle:checked+.menu-overlay+.dropdown-content-area .nav_menu__link{background-color:#31a531;color:#fff}.nav_menu__toggle:checked+.menu-overlay+.dropdown-content-area .nav_menu__link:after{-webkit-transform:translateY(-50%) rotate(180deg);-ms-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg);background-image:url("data:image/svg+xml,%3Csvg fill='white' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3Edown%3C/title%3E%3Cpath d='M11.125 16.313l7.688-7.688 3.594 3.719-11.094 11.063-11.313-11.313 3.5-3.531z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}.nav_menu__link{padding:15px 20px;border-bottom:1px solid #eee}.nav_menu__dropdown{position:static;background:#2d3748;-webkit-box-shadow:inset 0 3px 6px rgba(0,0,0,.1);box-shadow:inset 0 3px 6px rgba(0,0,0,.1);border-radius:0;max-height:0;overflow:hidden;-webkit-transition:max-height .3s ease;transition:max-height .3s ease}.dropdown-menu-active{max-height:300px}.nav_menu__toggle:checked+.menu-overlay+.dropdown-content-area .nav_menu__dropdown{max-height:300px}.nav_menu__dropdown_link{padding:12px 40px;background-color:#1a202c}}