.products-page{flex-direction:column;gap:2rem;display:flex;&>picture{position:relative;& h1{color:var(--neutral-white);z-index:1;padding-inline:4rem;font-size:2rem;font-weight:600;position:absolute;top:50%;transform:translateY(-50%)}& img{object-fit:cover;border-radius:.75rem;width:100%}&:after{content:"";background:linear-gradient(3.5deg, #004d46 0%, hsl(var(--c-brand-100) / 0) 50%);border-radius:.75rem;width:100%;height:100%;position:absolute;top:0}}& aside{align-items:center;gap:.5rem;height:3rem;display:flex}& .results-message{flex-direction:column;gap:.25rem;display:flex;& h4{color:var(--neutral-600);font-size:1rem;font-weight:600;& span{color:var(--green-500)}}& p{color:var(--neutral-500);font-size:.875rem;font-weight:500}}}@media (width<=912px){.products-page>picture{& h1{padding-inline:1rem}}}@media (width<=768px){.products-page{&>picture{justify-content:center;height:6rem;display:flex;& h1{font-size:1.3rem}& img{object-fit:cover;height:6rem}}}}@media (width<=640px){.products-page{&>picture{justify-content:center;height:6rem;display:flex;& h1{font-size:1.3rem}& img{object-fit:cover;height:6rem}}}}.product-search{align-items:center;height:100%;display:flex;position:relative;&>svg{z-index:1;cursor:text;width:.875rem;height:.875rem;position:absolute;left:1rem;&>path{fill:var(--neutral-500);transition:all .3s ease-out}&:has(+input:focus)>path{fill:var(--green-500)}}&>input{cursor:text;background:hsl(var(--c-neutral-white) / .75);width:25rem;height:100%;color:var(--neutral-600);border:1px solid #e6e6e6;border-radius:1.5rem;padding:.875rem .5rem .875rem 3.25rem;font-size:1rem;font-weight:500;transition:all .3s ease-out;&::placeholder{background:linear-gradient(90.47deg,#646b6b 19.42%,#429184 69.23%);-webkit-text-fill-color:transparent;text-fill-color:transparent;background-clip:text;font-size:1rem;font-weight:500}}&:hover>svg>path{fill:var(--green-500)}}.product-search.active{& svg{& path{fill:var(--green-600)}}&>input{color:var(--green-600);background:var(--green-100);border:1px solid var(--green-500);&:hover{background:var(--green-50)}}}.search-results{background-color:var(--neutral-white);border:1px solid var(--neutral-90);min-width:100%;box-shadow:var(--shadow2);z-index:3;border-radius:.5rem;flex-direction:column;gap:2px;padding:.25rem;display:flex;position:absolute;top:2.5rem;&>li{color:var(--neutral-600);cursor:pointer;border-radius:.25rem;gap:.5rem;padding:.5rem .625rem;font-size:.875rem;font-weight:500;transition:all .3s ease-out;display:flex;& span{color:var(--neutral-300);font-size:.75rem}&:hover,&.selected{background-color:var(--neutral-60);&>svg>path{fill:var(--green-500);transition:all .3s ease-out}}&>svg{cursor:text;width:.875rem;height:.875rem;transform:translateY(2px);&>path{fill:var(--neutral-500);transition:all .3s ease-out}}}}@media (width<=540px){.product-search{width:100%;&>input{width:100%;padding:.875rem .5rem .875rem 2.5rem;&::placeholder{font-size:.875rem}}}}.no-results{flex-direction:column;gap:1.5rem;width:100%;display:flex;&>div{border:1px dashed var(--neutral-300);border-radius:1rem;justify-content:center;align-items:center;gap:2rem;width:100%;height:17.5rem;padding:1rem;display:flex;&>div{flex-direction:column;align-items:start;gap:.75rem;display:flex;& hgroup{flex-direction:column;gap:.5rem;display:flex;& h4{max-width:20rem;color:var(--neutral-600);font-size:1.25rem;font-weight:600;& span{color:var(--green-500)}}& p{max-width:22rem;color:var(--neutral-500);font-size:1rem;font-weight:500}}}}&>hgroup{flex-direction:column;gap:.25rem;display:flex;& h4{color:var(--neutral-600);font-size:1rem;font-weight:600;& span{color:var(--green-500)}}& p{color:var(--neutral-500);font-size:.875rem;font-weight:500}}}.no-results-near{flex-direction:column;gap:1.5rem;display:flex;&>div{border:1px dashed var(--neutral-300);border-radius:1rem;justify-content:center;align-items:center;gap:2rem;width:100%;height:17.5rem;padding:1rem;display:flex;&>div{flex-direction:column;align-items:start;gap:.75rem;display:flex;& hgroup{flex-direction:column;gap:.5rem;display:flex;& h4{max-width:20rem;color:var(--neutral-600);font-size:1.25rem;font-weight:600;& span{color:var(--green-500)}}& p{max-width:22rem;color:var(--neutral-500);font-size:1rem;font-weight:500}}}}&>hgroup{flex-direction:column;gap:.25rem;display:flex;& h4{color:var(--neutral-600);font-size:1rem;font-weight:600;& span{color:var(--green-500)}}& p{color:var(--neutral-500);font-size:.875rem;font-weight:500}}}.letmeknow-popup{z-index:8;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0;&>div{background-color:var(--neutral-30);border:1px solid var(--neutral-120);opacity:0;border-radius:1.5rem;padding:1.25rem;position:relative;transform:translateY(40px);&>button{height:1rem;position:absolute;right:1rem}}}.letmeknow-form{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;margin-top:1rem;display:flex;& hgroup{flex-direction:column;align-items:center;gap:.5rem;display:flex;&>p{color:var(--neutral-600);text-align:center;max-width:20rem;font-size:1rem;font-weight:500;&>span{color:var(--green-600);font-weight:600}}}&>form{flex-direction:column;gap:.5rem;width:24rem;display:flex;&>.form-row{gap:.5rem;display:flex}& button{margin-top:1.25rem}}}.letmeknow-submitted{flex-direction:column;justify-content:center;align-items:center;gap:.875rem;display:flex;&>div{flex-direction:column;gap:1.25rem;display:flex;& p{color:var(--neutral-600);text-align:center;max-width:25rem;font-size:1rem;font-weight:500;&>span{color:var(--green-600)}}}}@media (width<=768px){.letmeknow-popup{justify-content:center;align-items:end;padding:.25rem;&>div{width:100%;box-shadow:var(--shadow1);border-radius:2.25rem;padding:1.25rem;transform:translateY(100%);&:before{content:"";background-color:var(--neutral-200);z-index:4;border-radius:.25rem;width:2rem;height:.25rem;display:inline-block;position:absolute;top:.75rem;left:50%;transform:translate(-50%)}}}.letmeknow-form{gap:1.5rem;&>form{gap:1.5rem;width:100%;& button{border-radius:1.5rem;padding-block:.75rem;font-size:1rem}}}}