main{display:flex;max-width:var(--w-l);margin:0 auto;gap:32px;padding:0 var(--pd)}#hero{position:relative;min-height:360px;background:url(/assets/img/IMG_9638.webp) no-repeat center;background-size:cover;padding:180px 0 120px;margin-bottom:64px;display:flex;align-items:center;justify-content:center;text-align:center}#hero>.container{position:relative;z-index:2}#hero>.container h1{font-size:48px;font-weight:700;text-shadow:0 2px 4px rgba(255,255,255,.2)}#hero>.container p{font-size:28px;font-weight:700}#hero>.container .shipment{color:#16331c;background:#beebc4;width:100%;max-width:368px;padding:12px;border-radius:4px}#hero>.container .dev{color:#e17a0b;background:#fff0e1;width:100%;max-width:368px;padding:12px;border-radius:4px;margin-top:12px}#hero:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg),rgba(248,248,248,.4784313725) 70%,rgba(248,248,248,.3215686275));z-index:1}#content{flex:1}#top-bar{background:#e9e9e9;z-index:10;padding:12px;display:flex;border-radius:16px;position:sticky;top:56px;gap:16px;justify-content:space-between}@media screen and (min-width:640px){#top-bar{top:64px}}#top-bar button#toggle-filters{background:none;border:none;padding:0}#top-bar button#toggle-filters>img{width:24px;height:24px;object-fit:contain}#top-bar #filter-search{flex-grow:1;width:0;display:flex;max-width:320px}#top-bar #filter-search>input{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:6px}#top-bar select#sort-select{width:0;flex-grow:1;max-width:160px;background:#fff;padding:8px 12px;border:1px solid #ccc;border-radius:6px}@media screen and (min-width:768px){#top-bar{position:static;top:unset}#top-bar button#toggle-filters{display:none}}#products-grid{display:grid;gap:32px;padding:var(--pd) 0;margin:0 auto;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}#products-grid.loading{opacity:.45;transition:opacity .3s ease}#products-grid>p{font-style:italic;color:#777;text-align:center;grid-column:1/-1;padding:32px 0}#listing-end{display:none;text-align:center;padding:128px 0;color:#777;font-style:italic}#listing-end .actions{display:flex;justify-content:center;gap:16px;margin:24px 0}#listing-end .actions>button{padding:12px 24px;background:#ffffff80;color:#777;border:solid 1px #777;border-radius:32px}#filter-brands .active-list{display:flex;flex-wrap:wrap;gap:8px;min-height:24px;position:relative;margin-top:12px;align-items:flex-start}#filter-brands .active-list>.brand{padding:2px 4px;display:flex;background:#fff;border-radius:24px;border:solid 1px #ccc;align-items:center;gap:4px}#filter-brands .active-list>.brand>img{width:24px;height:24px;object-fit:contain}#filter-brands .active-list>.brand>span{font-size:14px}#filter-brands .active-list>.brand>button.remove{margin:0;background:transparent;border:none;cursor:pointer;width:20px;height:20px;line-height:20px;text-align:center;background:#dfdfdf;border-radius:20px}#filter-brands .list{height:150px;overflow-y:scroll;padding:4px;background:#f4f4f4;border:var(--border-input);border-radius:8px}#filter-brands .list>.brand{display:flex;align-items:center;gap:12px;padding:4px 8px;border-radius:8px;margin-bottom:4px;color:var(--color-el);border:var(--border-el);background:var(--bg-el)}#filter-brands .list>.brand.active{color:var(--color-el-active);border:var(--border-el-active);background:var(--bg-el-active)}#filter-brands .list>.brand>img{width:32px;height:28px;object-fit:contain}#filter-brands .list>.brand span.name{flex:1}#filter-brands input{margin-top:4px;width:100%;padding:8px;border:var(--border-input);border-radius:4px}#filter-category .breadcrumbs{position:relative;font-size:16px;margin-top:12px;color:#333;padding:8px 4px 8px 36px;transition:color .3s,padding-left .3s}#filter-category .breadcrumbs>img{position:absolute;top:50%;left:8px;transform:translateY(-50%) rotate(180deg);width:16px;height:16px;object-fit:contain;opacity:.8;transition:left .3s,opacity .3s}#filter-category .breadcrumbs.disabled{color:#666;pointer-events:none;padding-left:4px}#filter-category .breadcrumbs.disabled>img{opacity:0;left:-20px}#filter-category .root-category{display:flex;align-items:center;border-radius:8px;padding:0 12px;margin-bottom:4px;height:48px;color:var(--color-el);border:var(--border-el);background:var(--bg-el)}#filter-category .root-category.active{color:var(--color-el-active);border:var(--border-el-active);background:var(--bg-el-active)}#filter-category .root-category>img{width:32px;height:32px;object-fit:contain;padding:4px;background:#ffffffbe;border-radius:32px;margin-right:8px}#filter-category p.list-title{margin:12px 0 0 4px;font-size:16px;color:#666;padding:4px;border-left:solid 4px #eee}#filter-category .list{border-left:solid 4px #eee;padding-left:4px;margin-left:4px}#filter-category .category-item{position:relative;border-radius:8px;padding:8px 24px 8px 12px;margin-bottom:4px;color:var(--color-el);border:var(--border-el);background:var(--bg-el)}#filter-category .category-item.active{color:var(--color-el-active);border:var(--border-el-active);background:var(--bg-el-active)}#filter-category .category-item>img.arrow{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:16px;height:16px;object-fit:contain;opacity:.8}#filters{position:fixed;display:none;top:0;left:0;width:100%;height:100%;z-index:1100;background:#f7f7f7;--active: #ec8211;--bg-el: #fff;--bg-el-active: #fff2e4;--color-el: #222;--color-el-active: #000;--border-el: solid 2px #eee;--border-el-active: solid 2px #ff8e14;--border-input: solid 1px #ccc}#filters>div{padding:12px;border-radius:12px;max-height:100%;overflow-y:auto;max-width:360px;margin:0 auto}#filters>div h4{margin:12px 0 4px 12px;font-size:18px;color:#49795f}#filters>div>div{margin-bottom:32px}#filters>div #filters-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;padding:0 12px;background:#eee;position:sticky;top:0;z-index:10}#filters>div #filters-head h2{font-size:20px;color:#181818}#filters>div #filters-head button{background:none;border:none;padding:4px;display:flex;align-items:center;justify-content:center}#filters>div #filters-head button img{width:24px;height:24px}@media screen and (min-width:768px){#filters>div #filters-head{display:none}}#filters>div #filter-results-counter{margin:4px auto;width:158px;text-align:center;bottom:12px;padding:12px 0;background:#559371;color:#fff;border-radius:32px;position:sticky}@media screen and (min-width:768px){#filters>div #filter-results-counter{position:static;font-size:14px;color:#b1b1b1;background:none;border-radius:0;padding:0}}@media screen and (min-width:768px){#filters{display:block;width:240px;position:static;top:unset;left:unset;height:unset;background:unset}#filters>div{position:sticky;top:112px;background:#f7f7f7;box-shadow:0 4px 12px #2221;border:solid 1px #ebebeb;max-height:calc(100vh - 180px);max-width:unset;margin:0}}@media screen and (min-width:860px){#filters{width:280px}}#filter-price .price-inputs{display:flex;gap:8px;margin-top:12px;padding:0 12px}#filter-price .price-inputs input{width:100%;padding:8px;border:var(--border-input);border-radius:4px;background:var(--bg-el);color:var(--color-el);transition:border-color .3s,background-color .3s,color .3s}#filter-price .price-inputs input:focus{outline:none;border-color:var(--border-el-active);background-color:var(--bg-el-active);color:var(--color-el-active)}#filter-price .slider-range-container{display:flex;justify-content:space-between;margin:0 12px}#filter-price .slider-range-container .min-label,#filter-price .slider-range-container .max-label{font-size:14px;color:#636363}#filter-price .slider-range-container .min-label{text-align:left}#filter-price .slider-range-container .max-label{text-align:right}#filter-price .slider-container{position:relative;height:28px;margin:0 14px}#filter-price .slider-container .slider-track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:4px;background:#ccc;border-radius:2px;pointer-events:none}#filter-price .slider-container .slider-range{position:absolute;top:50%;transform:translateY(-50%);height:4px;background:var(--active);border-radius:2px;pointer-events:none}#filter-price .slider-container .slider-thumb{position:absolute;top:50%;width:20px;height:20px;background:var(--active);border:2px solid var(--bg-el);border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;z-index:5;pointer-events:auto;transition:box-shadow .2s}#filter-price .slider-container .slider-thumb:hover{box-shadow:0 0 8px #0003}#filter-price .slider-container .slider-thumb.min-thumb{left:0}#filter-price .slider-container .slider-thumb.max-thumb{left:100%}
