.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(--branco);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,#004d4600 50%);border-radius:.75rem}}& aside{display:flex;align-items:center;gap:.5rem;.close-btn svg:hover{scale:105%}.close-btn svg:hover path{fill:var(--urb-600)}}.results-message{display:flex;flex-direction:column;gap:.25rem;& h4{color:var(--cinza-600);font-size:1rem;font-weight:600;& span{color:var(--urb-500)}}& p{color:var(--cinza-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(--cinza-500);transition:.3s ease-out}&:has(+input:focus)>path{fill:var(--urb-500)}}>input{cursor:text;background:#ffffffbf;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(--cinza-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(--urb-500)}}.product-search.active{svg{& path{fill:var(--urb-600)}}>input{color:var(--urb-600);background:var(--urb-100);border:1px solid var(--urb-500);&:hover{background:var(--urb-50)}}}.search-results{position:absolute;top:2.5rem;display:flex;flex-direction:column;gap:2px;min-width:100%;padding:.25rem;background-color:var(--branco);border:1px solid var(--cinza-200);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(--cinza-600);cursor:pointer;transition:.3s ease-out;& span{color:var(--cinza-400);font-size:.75rem}&:hover,&.selected{background-color:var(--cinza-100);>svg>path{fill:var(--urb-500);transition:.3s ease-out}}>svg{height:.875rem;width:.875rem;transform:translateY(2px);cursor:text;>path{fill:var(--cinza-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(--cinza-400);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(--cinza-600);font-size:1.25rem;font-weight:600;& span{color:var(--urb-500)}}& p{max-width:22rem;color:var(--cinza-500);font-size:1rem;font-weight:500}}}}>hgroup{display:flex;flex-direction:column;gap:.25rem;& h4{color:var(--cinza-600);font-size:1rem;font-weight:600;& span{color:var(--urb-500)}}& p{color:var(--cinza-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(--cinza-400);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(--cinza-600);font-size:1.25rem;font-weight:600;& span{color:var(--urb-500)}}& p{max-width:22rem;color:var(--cinza-500);font-size:1rem;font-weight:500}}}}>hgroup{display:flex;flex-direction:column;gap:.25rem;& h4{color:var(--cinza-600);font-size:1rem;font-weight:600;& span{color:var(--urb-500)}}& p{color:var(--cinza-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:3;background:#ebebeb99;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);>div{position:relative;background-color:var(--branco);padding:1.5rem;border-radius:.75rem;box-shadow:var(--shadow2);transition:.3s ease-out;opacity:0;transform:translateY(40px);>button{position:absolute;right:1.5rem;height:1.25rem;width:1.25rem}&:hover{scale:100.5%}}}.letmeknow-form{display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center;margin-top:1.5rem;>p{font-size:1rem;font-weight:500;color:var(--cinza-600);text-align:center;max-width:20rem;margin-top:.5rem;>span{color:var(--urb-500)}}>form{display:flex;flex-direction:column;gap:.75rem;width:24rem;>div{display:flex;gap:.5rem}.input-wrapper{display:flex;flex-direction:column;gap:.25rem;width:100%;& label{font-size:.75rem;font-weight:500;color:var(--cinza-500)}& input{font-size:.875rem;font-weight:400;color:var(--cinza-700);width:100%;padding:.5rem 1rem;background:var(--cinza-50);border:1px solid var(--cinza-200);border-radius:.375rem;transition:.3s ease-out}}}}.letmeknow-submitted{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.875rem;>div{display:flex;flex-direction:column;gap:1rem;& p{font-size:1rem;font-weight:500;color:var(--cinza-600);text-align:center;max-width:25rem;>span{color:var(--urb-500)}}}}@media (max-width: 768px){.letmeknow-popup{align-items:end;justify-content:center;padding:.25rem;>div{padding:1.5rem;border-radius:2rem;width:100%;box-shadow:var(--shadow1);transform:translateY(100%);&:before{content:"";display:inline-block;width:2rem;height:.25rem;border-radius:.25rem;background-color:var(--cinza-300);position:absolute;top:.75rem;left:50%;transform:translate(-50%);z-index:4}}}.letmeknow-form{gap:1.5rem;>form{width:100%;gap:1.5rem;.input-wrapper input{font-size:1rem}& button{font-size:1rem;padding-block:.75rem;border-radius:1.5rem}}}}