/* ==========================================================================
   New Equipment (CPC) - Ring Power
   Cards, category browse, search, and product detail share the used-equipment
   visual language: yellow/dark accents, structured cards. Variables are
   defined in used-equipment.css (loaded first); redeclared here as a
   fallback so this file is not order-dependent.
   ========================================================================== */

:root {
    --rp-yellow: #F2C714;
    --rp-yellow-hover: #dab30f;
    --rp-dark: #333333;
    --rp-gray: #666666;
    --rp-light-gray: #f5f5f5;
    --rp-border: #e0e0e0;
    --rp-card-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ---------- Page chrome ---------- */
.ne-page-title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--rp-dark);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ne-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rp-dark);
    margin: 2rem 0 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--rp-yellow);
}

.ne-breadcrumb {
    font-size: 14px;
    color: var(--rp-gray);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.ne-breadcrumb a {
    color: var(--rp-dark);
    text-decoration: none;
    font-weight: 600;
}

.ne-breadcrumb a:hover {
    color: var(--rp-yellow-hover);
    text-decoration: underline;
}

/* ----------  Takeover banner (landing + category pages)  ----------
   _PageHero.cshtml emits uSkinned's usn_cmp_banner / item_takeover-banner
   markup, so height, responsive heading scale, and the 60% image-over-black
   treatment all come from the theme. These rules only replicate the accents
   that the reference banner at /industries/earthmoving-construction-equipment/
   gets from its "hero-homepage-template" backoffice custom CSS class, which is
   not in this repo. Keeping them here means the hero does not depend on
   backoffice content to look right.
   ------------------------------------------------------------------ */
.ne-hero .secondary-heading,
.ne-hero .heading {
    letter-spacing: 5px;
}

.ne-hero .secondary-heading {
    margin-bottom: 16px;
}

.ne-hero .heading {
    font-weight: 600;
}

/* Theme accent, not --rp-yellow: the banner eyebrow and highlight use uSkinned
   colour scheme 1 (rgb(255,205,17)), which differs slightly from --rp-yellow. */
.ne-hero .heading .highlight {
    color: rgba(var(--c1-secondary-heading), 1);
}

/* CPC short descriptions run longer than a hand-written tagline, so the line
   length is capped; typography itself is inherited from .intro.lg. */
.ne-hero__intro {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}

.ne-hero__intro p {
    margin: 0;
}

.ne-hero__intro p + p {
    margin-top: 0.5em;
}

.ne-category-hero {
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--rp-border);
    background: var(--rp-light-gray);
    max-height: 360px;
}

.ne-category-hero img {
    width: 100%;
    height: 100%;
    max-height: 360px;
    object-fit: cover;
    display: block;
}

/* ---------- Category browse cards (landing) ---------- */
.ne-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 2rem;
}

.ne-category-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    box-shadow: var(--rp-card-shadow);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ne-category-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}

.ne-category-card__image {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--rp-light-gray);
    overflow: hidden;
}

.ne-category-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ne-category-card:hover .ne-category-card__image img {
    transform: scale(1.03);
}

.ne-category-card__body {
    padding: 20px 20px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ne-category-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rp-dark);
    margin: 0;
    line-height: 1.25;
}

.ne-category-card__title a {
    color: inherit;
    text-decoration: none;
}

.ne-category-card__title a:hover {
    color: var(--rp-yellow-hover);
}

.ne-category-card__desc {
    font-size: 14px;
    color: var(--rp-gray);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ne-category-card__desc p { margin: 0 0 6px; }
.ne-category-card__desc p:last-child { margin-bottom: 0; }

.ne-category-card__footer {
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---------- Product card grid ---------- */
.ne-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.ne-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    box-shadow: var(--rp-card-shadow);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ne-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.ne-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--rp-light-gray);
    display: block;
    overflow: hidden;
}

/* Sub-category cards: cover photos like landing category cards */
.ne-subcategory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 1.5rem;
}

.ne-subcategory-grid .ne-card__image img {
    object-fit: cover;
    padding: 0;
}

.ne-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

/*
    Real product photos vary in aspect and sit on white, so they need "contain".
    The placeholder is a full-bleed graphic and looked letterboxed under that
    rule, so it fills the frame the way the used equipment cards do.
*/
.ne-card__image img.ne-card__img--placeholder {
    object-fit: cover;
    padding: 0;
}

.ne-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--rp-yellow);
    color: var(--rp-dark);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 2px;
}

.ne-card__body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ne-card__brand {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rp-gray);
}

.ne-card__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--rp-dark);
    margin: 0;
    line-height: 1.25;
}

