@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");html{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}body{font-family:Open Sans,sans-serif;background:#f9f9f9;margin:0;padding:0 70px}.custom-select-options::-webkit-scrollbar,.product-list-item::-webkit-scrollbar,body::-webkit-scrollbar,html::-webkit-scrollbar{display:none}.container{padding:0 20px}.app-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;margin-bottom:1rem;position:-webkit-sticky;position:sticky;top:0;background-color:#fff;z-index:100;box-shadow:3px 3px 3px rgba(0,0,0,.08)}.app-header h1{margin:0;font-size:2rem;color:#343a40}.main-nav{display:flex;gap:.5rem;position:relative;background-color:#fff;border-radius:9999px;padding:.25rem}.main-nav:before{content:"";position:absolute;top:.25rem;left:var(--pill-left,.25rem);width:var(--pill-width,0);height:calc(100% - .5rem);background-color:#006d5b;border-radius:9999px;box-shadow:0 4px 12px rgba(0,109,91,.25);transition:left .4s cubic-bezier(.25,.46,.45,.94),width .4s cubic-bezier(.25,.46,.45,.94),opacity .2s ease;z-index:1;opacity:var(--pill-opacity,0)}.nav-link{padding:.6rem 1.2rem;text-decoration:none;color:#495057;font-weight:500;border-radius:9999px;transition:color .3s ease;position:relative;z-index:2}.nav-link:hover:not(.active){background-color:#e9f3f1;color:#000}.nav-link.active{color:#fff}.product-card-advanced{background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.06);margin:0}.image-wrapper,.product-card-advanced{position:relative;overflow:hidden;width:100%}.image-wrapper{height:180px}.product-image{width:100%;height:100%;object-fit:cover}.category-pill-overlap{position:absolute;top:160px;left:50%;transform:translateX(-50%);background-color:#fff;padding:10px 46px;border-radius:9999px;font-size:16px;font-weight:800;color:#006d5b;box-shadow:0 2px 6px rgba(0,0,0,.1);z-index:2}.product-content{padding:10px 20px 16px;text-align:left}.card-description{font-size:14px;color:#6c757d;margin:4px 0 8px;line-height:1.4;height:2.8em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.card-price{font-weight:700;padding-bottom:0}.card-actions{display:flex;justify-content:center;gap:12px;margin-top:10px}.delete-btn{padding:9px 30px;border:2px solid #006d5b;border-radius:6px;font-weight:500;cursor:pointer;text-decoration:none;background-color:#fff;color:#000;display:inline-flex;align-items:center;gap:6px;transition:all .2s ease-in-out}.delete-btn:hover{background-color:#e9f3f1}.edit-btn:hover{background-color:#005c4d}.form-page-layout{display:flex;max-width:1000px;margin:0 auto;background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.07);overflow:hidden;height:580px}.form-image-section{flex:1 1;min-width:42%;position:relative}.form-image-section img{width:100%;height:100%;object-fit:cover;display:block}.form-image-section:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.5));z-index:1}.form-image-overlay-text{position:absolute;bottom:40px;left:40px;color:#fff;z-index:2;text-shadow:0 2px 8px rgba(0,0,0,.5)}.overlay-text-small{display:block;font-size:1.2rem;font-weight:400;letter-spacing:1px;opacity:.9}.overlay-text-large{font-size:2.5rem;font-weight:700;margin:0;line-height:1.2}.form-page-layout .form-container{max-width:none;background:transparent;margin:0;padding:30px 40px;box-shadow:none;flex:1.5 1;display:flex;flex-direction:column;justify-content:center}.form-container{max-width:500px;background:#fff;margin:40px auto;padding:30px 25px;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.05)}.form-container h2{text-align:center;margin-bottom:20px;color:#333}.form-error{color:#006d5b;font-size:14px;font-weight:600;margin-bottom:10px;text-align:center}.form-group,.product-form{display:flex;flex-direction:column}.form-group{margin-bottom:16px}.form-group label{font-weight:600;margin-bottom:6px;color:#555}.product-form input,.product-form textarea{padding:10px 14px;font-size:16px;border-radius:8px;border:1px solid #ddd;outline-color:#006d5b;transition:all .3s ease}.product-form input:focus,.product-form textarea:focus{border-color:#006d5b;box-shadow:0 0 0 3px rgba(0,109,91,.1)}.product-form textarea{resize:vertical;min-height:80px}.submit-btn{background-color:#006d5b;color:#fff;padding:12px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .3s ease;margin-top:10px}.submit-btn:hover{background-color:#005c4d}.product-form input[type=number]::-webkit-inner-spin-button,.product-form input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.product-form input[type=number]{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.product-grid{flex-wrap:wrap;gap:20px}.product-grid,.product-list{display:flex;margin-top:20px}.product-list{flex-direction:column;gap:14px}.product-list-item{display:flex;align-items:center;background:#fff;padding:14px 20px;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,.05);overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}.list-image-wrapper{position:relative;width:120px;height:80px;flex-shrink:0;border-radius:8px;margin-right:20px;overflow:hidden}.list-text{padding:0 20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-text.name{font-weight:600;width:150px}.list-text.category{color:#555;width:120px}.list-text.description{width:250px;color:#666}.list-text.price{font-weight:700;color:#006d5b;width:100px;text-align:left}.product-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.edit-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 40px;background:#006d5b;border-radius:8px;color:#fff;font-weight:500;text-decoration:none;transition:background-color .2s ease-in-out}.delete-icon,.edit-icon{width:16px;height:16px}.toolbar{justify-content:space-between;padding:1rem 0;margin-bottom:1.5rem;border-bottom:1px solid #cbc7c7}.toolbar,.toolbar-actions{display:flex;align-items:center}.toolbar-actions{gap:1rem}.search-bar{position:relative;display:flex;align-items:center;width:100%;max-width:600px}.search-input{width:100%;padding:.75rem 1rem .75rem 2.5rem;border-radius:24px;border:1px solid #dfe1e5;box-shadow:none;font-size:1rem;transition:box-shadow .3s ease}.search-input:focus,.search-input:hover{border-color:#dfe1e5;box-shadow:0 1px 6px rgba(32,33,36,.28);outline:none}.search-icon{position:absolute;left:1rem;color:#9aa0a6;pointer-events:none;width:16px;height:16px}.custom-select-wrapper{position:relative;width:180px;font-size:1rem}.custom-select-trigger{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;border-radius:12px;border:1px solid #ccc;background-color:#fff;cursor:pointer;transition:all .2s ease}.custom-select-trigger:hover,.custom-select-wrapper.open .custom-select-trigger{border-color:#006d5b;box-shadow:0 0 0 2px rgba(0,109,91,.25)}.arrow{border:solid #555;border-width:0 2px 2px 0;display:inline-block;padding:3px;transition:transform .2s ease}.arrow.down{transform:rotate(45deg)}.arrow.up{transform:rotate(-135deg)}.custom-select-options{position:absolute;top:105%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,.1);z-index:10;padding:.5rem 0;margin:0;list-style:none;max-height:200px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.custom-select-option{padding:.7rem 1rem;cursor:pointer;transition:background-color .2s ease,color .2s ease}.custom-select-option:hover{background-color:#006d5b;color:#fff}.custom-select-option.selected{background-color:#e9f3f1;font-weight:600;color:#006d5b}.view-toggle{display:flex;border:1px solid #ccc;border-radius:12px;overflow:hidden;position:relative;background:#f7f7f7}.view-toggle:before{content:"";position:absolute;z-index:1;top:0;left:0;width:50%;height:100%;background-color:#006d5b;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}.view-toggle:has(button:last-child.active):before{transform:translateX(100%)}.view-btn{background-color:transparent;border:none;padding:.6rem 1rem;cursor:pointer;transition:color .3s ease;color:#555;position:relative;z-index:2;flex:1 1;text-align:center;display:flex;align-items:center;justify-content:center}.view-icon{width:20px;height:20px}.view-btn.active .view-icon{filter:brightness(0) invert(1)}.view-btn.active{color:#fff}.view-btn:hover:not(.active){background-color:#e9f3f1;color:#111}@keyframes fadeInItem{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.product-item-wrapper{opacity:0;animation:fadeInItem .4s ease-out forwards}.product-grid .product-item-wrapper{width:calc(25% - 15px)}.delete-btn-corner{position:absolute;top:8px;right:8px;background:hsla(0,0%,100%,.4);border:none;border-radius:50%;width:38px;height:38px;font-size:30px;line-height:28px;text-align:center;cursor:pointer;color:#006d5b;box-shadow:0 1px 3px rgba(0,0,0,.1);transition:all .2s ease;z-index:3}.delete-btn-corner:hover{background:#006d5b;color:#fff}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;padding:15px 10px;border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,.3);width:80%;max-width:300px;text-align:center}.modal-content p{font-size:1.1rem;color:#333;margin:0 0 20px}.modal-actions{display:flex;justify-content:center;gap:15px}.modal-btn{padding:8px 20px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s ease}.modal-btn.confirm{background-color:#006d5b;color:#fff}.modal-btn.confirm:hover{background-color:#005c4d}.modal-btn.cancel{background-color:#f1f1f1;color:#555}.modal-btn.cancel:hover{background-color:#e0e0e0}@media (max-width:1024px){body{padding:0 30px}.product-grid .product-item-wrapper{width:calc(33.333% - 14px)}.form-page-layout{flex-direction:column;height:auto;margin:20px auto}.form-image-section{min-height:250px}.overlay-text-large{font-size:2rem}}@media (max-width:768px){body{padding:0 15px}.app-header{flex-direction:column;gap:1rem;align-items:center}.app-header h1{font-size:1.5rem}.toolbar{flex-direction:column;gap:1rem;align-items:stretch}.search-bar{width:100%;max-width:none}.product-grid .product-item-wrapper{width:calc(50% - 10px)}.product-list-item{flex-direction:column;align-items:flex-start;gap:10px}.list-image{width:100%;height:180px;margin-right:0;margin-bottom:10px}.list-text,.list-text.category,.list-text.description,.list-text.name,.list-text.price{width:100%;padding:0;white-space:normal}.product-actions{margin-left:0;width:100%;margin-top:10px}.form-image-section{display:none}.form-page-layout .form-container{padding:20px}}@media (max-width:480px){.product-grid .product-item-wrapper{width:100%}.toolbar-actions{flex-direction:column;align-items:stretch;gap:.75rem}.custom-select-wrapper{width:100%}.view-toggle{justify-content:center}}