:root{font-family:system-ui,-apple-system,sans-serif;color:#263c30;background:#f4f6f0}*{box-sizing:border-box}body{margin:0}.layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;max-width:1800px;margin:auto;padding:16px}.sidebar{display:flex;flex-direction:column;gap:14px}.box{background:#fff;border:1px solid #e0e8dc;border-radius:10px;padding:15px}.heading,.catalog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}h1,h2{margin:0;font-size:19px;line-height:1.2}.text-button{border:0;background:none;color:#6e826b;font:inherit;font-size:11px;cursor:pointer;text-decoration:underline}.text-button:disabled{opacity:.4;cursor:default}.items{display:grid;gap:5px}.item{display:flex;align-items:center;gap:3px;min-width:0}.item-main{display:flex;align-items:center;gap:9px;flex:1;min-width:0;text-align:left;background:#f4f7f1;border:1px solid #e7eee3;border-radius:6px;padding:8px;color:inherit;font:inherit;cursor:pointer}.item-main span:last-child{overflow-wrap:anywhere}.check{flex:none;width:17px;height:17px;border:1px solid #aabda4;border-radius:4px;display:grid;place-items:center;font-size:12px}.done .check{background:#75936c;color:white}.done .item-main span:last-child{text-decoration:line-through;color:#a1ada0}.important .item-main{color:#ba5b40}.important .icon[data-action=note]{color:#ba5b40;font-weight:bold}.icon{border:0;background:none;color:#a8b6a5;padding:5px;min-width:23px;cursor:pointer;font-size:17px}.add-form{display:flex;gap:5px;margin-bottom:10px}.add-form input,.controls input,.controls select{min-width:0;border:1px solid #dce6d8;border-radius:6px;background:#fafcf9;color:inherit;font:inherit;padding:8px}.add-form input{flex:1;width:0}.add-button{border:0;border-radius:6px;background:#365d43;color:white;width:36px;font-size:21px;cursor:pointer}.basket-list{display:flex;flex-wrap:wrap;gap:6px}.basket,.product{border:1px solid #e1eadd;border-radius:6px;background:#f6f9f3;color:inherit;font:inherit;cursor:pointer;text-align:left}.basket{padding:7px 9px}.basket span{margin-left:10px;color:#83a07b}.catalog{min-width:0}.controls{display:flex;gap:8px;flex-wrap:wrap}.controls select{cursor:pointer}.controls input{width:165px}.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}.product{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;padding:8px 10px}.product span:first-child{overflow-wrap:anywhere}.product span:last-child{color:#8da987;flex:none}.product:hover,.basket:hover,.item-main:hover{background:#e9f1e5}.empty,.no-results{color:#9baa98;font-size:13px;margin:10px 0}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#344c3d;color:#fff;border-radius:8px;padding:12px 18px;opacity:0;pointer-events:none}#toast.visible{opacity:1}small{font-size:11px;color:#8b9b88}@media(max-width:700px){.layout{grid-template-columns:1fr;padding:10px;gap:10px}.sidebar{gap:10px}.catalog-header{align-items:flex-start;flex-direction:column}.controls{width:100%}.controls input{flex:1;width:0}.products{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.box{padding:12px}}
/* Tumma teema */
:root{color-scheme:dark;background:#111713;color:#e1e9df}
.box{background:#1b2420;border-color:#303e34}
.item-main,.basket,.product{background:#26342b;border-color:#35483a;color:#e1e9df}
.item-main:hover,.product:hover,.basket:hover{background:#34483a}
.check{border-color:#788f7a}.done .check{background:#668c6b}.done .item-main span:last-child{color:#849588}
.icon{color:#8da091}.icon[data-action=remove]{color:#df7777}.icon[data-action=remove]:hover{color:#ff9c9c}.icon svg,.sort-button svg{display:block;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.add-form input,.controls input,.controls select{background:#111b15;border-color:#35483a;color:#e1e9df}.add-button{background:#6b966e;color:#101b13}.text-button{color:#a4c3a1}.empty,.no-results{color:#8fa291}.basket span,.product span:last-child{color:#a2c2a0}.important .item-main,.important .icon[data-action=note]{color:#ff9a7c}
.catalog-title{display:flex;align-items:center;gap:8px}.sort-button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #405346;border-radius:6px;background:#26342b;color:#bbd1bc;cursor:pointer}.sort-button:hover{background:#34483a}.sort-button svg{width:18px;height:18px}
/* Ostoslistan, kertaostojen ja valikoiman värit */
:root{background:#0d1421;color:#e4e9f2}
.box{background:#172235;border-color:#293a54}
.shopping-box{background:#172940;border-color:#263e5c}
.shopping-box .item-main{background:#213955;border-color:#304b6b}
.shopping-box .item-main:hover{background:#2a486b}
.once-box{background:#282039;border-color:#403251}
.once-box .item-main{background:#382b4b;border-color:#49395e}
.once-box .item-main:hover{background:#49365f}
.catalog{background:#25272b;border-color:#3b3d42}
.catalog .product{background:#34363a;border-color:#46494e}
.catalog .product:hover{background:#484b51}
.basket{background:#22324a;border-color:#344963}
.basket:hover{background:#304662}
.add-form input,.controls input,.controls select{background:#151b28;border-color:#41485a;color:#e4e9f2}
.add-button{background:#647fae;color:#fff}
.text-button{color:#a8bedb}
.empty,.no-results{color:#9ca9b9}
.sort-button{background:#35383d;border-color:#53565d;color:#d4dae2}
.sort-button:hover{background:#494d54}
.done .item-main span:last-child{color:#a3a4b1}
.icon{color:#a3afc0}
.basket span{color:#b2c6e3}
small{color:#b1a9bf}

.store-view .layout{display:block;max-width:560px;padding:12px}.store-view .sidebar{gap:12px}.store-view .item-main{min-height:48px;font-size:17px}.store-view .icon{min-width:38px;min-height:44px;display:grid;place-items:center}.store-view .add-form input{min-height:44px}