#wrapper > .container { width: 100%; }
#wrapper, #content-wrapper { padding: 0; }
#content-wrapper > img { width: 100%; }
h1 { width: 800px; max-width: 100%; text-align: center; margin: 50px auto; padding: 0 15px; }

/* Description */
#short p { margin: auto; width: 800px; max-width: 100%; }
#short p { font-size: clamp(12pt, 2.5vw, 13pt); line-height: 1.7; text-align: center; }

/* Products */
#products { margin: 50px auto 70px; }
#products ul { display: flex; flex-wrap: nowrap; gap: 25px; justify-content: center; width: 930px; margin: auto; max-width: 100%; }
#products li { width: calc( ( 100% - 30px ) / 3 ); }
#products li > div { position: relative; display: block; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px 1px rgba(0, 0, 0, .1); text-align: center; font-weight: 400; font-size: 10.5pt; color: #7a7a7a; }
#products li > div div { padding: 13px; }
#products li p { font-weight: 700; font-size: 12pt; line-height: 1.4; text-align: center; text-transform: uppercase; width: auto; margin: 0 0 22px; }
#products h4 { font-size: .875rem; font-weight: 400; color: #7a7a7a; }
#products a { margin: 10px 0 0; font-size: clamp( 9pt, 2.5vw, 10pt ); }
#products .price { display: block; color: #4cbb6c; font-size: 12pt; font-weight: 700; }
#products del { font-size: 11pt; color: #7a7a7a; }
#products em { position: absolute; top: 0; left: 0; background: #f39d72; padding: 3px 5px; color: #fff; font-style: normal; font-size: 9pt; font-weight: 700; width: max-content; max-width: 100%; }
#products img { width: 100%; }

/* Form */
#contact { background: url( '../../views/images/pages/nextwav/bg/contact.webp' ) no-repeat center/cover fixed; padding: 100px 0; box-shadow: inset 0 6px 10px 4px #00000040; }
#contact h3 { font-size: 14pt; }
#contact section { overflow: hidden; display: flex; background: #f0f0f0; box-shadow: 0 2px 12px 1px rgba( 0, 0, 0, .1 ); border-bottom: 3px solid #212386; border-radius: 7px / 6px; width: 900px; max-width: 90%; margin: auto; }
#contact form { align-items: start; padding: 26px 40px 30px; background: #fff; display: flex; flex-wrap: wrap; gap: 20px 30px; width: 50%; text-align: center; justify-content: left; }
#contact form h3 { width: 100%; margin: 0 0 3px; }
.result { flex: 0 100%; display: none; }
#contact .result p { margin: 0 0 10px; }
#contact .result div > *:last-child { margin-bottom: 0; }
#contact .result .success { margin: 0; }
#contact .line { width: calc( ( 100% - 30px ) / 2 ); margin: 0; }
#contact .line select { padding: 6.5px 7px; }
#required-field { display: flex; align-items: start; gap: 7px; }
#required-field input { position: relative; top: 3px; cursor: pointer; }
#required-field label { cursor: pointer; text-align: left; font-size: 9pt; }
#contact section > div { width: 50%; padding: 26px 40px 30px; }
#contact [type="submit"] { margin: auto; }
#emails { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 20px; }
#emails a { flex: 0 180px; font-size: 11pt; }
#emails i { font-size: 12pt; }
#stores { font-size: 10.4pt; }
#stores li + li { margin-top: 10px; }
#contact .icon:before { font-size: 22pt; }

@media (max-width: 800px) {
    #products ul { flex-wrap: wrap; }
    #products li { width: calc( ( 100% - 25px ) / 2 ); }
}

@media (max-width: 767px) {
    #contact { padding: 50px 0; }
    #contact section { flex-direction: column; }
    #contact form, #contact section > div { width: 100%; }
}

@media (max-width: 550px) {
    h1 { font-size: 18pt; margin: 30px auto; }

    #products { margin: 50px auto; }
    #products ul { width: 270px; gap: 25px;  }
    #products li { width: 100%; }
    
    #contact .line { width: 100%; }
    #contact section { max-width: 95%; }
    #contact form, #contact section > div { padding: 20px; }
}

@media (max-width: 480px) {
    #products { margin: 30px auto 50px; }
    #products li { width: 100%; }
}