/*
 * Freeline - what the catalogue needs that freeline.css does not already say.
 *
 * WHY THE FIRST BLOCK REPEATS freeline.css
 *
 * The old site put "category-page" / "product-page" on <body>, and freeline.css hangs the catalogue
 * heading (Thunder, 64px) and the breadcrumb strip on those classes. The platform's shell owns
 * <body> and a view cannot add a class to it, so category.php and product.php wrap their output in
 * .fl-category-page / .fl-product-page and the same rules are restated here against the wrapper.
 * The search page had "search-page", which freeline.css never styled - .fl-search-page gets nothing.
 */

div.fl-category-page .breadcrumbs_widget {
    margin-top: 0 !important;
    border-bottom: 1px solid #ddd !important;
}

div.fl-product-page .breadcrumbs_widget .container-xxl,
div.fl-category-page .breadcrumbs_widget .container-xxl {
    max-width: 1340px;
}

div.fl-product-page .header-title h2,
div.fl-category-page .header-title h2 {
    font-size: 64px !important;
    line-height: 100% !important;
    font-family: 'Thunder-ExtraLightLC' !important;
    text-transform: uppercase !important;
}

div.fl-product-page .header-title h1,
div.fl-category-page .header-title h1 {
    font-size: 64px !important;
    line-height: 100% !important;
    font-family: 'Thunder-SemiBoldLC' !important;
    color: #212529 !important;
}

div.fl-product-page .home-creative-agency .jnf-title-large {
    font-family: 'Thunder-BoldLC' !important;
}

/* The empty listing. The old page printed this inline, in two slightly different ways. */
#product-listing .fl-no-results {
    width: 400px;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 200px;
    list-style: none;
}

/* What products.js watches to load the next page. */
.fl-listing-sentinel {
    height: 1px;
}

/* The technical-video popup's close button sits on the dark overlay (was an inline <style>). */
.mfp-close-btn-in .mfp-close {
    color: #ffffff;
}