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