.ne-card__desc {
    font-size: 13px;
    color: var(--rp-gray);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ne-card__desc p { margin: 0 0 4px; }
.ne-card__desc p:last-child { margin-bottom: 0; }

.ne-card__footer {
    padding: 12px 16px;
    border-top: 1px solid var(--rp-border);
    display: flex;
    gap: 8px;
}

/* ---------- Buttons ---------- */
.ne-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 10px 14px;
    border-radius: 3px;
    text-decoration: none;
    border: 1px solid var(--rp-dark);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ne-btn--outline {
    background: transparent;
    color: var(--rp-dark);
}

.ne-btn--outline:hover {
    background: var(--rp-dark);
    color: #fff;
}

.ne-btn--primary {
    background: var(--rp-yellow);
    border-color: var(--rp-yellow);
    color: var(--rp-dark);
}

.ne-btn--primary:hover {
    background: var(--rp-yellow-hover);
    border-color: var(--rp-yellow-hover);
    color: var(--rp-dark);
}

.ne-btn--lg {
    flex: 0 0 auto;
    padding: 12px 28px;
    font-size: 14px;
}

/* ---------- Rich text from the CPC feed ---------- */
.ne-richtext { color: var(--rp-gray); line-height: 1.55; }
.ne-richtext p { margin: 0 0 0.75rem; }
.ne-richtext sup { font-size: 0.7em; }

/* ---------- Product detail ---------- */
.ne-product-hero {
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    background: var(--rp-light-gray);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    max-height: 480px;
}

.ne-product-hero img {
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    display: block;
}

.ne-product-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ne-product-badge {
    background: var(--rp-yellow);
    color: var(--rp-dark);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 2px;
}

.ne-disclaimer {
    background: var(--rp-light-gray);
    border-left: 4px solid var(--rp-yellow);
    padding: 12px 16px;
    font-size: 13px;
    color: var(--rp-gray);
}

.ne-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.ne-gallery__item {
    display: block;
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    overflow: hidden;
    background: var(--rp-light-gray);
    aspect-ratio: 4 / 3;
}

.ne-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ne-list {
    padding-left: 1.25rem;
    color: var(--rp-gray);
    line-height: 1.6;
}

.ne-table .table {
    font-size: 14px;
}

.ne-table .table thead th {
    background: var(--rp-dark);
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: none;
}

/* ---------- Landing search ---------- */
.ne-search-bar {
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ne-search-bar .form-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rp-gray);
    margin-bottom: 6px;
}

.ne-search-bar .form-control,
.ne-search-bar .form-select {
    border-radius: 2px;
    border-color: var(--rp-border);
    font-size: 14px;
    height: 42px;
}

.ne-btn-search {
    background: var(--rp-yellow);
    border: 1px solid var(--rp-yellow);
    color: var(--rp-dark);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 14px;
    padding: 10px 16px;
    height: 42px;
    border-radius: 2px;
}

.ne-btn-search:hover {
    background: var(--rp-yellow-hover);
    border-color: var(--rp-yellow-hover);
    color: var(--rp-dark);
}

.ne-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    margin-top: 24px;
}

@media (max-width: 768px) {
    .ne-layout { grid-template-columns: 1fr; }
    .ne-category-grid { grid-template-columns: 1fr; }
}

.ne-main { min-width: 0; }

.ne-sidebar__section {
    border-bottom: 2px solid var(--rp-yellow);
    padding: 12px 0 16px;
}

.ne-sidebar__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rp-dark);
    margin-bottom: 8px;
}

.ne-sidebar__body { max-height: 260px; overflow-y: auto; }

.ne-sidebar__body label {
    display: block;
    font-size: 13px;
    color: var(--rp-gray);
    padding: 3px 0;
    cursor: pointer;
}

.ne-sidebar__body input { margin-right: 6px; }

.ne-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.ne-results-count { font-size: 14px; color: var(--rp-gray); }

.ne-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.ne-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--rp-light-gray);
    border: 1px solid var(--rp-border);
    border-radius: 16px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--rp-dark);
}

.ne-chip__remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--rp-gray);
    padding: 0;
}

.ne-chip__remove:hover { color: var(--rp-dark); }

.ne-loading { text-align: center; padding: 48px 0; color: var(--rp-gray); }

.ne-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.ne-pagination a, .ne-pagination span {
    min-width: 38px;
    text-align: center;
    padding: 7px 10px;
    border: 1px solid var(--rp-border);
    border-radius: 3px;
    font-size: 13px;
    color: var(--rp-dark);
    text-decoration: none;
    cursor: pointer;
}

