.product{position:relative;height:473px}.product:hover{z-index:2}.product .content{display:flex;flex-direction:column;width:100%;min-height:100%;box-sizing:border-box;padding:20px;background-color:#fff;border:1px solid white;border-radius:12px;box-shadow:0 2px 10px var(--light-shadow)}.product:hover .content{height:fit-content;height:-moz-fit-content;border:1px solid var(--very-light-gray);box-shadow:0 0 10px var(--light-shadow)}.product a{flex-grow:1;display:flex;flex-direction:column;width:100%;color:#000;text-decoration:none}.discount-ticket{position:absolute;top:20px;left:-9px;background-color:var(--red);font-family:sans-serif;color:#fff;padding:2px 2px 2px 10px;font-size:14px;height:21.7px;z-index:1;box-shadow:1px 2px 2px var(--average-shadow)}.discount-ticket:before{content:"";position:absolute;left:0;bottom:0;border:6.4px solid transparent;border-bottom-color:#560000;transform:translate(0) translateY(-.1px) rotate(45deg);transform-origin:left bottom}.discount-ticket span{position:absolute;top:0;right:-26px;width:26px;height:27px;overflow:hidden;z-index:1}.discount-ticket span:after{content:"";position:absolute;border:9px solid transparent;border-right-color:var(--red);border-top-color:var(--red);top:0;left:0;transform-origin:left top;transform:rotate(45deg);box-shadow:2px 0 2px var(--average-shadow)}.product .image{position:relative;width:100%;padding-bottom:100%;margin-bottom:20px}.product .image img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:100%;max-height:100%}.product .title{margin-bottom:10px}.product .title h4{--lines: 2;margin-bottom:5px}.product .title .barcode-details{display:flex;flex-wrap:wrap;gap:5px 20px}.product .unity{width:100%}.product:not(:hover) .unity,.product:not(:hover) .note,.product:not(:hover) .card-actions{display:none}.product:not(:hover) .title p{--lines: 1}.product .title p{color:#708090;font-size:.9rem}.product .note{color:#2f4f4f;font-size:.9rem}.product a p:empty{display:none}.product:not(:hover) .pricing{margin-top:auto}.product .pricing{display:flex;flex-direction:column;align-items:flex-start;justify-self:flex-end;gap:2px;margin-top:10px;padding:10px 15px;background:var(--platin-white);border-radius:8px}.product .price{display:flex;align-items:baseline}.product .price.secondary{position:relative;gap:5px;color:#789}.product .price.secondary:after{content:"";position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;border-bottom:1px solid lightslategray}.product .price.secondary span{font-size:.8rem}.product .price.main{gap:6px;color:var(--price-color);font-weight:700}.product .price.main p{font-size:1.4rem}.product:not(:hover) .product-warning{display:none}.product .product-warning{display:flex;align-items:baseline;gap:10px;margin-top:10px;padding:5px 15px;background:var(--platin-white);border-radius:8px;font-size:14px}.product .product-warning i{color:var(--warning)}.product .product-warning p{margin:0}.product .card-actions{display:flex;align-items:center;gap:15px;margin-top:20px}.product .compare{position:relative;width:24px;height:24px;cursor:pointer}.product .compare img{position:absolute;top:50%;left:0;transform:translateY(-50%);max-width:100%}.product .card-actions button{flex-grow:1;position:relative;-webkit-user-select:none;user-select:none}.product.adding .card-actions button{pointer-events:none}.product.adding .card-actions button p{opacity:0}.product:not(.adding) .card-actions button .spinner{display:none}.product .card-actions button .spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(0);width:24px;height:24px;box-sizing:border-box;border:3px solid white;border-block-color:rgba(255 255 255 / .5);border-radius:50%;animation:spinner .6s linear infinite}@keyframes spinner{to{transform:translate(-50%,-50%) rotate(360deg)}}.product .like i{font-size:24px;color:var(--red);cursor:pointer}.product .like i.pop{animation:pop-out .2s ease}@keyframes pop-out{0%{transform:scale(1)}50%{transform:scale(1.5)}to{transform:scale(1)}}@media (max-width: 1399px){.product .card-actions button{font-size:.9rem;padding-inline:10px}}@media (min-width: 1200px){.product{width:calc(25% - 15px)}}@media (max-width: 1199px){.product{width:calc((100% - 40px) / 3)}}@media (min-width: 1000px){.product .card-actions button p:last-of-type{display:none}}@media (max-width: 999px){.product .card-actions button p:not(:last-of-type){display:none}}@media (max-width: 679px){.product{width:calc(50% - 10px)}}@media (max-width: 519px){.view-content main{width:100%}.product{width:calc(50% - 5px);height:369px}.product:not(:hover) .content{box-shadow:none}.product .content{padding:5px}.product .image{margin-bottom:10px;border-radius:10px;overflow:hidden}.product .title h4{font-weight:400}.product details,.product .note{padding-inline:5px}.product .card-actions{padding-inline-start:5px}}@media (max-width: 399px){.products{gap:5px}}.filter-menu .categories{-webkit-user-select:none;user-select:none}.filter-menu .categories .title{display:flex;align-items:center;gap:20px;margin-bottom:10px}.filter-menu .categories .title h3{font-weight:400;color:var(--primary)}.filter-menu .categories .title span{--size: 32px;position:relative;width:var(--size);height:var(--size);min-width:var(--size);min-height:var(--size);background:var(--platin-white);color:var(--primary);border-radius:8px}.filter-menu .categories .title span i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.filter-menu .categories .body{display:flex;flex-direction:column;gap:10px}.filter-menu .category:not(.active)>.children,.filter-menu .child:not(.active)>.children{display:none}.filter-menu .categories .children{display:flex;flex-direction:column;gap:5px;margin-block:10px;margin-inline-start:15px;border-inline-start:2px solid var(--very-light-gray);padding-inline-start:15px}.filter-menu .category .name{display:flex;align-items:center;cursor:pointer}.filter-menu .child .name span:empty{display:none}.filter-menu .category .name span{width:32px;height:20px;text-align:center;transition:transform .2s ease}.filter-menu .active>.name span{transform:rotate(-90deg)}.filter-menu .category a{color:#000;text-decoration:none}.filter-menu .category a:hover{text-decoration:underline}.filters .selected h4{margin-bottom:10px}.filters .selected li{list-style-type:none;display:flex;align-items:flex-start;justify-content:space-between;padding-block:10px;padding-inline:11px 15px;background:var(--platin-white);border-radius:19px}.filters .selected li:not(:last-of-type){margin-bottom:10px}.filters .selected li p{margin-inline-end:10px;color:var(--dark-gray);font-size:13px;white-space:break-spaces}.filters .selected li p b{color:#000}.filters .selected li span{position:relative;display:block;width:16px;height:16px;min-width:16px;min-height:16px;margin-top:1px;border-radius:50%;transition:background-color .1s ease-in-out;cursor:pointer}.filters .selected li span:hover{background-color:var(--light-gray)}.filters .selected li span:before,.filters .selected li span:after{content:"";position:absolute;top:50%;left:50%;width:1px;height:10px;background:var(--dark-gray)}.filters .selected li span:before{transform:translate(-50%,-50%) rotate(-45deg)}.filters .selected li span:after{transform:translate(-50%,-50%) rotate(45deg)}.filter:not(:nth-last-of-type(2)){padding-bottom:20px;border-bottom:1px solid var(--very-light-gray);margin-bottom:20px}.filter.list h4{margin-top:0;margin-bottom:10px}.filter .search{display:flex;align-items:center;background-color:var(--platin-white);border-radius:8px}.filter .search{margin-bottom:10px}.filter .search i{margin-inline-start:10px;font-size:14px;color:var(--dark-gray)}.filter input{flex-grow:1;padding:8px 15px;background:transparent;border:none;font-size:15px;font-family:var(--default-font)}.filter p{margin:0;font-size:14px}.filter p a{color:#000;text-decoration:none}.filter.list ul,.filters .selected ul{margin:0;padding:0;max-height:175px;overflow-y:auto}.filter.list li{display:flex;align-items:center;padding:8px 10px;list-style-type:none;cursor:pointer}.filter.list li.hide{display:none}.filter.list span{position:relative;display:block;width:16px;height:16px;min-width:16px;min-height:16px;margin-inline-end:10px;background-color:var(--very-light-gray);border-radius:4px;transition:background-color .1s ease-in-out}.filter.list li.active span{background-color:var(--primary)}.filter.list li.active span:after{content:"";position:absolute;left:50%;top:45%;transform:translate(-50%,-50%) rotate(45deg);width:3px;height:7px;border-bottom:2px solid white;border-right:2px solid white}.filters .actions{position:sticky;position:-webkit-sticky;bottom:20px;display:flex;gap:20px;margin-top:40px;background:white}.filters .actions:before{content:"";position:absolute;top:0;left:0;width:100%;height:40px;transform:translateY(-100%);background:linear-gradient(0,white,transparent)}.filters .actions:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:20px;transform:translateY(100%);background:white}.filters .actions .primary-button{flex-grow:1}.filters .actions .secondary-button:not(.show){display:none}.filter:first-of-type{margin-top:20px;border-top:1px solid var(--very-light-gray);padding-top:20px}.filters .selected{margin:20px 0;padding:20px 0;border:1px solid var(--very-light-gray);border-left:none;border-right:none}.breadcrumbs{margin-bottom:20px}.breadcrumbs ul{display:flex;margin:0;padding:0}.breadcrumbs li{margin-inline-end:10px;list-style-type:none}.breadcrumbs li:not(:last-of-type):after{font-family:tajawal-regular}.ltr .breadcrumbs li:not(:last-of-type):after{content:"\\"}.rtl .breadcrumbs li:not(:last-of-type):after{content:"/"}.breadcrumbs li a{margin-inline-end:5px;color:#000;text-decoration:none;white-space:nowrap;transition:color .1s ease-in-out}.breadcrumbs li a:hover{color:var(--primary-hover);text-decoration:underline}.breadcrumbs li.active a{color:var(--primary)}.layout-container{background:var(--platin-white)}.view-container{padding-bottom:200px}.view-content{display:flex;gap:20px}.filter-menu{align-self:flex-start;background:white;width:260px;min-width:260px;box-sizing:border-box;padding:20px;border-radius:12px;box-shadow:0 5px 20px var(--lighter-shadow)}.view-content main{flex-grow:1;display:flex;flex-direction:column;gap:20px}.view-content .head{display:flex;align-items:center;justify-content:space-between;padding:20px;background:white;border-radius:12px}.view-content .head .category{display:flex;align-items:center;gap:20px}.view-content .head .category span{--size: 40px;position:relative;display:flex;width:var(--size);height:var(--size);min-width:var(--size);min-height:var(--size);background:var(--platin-white);border-radius:50%}.view-content .head .category span i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--primary)}.sort-options{position:relative;-webkit-user-select:none;user-select:none}.sort-options .current{display:flex;gap:5px;padding:10px 20px;background-color:var(--platin-white);border-radius:8px;transition:background-color .2s ease;cursor:pointer}.sort-options .current:hover{background-color:var(--very-light-gray)}.sort-options .selected{display:flex;gap:10px}.sort-options:not(.active) ul{display:none}.sort-options ul{position:absolute;bottom:0;transform:translateY(100%);margin:0;padding:5px;background-color:#fff;border-radius:10px;box-shadow:0 2px 10px var(--medium-shadow);z-index:10}.sort-options li{list-style-type:none;display:flex;align-items:center;gap:10px;padding:7px 15px;text-decoration:none;color:#2f4f4f;border-radius:5px;transition:background-color .2s ease;cursor:pointer}.sort-options li:hover{background-color:var(--average-platin-white)}.products{display:flex;flex-wrap:wrap;gap:20px}.products-spinner{align-self:center;display:block;width:40px;height:40px;box-sizing:border-box;border:4px solid var(--primary);border-block-color:rgba(var(--primary-rgb),.2);border-radius:50%;animation:products-spinner .6s linear infinite}.products-spinner:not(.show){display:none}@keyframes products-spinner{to{transform:rotate(360deg)}}@media (max-width: 1399px){.layout-container{padding-top:0}}@media (min-width: 1000px){.view-content .head .category .filter-toggle{display:none}}@media (max-width: 999px){.ltr .filter-menu{--dir: -1;left:20px}.rtl .filter-menu{--dir: 1;right:20px}.filter-menu:not(.show){transform:translate(calc(var(--dir) * (100% + 40px)))}.filter-menu{position:fixed;top:var(--sticky-pin-distance);height:calc(100% - var(--sticky-pin-distance) - 20px);padding-bottom:0;overflow-y:auto;transition:transform .3s ease;z-index:100}}@media (max-width: 799px){.view-content .head{flex-direction:column;align-items:flex-start;gap:20px}}@media (min-width: 520px){.view-content .head{box-shadow:0 2px 10px var(--lighter-shadow)}}@media (max-width: 519px){.view-container{width:calc(100% - 20px);padding-inline:10px}.view-content main{gap:10px}.view-content .head{align-items:stretch;gap:15px;padding:15px 10px 10px}.view-content .head .category span{--size: 34px;font-size:.9rem}.view-content .head h4{font-weight:400;font-size:.9rem}.sort-options .selected,.sort-options .selected p{flex-grow:1}.products{gap:10px}}