/* Fresh Filter Landing Builder — front-end landing styles.
   Neutral defaults that inherit the active theme's container/typography. */

.ffl-page { --ffl-cta: #2a9244; }
.ffl-page .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Google Ads mode: strip distracting nav, keep the header/logo. */
.ffl-google-ads .ffs-primary-nav,
.ffl-google-ads .ffs-topbar__nav,
.ffl-google-ads .site-footer nav,
.ffl-google-ads .ffs-mobile-bottom-nav { display: none !important; }

/* Buttons — hover never underlines; it changes fill / border instead. */
.ffl-btn { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; border-radius: 8px; padding: .8rem 1.4rem; text-decoration: none; line-height: 1.1; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.ffl-btn:hover, .ffl-btn:focus { text-decoration: none; }
.ffl-btn--cta { background: var(--ffl-cta); color: #fff; border: 2px solid var(--ffl-cta); }
.ffl-btn--cta:hover { background: #1266d6; border-color: #1266d6; color: #fff; }
.ffl-btn--ghost { background: #fff; color: #1266d6; border: 2px solid #cfd8e3; }
.ffl-btn--ghost:hover { background: #1266d6; border-color: #1266d6; color: #fff; }

/* Hero — white background with a large sky-blue circle behind the product. */
.ffl-hero { background: #fff; padding: 3rem 0; }
.ffl-hero__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; }
.ffl-hero__title { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.1; color: #0b1f3a; margin: 0 0 1rem; }
.ffl-hero__intro { color: #45525f; font-size: 1.05rem; margin-bottom: 1.4rem; }
.ffl-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.4rem; }
.ffl-hero__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; padding: 0; margin: 0; color: #5a6b7b; font-size: .85rem; font-weight: 600; }
.ffl-hero__trust li { display: inline-flex; align-items: center; gap: .45rem; }
.ffl-hero__trust .ffl-ico { color: #1266d6; }
.ffl-hero__media { position: relative; display: flex; align-items: center; justify-content: center; }
.ffl-hero__blob { position: absolute; z-index: 0; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #d7ecff 0%, #cfe6ff 55%, #c3ddff 100%); }
.ffl-hero__img { position: relative; z-index: 1; max-width: 100%; height: auto; }

/* Sections */
.ffl-section { padding: 2.6rem 0; }
.ffl-section--alt { background: #f7f9fc; }
.ffl-section__title { text-align: center; font-size: 1.6rem; color: #0b1f3a; margin: 0 0 1.5rem; }
.ffl-section__title--sm { font-size: 1.15rem; }
.ffl-section__bar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.2rem; }
.ffl-section__bar .ffl-section__title { text-align: left; margin: 0; }
.ffl-section__link { color: #1266d6; font-weight: 700; text-decoration: none; }

/* Compatibility strip — uniform white logo cards. */
.ffl-compat__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 0; margin: 0; }
.ffl-compat__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; width: 160px; height: 80px; padding: 12px 18px; box-shadow: 0 1px 2px rgba(16,24,40,.04); overflow: hidden; }
.ffl-brand { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* Element-level + !important so a large source image is always sized down and
   uniform, regardless of the theme's own img rules. */
.ffl-compat .ffl-compat__item img { max-width: 120px !important; max-height: 48px !important; width: auto !important; height: auto !important; object-fit: contain; display: block; }
.ffl-brand--placeholder { font-weight: 800; color: #33475b; font-size: .95rem; text-align: center; }

/* Product grid (falls back when theme card missing) */
.ffl-products { list-style: none; display: grid; gap: 20px; padding: 0; margin: 0; grid-template-columns: repeat(2, 1fr); }
.ffl-products.columns-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 782px) {
	.ffl-products { grid-template-columns: repeat(5, 1fr); }
	.ffl-products.columns-4 { grid-template-columns: repeat(4, 1fr); }
}
.ffl-product { background: #fff; border: 1px solid #e6e9ef; border-radius: 10px; padding: 12px; text-align: left; }
.ffl-product img { width: 100%; height: auto; border-radius: 6px; }
.ffl-product__title { display: block; font-weight: 700; color: #16324f; margin: .5rem 0 .25rem; font-size: .92rem; }
.ffl-product__price { display: block; font-weight: 800; color: #0b1f3a; }

/* Benefits */
.ffl-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 782px) { .ffl-benefits { grid-template-columns: repeat(4, 1fr); } }
.ffl-benefit { background: #fff; border: 1px solid #e6e9ef; border-radius: 10px; padding: 1.4rem 1.2rem; text-align: center; }
.ffl-benefit__ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #eaf3ff; color: #1266d6; margin-bottom: .7rem; }
.ffl-benefit strong { display: block; color: #0b1f3a; margin-bottom: .4rem; }
.ffl-benefit span { color: #56636f; font-size: .9rem; }

/* Comparison table — bordered, each MERV column tinted (Good/Better/Best). */
.ffl-table-wrap { overflow-x: auto; border: 1px solid #dbe2ea; border-radius: 12px; }
.ffl-compare { width: 100%; border-collapse: collapse; background: #fff; min-width: 560px; }
.ffl-compare th, .ffl-compare td { border: 1px solid #e6e9ef; padding: .85rem 1rem; text-align: center; }
.ffl-compare th:first-child, .ffl-compare td:first-child { text-align: left; color: #33475b; font-weight: 600; }
.ffl-compare thead th { color: #0b1f3a; font-size: 1.02rem; }
/* Column tints: MERV 8 green, 11 blue, 13 purple. */
.ffl-compare thead th:nth-child(2) { background: #eaf7ee; }
.ffl-compare thead th:nth-child(3) { background: #eaf1fd; }
.ffl-compare thead th:nth-child(4) { background: #f1ecfb; }
.ffl-compare tbody td:nth-child(2) { background: #f6fbf8; }
.ffl-compare tbody td:nth-child(3) { background: #f6f9fe; }
.ffl-compare tbody td:nth-child(4) { background: #faf8fe; }
.ffl-compare__badge { display: inline-block; font-size: .68rem; padding: .12rem .55rem; border-radius: 999px; margin-left: .4rem; color: #fff; vertical-align: middle; }
.ffl-compare thead th:nth-child(2) .ffl-compare__badge { background: #2a9244; }
.ffl-compare thead th:nth-child(3) .ffl-compare__badge { background: #1266d6; }
.ffl-compare thead th:nth-child(4) .ffl-compare__badge { background: #7c4dd1; }
.ffl-compare__merv.is-current { outline: 2px solid #1266d6; outline-offset: -2px; }
.ffl-yes { color: #2a9244; font-weight: 800; }
.ffl-no { color: #9aa7b4; }

/* Reviews */
.ffl-reviews { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 782px) { .ffl-reviews { grid-template-columns: repeat(3, 1fr); } }
.ffl-review { background: #fff; border: 1px solid #e6e9ef; border-radius: 10px; padding: 1.2rem; margin: 0; }
.ffl-review__stars { color: #f5a623; }
.ffl-review cite { display: block; margin-top: .6rem; font-weight: 700; color: #33475b; font-style: normal; }

/* FAQ */
.ffl-faq { max-width: 900px; margin: 0 auto; }
.ffl-faq__item { background: #fff; border: 1px solid #e6e9ef; border-radius: 8px; padding: .9rem 1.1rem; margin-bottom: .6rem; }
.ffl-faq__item summary { cursor: pointer; font-weight: 700; color: #16324f; }
.ffl-faq__a { color: #56636f; margin-top: .5rem; }

/* Buying guide prose */
.ffl-prose { max-width: 900px; margin: 0 auto; }
.ffl-prose h3 { color: #0b1f3a; margin: 1.4rem 0 .4rem; }
.ffl-prose p { color: #45525f; }

/* Final CTA banner — product image + trust badges + button. */
.ffl-cta-banner { background: #1266d6; color: #fff; padding: 2rem 0; }
.ffl-cta-banner__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.ffl-cta-banner__media { flex: 0 0 auto; }
.ffl-cta-banner__media img { display: block; max-height: 120px; width: auto; border-radius: 8px; }
.ffl-cta-banner__text { flex: 1 1 300px; }
.ffl-cta-banner h2 { margin: 0 0 .6rem; color: #fff; }
.ffl-cta-banner__badges { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: 0; margin: 0; font-weight: 600; }
.ffl-cta-banner__badges li { display: inline-flex; align-items: center; gap: .4rem; }
.ffl-cta-banner .ffl-btn--cta { background: var(--ffl-cta); border-color: var(--ffl-cta); }
.ffl-cta-banner .ffl-btn--cta:hover { background: #0b1f3a; border-color: #0b1f3a; }

/* Trust row */
.ffl-trustrow { padding: 1.6rem 0; background: #fff; border-top: 1px solid #eef1f5; }
.ffl-trustrow__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 782px) { .ffl-trustrow__grid { grid-template-columns: repeat(4, 1fr); } }
.ffl-trustrow__item { display: flex; align-items: center; gap: .7rem; color: #33475b; }
.ffl-trustrow__item .ffl-ico { color: #1266d6; flex: none; }
.ffl-trustrow__item span { display: flex; flex-direction: column; font-size: .85rem; color: #6b7885; }
.ffl-trustrow__item strong { color: #0b1f3a; font-size: .95rem; }