.ne-pagination a:hover { background: var(--rp-light-gray); }
.ne-pagination .is-active { background: var(--rp-yellow); border-color: var(--rp-yellow); font-weight: 700; }
.ne-pagination .is-disabled { color: #bbb; cursor: default; }

/* Featured Products page component (uSkinned block) */
.listing-featured-products .ne-featured-product-item {
    height: 100%;
}

.listing-featured-products .ne-card {
    height: 100%;
}

@media (max-width: 767px) {
    .listing-featured-products.slick-slider .slick-list {
        margin: 0 -8px;
    }

    .listing-featured-products.slick-slider .item {
        padding: 0 8px;
    }

    .listing-featured-products:not(.slick-slider) .item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Backoffice-only styles live in App_Plugins/CpcProductSort/cpc-product-sort.css. */


/* ---------- Product page call to action ---------- */
.ne-product-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 575px) {
    .ne-product-cta .ne-btn {
        flex: 1 1 100%;
    }
}


/* ---------- Financing strip ----------
   Shaped like the home page's overlapping banner: under a hero it uses the
   backoffice overlapping-text-banner class (half over the hero), and product
   pages, which have no hero, get the same box inline as .ne-financing.
   Colours are inverted from the home banner: black text on yellow. The
   backoffice rules set a black background and yellow text with !important,
   so the overrides below need !important and the extra class to win. */
.ne-financing,
.overlapping-text-banner.ne-financing-banner .component-inner {
    background: var(--rpd-yellow, var(--rp-yellow)) !important;
    border: 3px solid #1a1a1a !important;
}

.ne-financing {
    padding: 22px 24px;
}

/* Centred as plain inline text; the theme's paragraph rules can override a
   flex row, and inline text centres the same way everywhere. */
.ne-financing,
.ne-financing-banner .info,
.ne-financing-banner .text {
    width: 100%;
    text-align: center !important;
}

.ne-financing__line,
.overlapping-text-banner.ne-financing-banner .text p.ne-financing__line {
    margin: 0 !important;
    text-align: center !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
}

.ne-financing__line strong {
    font-weight: 700;
    margin-right: 10px;
}

.ne-financing__line a,
.overlapping-text-banner.ne-financing-banner .text p.ne-financing__line a {
    color: #1a1a1a !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    white-space: nowrap;
}

.ne-financing__line a:hover,
.overlapping-text-banner.ne-financing-banner .text p.ne-financing__line a:hover {
    color: #000 !important;
    text-decoration-thickness: 3px;
}

.ne-financing__sep {
    margin: 0 10px;
    opacity: 0.6;
}

.ne-btn--dark {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

.ne-btn--dark:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

.ne-btn--outline-dark {
    background: transparent;
    border-color: #1a1a1a;
    color: #1a1a1a;
}

.ne-btn--outline-dark:hover {
    background: #1a1a1a;
    color: #fff;
}

@media (max-width: 575px) {
    /* Heading on its own line above the two links on phones. */
    .ne-financing__line strong {
        display: block;
        margin: 0 0 6px;
    }
}


/* ---------- Headline specs on product cards ---------- */
.ne-card__specs {
    margin: 2px 0 0;
    display: grid;
    gap: 6px;
}

.ne-card__specs div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ne-card__specs dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rp-gray);
}

.ne-card__specs dd {
    margin: 0;
    font-size: 13px;
    color: var(--rp-dark);
    font-variant-numeric: tabular-nums;
}

/* ---------- Brochures and spec sheets ---------- */
.ne-documents {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.ne-documents a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--rp-dark);
    text-decoration: none;
}

.ne-documents a:hover span:last-child {
    text-decoration: underline;
}

.ne-documents__icon {
    flex: 0 0 auto;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--rp-dark);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ---------- Sales landing tiles (Views/Partials/Sales) ----------
   Tile look comes from the backoffice image-text-card-* classes. The theme
   does not crop pod images: editor-built pods get 4:3 files from the media
   cropper. Used-feed photos arrive in any shape, so the frame is fixed at
   4:3 here and the photo covers it; a tile with no photo keeps its shape on
   the dark colour-scheme background. */
.sales-tiles .image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.sales-tiles .info .heading {
    text-transform: uppercase;
}

.sales-tiles .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sales-tiles__caption {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.9;
}

.sales-tiles__more {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

/* Category / family tiles on the new-equipment pages (_CategoryCards), which
   sit inside the page container rather than a full-width pods section. */
.ne-tiles {
    margin-top: 1rem;
}

.ne-tiles .ne-section-title {
    margin-bottom: 1.5rem;
}

/* ---------- Product page: Sales & Offers ----------
   With an offer the product page gains a side column from lg up; below that
   the copy placed under the calls to action shows instead. */
.ne-product-layout.has-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}

.ne-product-aside {
    display: none;
}

@media (min-width: 992px) {
    .ne-product-layout.has-offer {
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
    }

    .ne-product-aside {
        display: block;
        position: sticky;
        top: 140px;
    }

    .ne-product-offer-inline {
        display: none;
    }
}

.ne-offer {
    background: #fff;
    border: 1px solid var(--rp-border);
    border-top: 4px solid var(--rp-yellow);
    border-radius: 4px;
    box-shadow: var(--rp-card-shadow);
    overflow: hidden;
}

.ne-offer__eyebrow {
    margin: 0;
    padding: 10px 18px;
    background: var(--rp-yellow);
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ne-offer__image {
    display: block;
    width: 100%;
    height: auto;
}

.ne-offer__body {
    padding: 18px;
}

.ne-offer__heading {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rp-dark);
    margin: 0 0 8px;
}

.ne-offer__text {
    font-size: 14px;
}

.ne-offer__text p:last-child {
    margin-bottom: 0;
}

.ne-offer__cta {
    display: flex;
    width: 100%;
    margin-top: 14px;
    padding: 11px 16px;
}