#bbq-grill-finder { width: 100%; padding: 20px 0; position: relative; z-index: 99999; overflow: visible; } .bbq-finder-box { max-width: 900px; margin: 0 auto; padding: 30px; border: 1px solid #dddddd; border-radius: 8px; background: #ffffff; position: relative; z-index: 99999; overflow: visible; } .bbq-finder-box h2 { margin-top: 0; margin-bottom: 10px; text-align: center; } .bbq-finder-box > p { margin-bottom: 22px; text-align: center; } .bbq-search-row { display: flex; gap: 10px; position: relative; z-index: 100000; overflow: visible; } #bbqModelSearch { flex: 1; min-width: 0; padding: 14px; border: 1px solid #999999; border-radius: 4px; font-size: 16px; } #bbqSearchButton { padding: 14px 24px; border: 0; border-radius: 4px; background: #c8102e; color: #ffffff; font-size: 16px; font-weight: 700; cursor: pointer; } #bbqSearchButton:hover { background: #a30d25; } #bbqSearchButton:disabled { opacity: 0.65; cursor: wait; } #bbqSuggestions { position: relative; z-index: 100001; overflow: visible; } /* The JavaScript appends this list directly to and positions it under the input. This keeps it above Page Builder image/link widgets and other stacking contexts. */ .bbq-suggestion-list { position: fixed !important; z-index: 2147483647 !important; max-height: 350px; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; background: #ffffff; border: 1px solid #cccccc; border-radius: 4px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.30); list-style: none; -webkit-overflow-scrolling: touch; } .bbq-suggestion-item { padding: 12px 14px; border-bottom: 1px solid #eeeeee; background: #ffffff; cursor: pointer; } .bbq-suggestion-item:last-child { border-bottom: 0; } .bbq-suggestion-item:hover, .bbq-suggestion-item.bbq-suggestion-active { background: #f5f5f5; } #bbqSearchMessage { margin-top: 20px; } .bbq-error-message, .bbq-loading-message { padding: 15px; border-radius: 4px; } .bbq-error-message { border: 1px solid #c8102e; background: #fff5f6; color: #9e0b22; } .bbq-loading-message { border: 1px solid #dddddd; background: #fafafa; color: #444444; } .bbq-grill-result { display: grid; grid-template-columns: minmax(250px, 45%) 1fr; gap: 30px; align-items: center; margin-top: 25px; padding: 25px; border: 1px solid #dddddd; border-radius: 8px; background: #ffffff; } .bbq-grill-result.bbq-no-image { display: block; } .bbq-grill-image-wrap { text-align: center; } .bbq-grill-image { display: block; width: 100%; max-width: 500px; height: auto; margin: 0 auto; object-fit: contain; } .bbq-grill-details h3 { margin-top: 0; margin-bottom: 10px; font-size: 26px; } .bbq-model-number { margin: 6px 0; font-weight: 700; } .bbq-shop-button { display: inline-block; margin-top: 15px; padding: 13px 22px; border-radius: 4px; background: #c8102e; color: #ffffff !important; font-weight: 700; text-decoration: none; } .bbq-shop-button:hover { background: #a30d25; color: #ffffff !important; } @media (max-width: 700px) { .bbq-finder-box { padding: 20px; } .bbq-search-row { display: block; } #bbqModelSearch, #bbqSearchButton { width: 100%; box-sizing: border-box; } #bbqSearchButton { margin-top: 10px; } .bbq-grill-result { display: block; } .bbq-grill-details { margin-top: 22px; text-align: center; } .bbq-suggestion-list { max-height: 280px; } }