/* input(9033,15): run-time error CSS1030: Expected identifier, found '.'
input(9033,40): run-time error CSS1025: Expected comma or open brace, found ')'
input(9039,19): run-time error CSS1030: Expected identifier, found '.'
input(9039,44): run-time error CSS1025: Expected comma or open brace, found ')'
input(9048,23): run-time error CSS1030: Expected identifier, found '.'
input(9048,48): run-time error CSS1025: Expected comma or open brace, found ')'
input(9058,23): run-time error CSS1030: Expected identifier, found '.'
input(9058,48): run-time error CSS1025: Expected comma or open brace, found ')'
input(9063,27): run-time error CSS1030: Expected identifier, found '.'
input(9063,52): run-time error CSS1025: Expected comma or open brace, found ')'
input(10986,33): run-time error CSS1030: Expected identifier, found '.'
input(10986,45): run-time error CSS1025: Expected comma or open brace, found ')'
input(11019,30): run-time error CSS1030: Expected identifier, found '>'
input(11019,51): run-time error CSS1025: Expected comma or open brace, found ')'
input(12571,19): run-time error CSS1030: Expected identifier, found '.'
input(12571,44): run-time error CSS1025: Expected comma or open brace, found ')'
input(12576,23): run-time error CSS1030: Expected identifier, found '.'
input(12576,48): run-time error CSS1025: Expected comma or open brace, found ')'
input(12580,27): run-time error CSS1030: Expected identifier, found '.'
input(12580,52): run-time error CSS1025: Expected comma or open brace, found ')'
input(12585,27): run-time error CSS1030: Expected identifier, found '.'
input(12585,52): run-time error CSS1025: Expected comma or open brace, found ')'
input(12590,31): run-time error CSS1030: Expected identifier, found '.'
input(12590,56): run-time error CSS1025: Expected comma or open brace, found ')'
input(12725,17): run-time error CSS1030: Expected identifier, found '.'
input(12725,35): run-time error CSS1025: Expected comma or open brace, found ')'
input(12927,32): run-time error CSS1030: Expected identifier, found '.'
input(12927,58): run-time error CSS1025: Expected comma or open brace, found ')'
input(12934,32): run-time error CSS1030: Expected identifier, found '.'
input(12934,58): run-time error CSS1025: Expected comma or open brace, found ')'
input(12944,32): run-time error CSS1030: Expected identifier, found '.'
input(12944,58): run-time error CSS1025: Expected comma or open brace, found ')'
input(12952,32): run-time error CSS1030: Expected identifier, found '.'
input(12952,58): run-time error CSS1025: Expected comma or open brace, found ')' */
/* The mobile drawer's own foot - call button and socials. .header-menu is the horizontal nav
   on desktop, so this stays hidden until the phone breakpoint turns it on. */
.revamp-drawer-foot {
    display: none;
}

/* ============================================================================
   2026 site revamp - components
   Figma: "Air Power Site Revamp Desktop"

   Depends on revamp.tokens.css, which must load first (see
   Themes/Venture/Views/Shared/Head.cshtml).

   Kept deliberately separate from styles.css / theme.custom-1.css so the
   redesign can be backed out by unregistering two files.

   Everything here is namespaced .revamp-* so it cannot leak into pages that
   haven't been converted yet.

   Revamp markup is wrapped in .theme-v2 (see the heading-casing block below).
   ============================================================================ */


/* wwwroot/css/Slick/anywhereSlidersCustomCss-1-1.css has a global
   h1,h3{text-transform:none!important}. Casing for revamp headings is declared
   here once rather than per component. */

.theme-v2 h1,
.theme-v2 h2,
.theme-v2 h3 {
    text-transform: none !important;
}

    .theme-v2 .revamp-benefit-card h3,
    .theme-v2 .revamp-footer-heading {
        text-transform: uppercase !important;
    }

    /* card titles are uppercase in every card frame. Keyed on the card,
       not .theme-v2, so the search page's JS-built cards match too. */
    .revamp-product-card .revamp-product-title {
        text-transform: uppercase !important;
    }

    /* newsletter heading is title case in the design, unlike its sibling columns */
    .theme-v2 .revamp-footer-heading-titlecase {
        text-transform: none !important;
    }


/* ---------------------------------------------------------------------------
   Shared: section shell
   Used by Best Sellers, Popular Manufacturers, Popular Categories, and every
   light-background section that follows.
   --------------------------------------------------------------------------- */

.revamp-section {
    padding: 0 var(--ap-gutter);
    margin-bottom: 40px;
}

.revamp-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: var(--ap-border-width) solid var(--ap-blue);
    padding-bottom: 12px;
    margin: var(--ap-section-space) 0 var(--ap-gap);
}

.revamp-section-title {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-title);
    color: var(--ap-header);
    margin: 0;
}

.revamp-section-viewall {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--ap-header);
    text-decoration: none;
}

    .revamp-section-viewall::after {
        content: "";
        flex: 0 0 auto;
        width: 22px;
        height: 10px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2022%2010%27%3E%3Cpath%20d=%27M0%205h19M16.5%201.5L20.5%205l-4%203.5%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.4%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2022%2010%27%3E%3Cpath%20d=%27M0%205h19M16.5%201.5L20.5%205l-4%203.5%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.4%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
    }


.revamp-btn-outline,
.revamp-btn-outline-small,
.revamp-btn-solid-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ap-control-height);
    border-radius: var(--ap-radius);
    font-family: var(--ap-font-heading);
    font-weight: 700;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    text-decoration: none;
}

/* outline on light - hero CTAs, section actions */
.revamp-btn-outline {
    padding: 0 20px;
    border: var(--ap-border-width) solid var(--ap-blue);
    color: var(--ap-blue);
    white-space: nowrap;
}

    .revamp-btn-outline:hover {
        background-color: var(--ap-blue);
        color: var(--ap-white);
        text-decoration: none;
    }

/* outline on dark - "Learn More" inside the navy benefits band */
.revamp-btn-outline-white {
    border-color: var(--ap-white);
    color: var(--ap-white);
}

    .revamp-btn-outline-white:hover {
        background-color: var(--ap-white);
        color: var(--ap-navy);
    }

/* full-width outline - "Add to Cart" inside product cards */
.revamp-btn-outline-small {
    width: 100%;
    border: var(--ap-border-width) solid var(--ap-blue);
    background-color: var(--ap-white);
    background-image: none;
    color: var(--ap-blue);
    cursor: pointer;
}

    .revamp-btn-outline-small:hover {
        background-color: var(--ap-blue);
        color: var(--ap-white);
    }


/* Keyboard focus. Nearly everything here had a :hover and nothing for the keyboard, so one ring
   covers the lot - the same 2px --ap-blue-light the Application Guides links use. :focus-visible,
   so a mouse click does not draw it. The two search inputs are forced to outline:0 !important by
   the inline block in _Root.Head, so their wrappers take the ring instead. */
.theme-v2 a:focus-visible,
.theme-v2 button:focus-visible,
.theme-v2 summary:focus-visible,
.theme-v2 input:focus-visible,
.theme-v2 select:focus-visible,
.theme-v2 textarea:focus-visible,
.theme-v2 [tabindex]:focus-visible {
    outline: 2px solid var(--ap-focus-ring, var(--ap-blue-light));
    outline-offset: 2px;
}

.theme-v2 .revamp-search-field:focus-within,
.theme-v2 .revamp-search-hero-form:focus-within {
    outline: 2px solid var(--ap-focus-ring, var(--ap-blue-light));
    outline-offset: 2px;
}

/* --ap-blue-light on the navy and #16628f bands measures about 1.8:1, so the ring vanishes exactly
   where most of the focusable chrome lives - the header, the nav and every dark band CTA. The
   colour travels as an inherited custom property rather than a second set of :focus-visible rules,
   so it does not matter whether .theme-v2 sits on these elements or above them (REVAMP.md 6.6c). */
.revamp-header-bar,
.revamp-header-nav,
.revamp-benefits,
.revamp-experts,
.revamp-footer,
.revamp-search-hero,
.revamp-cat-hero,
.revamp-title-band,
.revamp-faq,
.revamp-loyalty,
.revamp-engine-panel,
.revamp-financing,
.revamp-mfr-info,
.revamp-saved-head,
.revamp-cart-head {
    --ap-focus-ring: var(--ap-white);
}

/* solid on dark - "Speak to an Expert" */
.revamp-btn-solid-white {
    align-self: flex-start;
    padding: 0 20px;
    border: var(--ap-border-width) solid var(--ap-white);
    background-color: var(--ap-white);
    color: var(--ap-blue);
}

    .revamp-btn-solid-white:hover {
        background-color: transparent;
        color: var(--ap-white);
        text-decoration: none;
    }


/* ---------------------------------------------------------------------------
   Homepage: hero
   --------------------------------------------------------------------------- */

.revamp-hero {
    position: relative;
    width: 100%;
    height: 605px;
    overflow: hidden;
    border-radius: 0 0 var(--ap-radius-lg) var(--ap-radius-lg);
}

    .revamp-hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* design places the copy block in the upper portion of the hero (39px down from
   the top of a 605px frame), not vertically centred */
.revamp-hero-content {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 39px;
    padding-left: var(--ap-gutter-narrow);
}

.revamp-hero-title {
    font-family: var(--ap-font-heading);
    font-weight: 400;
    font-size: var(--ap-text-hero);
    line-height: var(--ap-leading-hero);
    color: var(--ap-blue);
    margin: 0 0 20px;
}

.revamp-hero-text {
    font-family: var(--ap-font-body);
    font-weight: 500;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
    max-width: 460px;
    margin: 0 0 var(--ap-gap);
}

.revamp-hero-buttons {
    display: flex;
    gap: 10px;
}


/* ---------------------------------------------------------------------------
   Homepage: "The Air Power Advantage" benefits band
   --------------------------------------------------------------------------- */

.revamp-benefits {
    background-color: var(--ap-navy);
    border-radius: var(--ap-radius-lg) var(--ap-radius-lg) 0 0;
    padding: var(--ap-section-space) var(--ap-gutter);
}

.revamp-benefits-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

.revamp-benefits-title {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-section);
    line-height: var(--ap-leading-section);
    letter-spacing: var(--ap-tracking-section);
    color: var(--ap-white);
    margin: 0 0 20px;
}

.revamp-benefits-intro {
    font-family: var(--ap-font-body);
    font-weight: 400;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-white);
    max-width: 591px;
    margin: 0;
}

    .revamp-benefits-intro strong {
        color: var(--ap-white);
        font-weight: 700;
    }

.revamp-benefits-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ap-gap);
}

.revamp-benefit-card {
    background-color: var(--ap-white);
    border-radius: var(--ap-radius);
    flex: 1 1 300px;
    padding: 32px var(--ap-gap);
    text-align: center;
}

    /* casing is set in the heading scope block at the top of this file */
    .revamp-benefit-card h3 {
        font-family: var(--ap-font-heading);
        font-weight: 700;
        font-size: var(--ap-text-card);
        line-height: var(--ap-leading-card);
        color: var(--ap-blue);
        margin: 0 0 12px;
    }

    .revamp-benefit-card p {
        font-family: var(--ap-font-body);
        font-weight: 400;
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        color: var(--ap-blue);
        margin: 0;
    }


/* ---------------------------------------------------------------------------
   Homepage: Popular Categories
   --------------------------------------------------------------------------- */

.revamp-categories-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--ap-gap);
}

@media (max-width: 1200px) {
    .revamp-categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .revamp-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.revamp-category-card {
    display: block;
    text-decoration: none;
}

    .revamp-category-card:hover {
        text-decoration: none;
    }

.revamp-category-image {
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* artwork inset within the tile */
    padding: 19px;
    background-color: var(--ap-white);
}

    .revamp-category-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

/* the old view carried a global `li { text-align: left }` in a nested <head>; kept scoped */
.html-category-page .category-description li {
    text-align: left;
}

.revamp-category-name,
.revamp-manufacturer-name {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-tight);
    text-transform: uppercase;
    color: var(--ap-blue);
    margin-top: 12px;
}


/* ---------------------------------------------------------------------------
   Homepage: Popular Manufacturers
   (Views/Shared/Components/HomepageManufacturers)
   --------------------------------------------------------------------------- */

.revamp-manufacturers-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--ap-gap);
}

@media (max-width: 1200px) {
    .revamp-manufacturers-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .revamp-manufacturers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.revamp-manufacturer-card {
    display: block;
    text-decoration: none;
}

    .revamp-manufacturer-card:hover {
        text-decoration: none;
    }

/* fixed height so every logo tile lines up regardless of logo proportions; the
   name sits outside the border, matching the category tiles */
.revamp-manufacturer-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 108px;
    padding: 16px;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

    .revamp-manufacturer-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }


/* ---------------------------------------------------------------------------
   Product card (Best Sellers today but intended to become _ProductBoxV2)
   --------------------------------------------------------------------------- */

.revamp-bestsellers-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--ap-gap);
}

/* pins the price / core charge / button block to the bottom of the card so
   every card in a row ends on the same line */
.revamp-product-footer {
    margin-top: auto;
}

.revamp-product-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--ap-radius);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-badge-lg);
    text-transform: uppercase;
    color: var(--ap-white);
    margin-bottom: 12px;
}

    /* badge-other: any non-new condition without its own colour - Repaired, or anything Quantum
       adds later. New no longer gets a badge at all (see _ProductBoxV2.cshtml), so its blue is
       reused here; badge-new is kept only so nothing breaks if it is ever reintroduced. */
    .revamp-product-badge.badge-new,
    .revamp-product-badge.badge-other {
        background-color: var(--ap-blue);
    }

    .revamp-product-badge.badge-rebuilt {
        background-color: var(--ap-blue-light);
    }

    .revamp-product-badge.badge-overhaul,
    .revamp-product-badge.badge-overhauled {
        background-color: var(--ap-navy-deep);
    }

.revamp-product-card img {
    width: 100%;
    height: 164px;
    object-fit: contain;
    margin-bottom: 12px;
}

/* fixed three-line box (and a single-line part number below it) so the part
   number and its divider rule land on the same baseline in every card, however
   long the product name is */
.revamp-product-title {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-tight);
    text-transform: uppercase;
    color: var(--ap-blue);
    margin: 0 0 12px;
    height: 63px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

    .revamp-product-title a {
        color: var(--ap-blue);
        text-decoration: none;
    }

.revamp-product-sku {
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    letter-spacing: var(--ap-tracking-tight);
    color: var(--ap-blue);
    border-bottom: var(--ap-border-width) solid var(--ap-border);
    padding-bottom: 12px;
    margin-bottom: 12px;
    height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.revamp-product-price {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    line-height: var(--ap-leading-body);
    letter-spacing: var(--ap-tracking-tight);
    font-size: var(--ap-text-link);
    color: var(--ap-blue);
    margin-bottom: 4px;
}

/* two lines reserved so the price sits on the same line across every card, whether or not that product carries
   a core charge */
.revamp-product-core {
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-micro);
    line-height: var(--ap-leading-body);
    letter-spacing: var(--ap-tracking-tight);
    color: var(--ap-blue);
    opacity: 0.7;
    min-height: 48px;
    margin-bottom: 16px;
}


/* ---------------------------------------------------------------------------
   Homepage: "The Aviation Experts Pilots Trust"
   --------------------------------------------------------------------------- */

.revamp-experts {
    background-color: var(--ap-navy);
    border-radius: var(--ap-radius-lg) var(--ap-radius-lg) 0 0;
    padding: var(--ap-section-space) var(--ap-gutter);
    margin-top: var(--ap-section-space);
}

.revamp-experts-title {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-section);
    line-height: var(--ap-leading-section);
    letter-spacing: var(--ap-tracking-section);
    color: var(--ap-white);
    margin: 0 0 32px;
}

.revamp-experts-panel {
    display: grid;
    grid-template-columns: 1.38fr 1fr;
    align-items: stretch;
    background-color: var(--ap-navy-deep);
    border-radius: var(--ap-radius);
    overflow: hidden;
}

@media (max-width: 991px) {
    .revamp-experts-panel {
        grid-template-columns: 1fr;
    }
}

.revamp-experts-image {
    position: relative;
    min-height: 300px;
}

    .revamp-experts-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.revamp-experts-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
}

    .revamp-experts-body p {
        font-family: var(--ap-font-body);
        font-weight: 400;
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        color: var(--ap-white);
        margin: 0 0 var(--ap-gap);
    }


/* Footer */

.revamp-footer {
    background-color: var(--ap-navy-deep);
    padding: var(--ap-section-space) var(--ap-gutter) var(--ap-gap);
}

.revamp-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.9fr 2fr;
    gap: 40px;
}

@media (max-width: 1200px) {
    .revamp-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .revamp-footer-grid {
        grid-template-columns: 1fr;
    }
}

.revamp-footer-logo img {
    max-width: 245px;
    height: auto;
}

/* --- Social icons ---*/

.revamp-footer-socials {
    margin: var(--ap-gap) 0 32px;
}

    .revamp-footer-socials .social-sharing {
        display: flex;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .revamp-footer-socials .social-sharing:before,
        .revamp-footer-socials .social-sharing:after {
            display: none;
        }

        .revamp-footer-socials .social-sharing li {
            margin: 0 20px 0 0;
        }

    .revamp-footer-socials .social-sharing a,
    .light-theme .revamp-footer-socials .social-sharing a,
    .revamp-footer-socials .social-sharing a:hover,
    .light-theme .revamp-footer-socials .social-sharing a:hover {
        width: 32px;
        height: 32px;
        background: transparent;
        border: none;
    }

        .revamp-footer-socials .social-sharing a:before {
            width: 32px;
            height: 32px;
            line-height: 32px;
            /* icon glyph, not text - sized to the design's icon, not the type scale */
            font-size: 26px;
            color: var(--ap-white);
        }

/* --- Contact lines --- */

.revamp-footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .revamp-footer-contact li {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 20px;
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        color: var(--ap-white);
    }

    /* fixed-width icon column - the glyphs differ in natural width, which
       otherwise starts each line of text at a different x */
    .revamp-footer-contact i {
        flex: 0 0 24px;
        width: 24px;
        text-align: center;
        color: var(--ap-white);
        font-size: 20px;
        margin-top: 2px;
    }

/* --- Column headings ---
   Casing is set in the heading scope block at the top of this file. The extra
   .revamp-footer ancestor lifts these above the theme's own heading rules. */

.revamp-footer .revamp-footer-heading {
    font-family: var(--ap-font-heading);
    font-weight: 700;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-body);
    color: var(--ap-white);
    margin: 0 0 20px;
}

.revamp-footer .revamp-footer-heading-titlecase {
    font-size: var(--ap-text-subhead);
}

/* the frame only heads the contact details on a phone */
.revamp-footer .revamp-footer-heading-findus {
    display: none;
}

/* the account pages only lose their menu on a phone, so this only has a job there */
.revamp-portal-back {
    display: none;
}

/* the orders count banner is a mobile device; desktop reads the count off the table */
.revamp-orders-summary {
    display: none;
}

/* likewise the statement's outstanding-balance card */
.revamp-statement-summary {
    display: none;
}

/* the change-password card is a mobile frame; desktop keeps the bare form it already had */
.revamp-changepassword-heading {
    display: none;
}

/* --- Link columns --- */

.revamp-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .revamp-footer-links li {
        margin-bottom: 12px;
    }

    .revamp-footer-links a {
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        color: var(--ap-white);
        text-decoration: none;
    }

        .revamp-footer-links a:hover {
            text-decoration: underline;
            color: var(--ap-white);
        }

/* --- Newsletter --- */

.revamp-footer-newsletter p {
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-white);
    margin: 0 0 var(--ap-gap);
    max-width: 390px;
}

/* NewsletterBox renders its own "Newsletter" title - the design uses the
   heading above instead */
.revamp-footer-newsletter .newsletter > .title {
    display: none;
}

/* design stacks the field above the button; theme floats them side by side */
.revamp-footer-newsletter .newsletter-email {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 447px;
}

    .revamp-footer-newsletter .newsletter-email input,
    .light-theme .revamp-footer-newsletter .newsletter-email input {
        float: none;
        width: 100%;
        height: var(--ap-input-height);
        margin: 0;
        padding: 0 16px;
        background-color: transparent;
        border: var(--ap-border-width) solid var(--ap-border);
        border-radius: var(--ap-radius);
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
        /* deliberate deviation from the 16/24 body pairing: a single-line input
           centres its own text vertically, and forcing an explicit line-height
           on one misaligns it inconsistently across browsers */
        line-height: normal;
        color: var(--ap-white);
    }

        .revamp-footer-newsletter .newsletter-email input::placeholder {
            color: var(--ap-placeholder);
            text-transform: uppercase;
        }


.revamp-footer-newsletter .newsletter-email .newsletter-subscribe-button,
.light-theme .revamp-footer-newsletter .newsletter-email .newsletter-subscribe-button {
    float: none;
    width: auto;
    min-width: 132px;
    height: var(--ap-control-height);
    margin: 21px 0 0;
    padding: 0 var(--ap-gap);
    border: none;
    border-radius: var(--ap-radius);
    background-image: none !important;
    background-color: var(--ap-white) !important;
    font-family: var(--ap-font-heading);
    font-weight: 700;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-blue);
    cursor: pointer;
}

/* must out-specify ".revamp-footer-newsletter p" above, which otherwise resets
   these */
.revamp-footer-newsletter p.revamp-footer-disclaimer {
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-fine);
    line-height: var(--ap-leading-fine);
    text-transform: uppercase;
    color: var(--ap-white);
    max-width: 460px;
    margin: 33px 0 0;
}

/* --- Copyright --- */

.revamp-footer-copyright {
    margin-top: 48px;
    text-align: center;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-white);
}

    .revamp-footer-copyright a {
        color: var(--ap-white);
    }


/* ---------------------------------------------------------------------------
   Page shell

   The design runs the dark "Aviation Experts" panel straight into the footer
   with no gap. styles.css gives the homepage wrapper
   ".home-page-body .master-wrapper-content { margin: 0 0 100px }", and that
   bottom margin shows as a white band above the footer.
   --------------------------------------------------------------------------- */

body.home-page-body .master-wrapper-content {
    margin-bottom: 0;
}


/* the frames' page background - styles.css paints body #fafafa, which white cards disappear into */
body.home-page-body,
.html-revamp-page body,
.html-category-page body {
    background-color: var(--ap-page-bg);
}

/* Site header - view: _Header - Updated.cshtml (NOT _Header.cshtml). Desktop only. */

/* Staff-only strip: Administration, Manage this page, and the impersonation notice with the link
   that ends the session. The component renders it for nobody else - the customer-facing links a
   5-Point customisation had put here moved into the header itself - so hiding it only took those
   tools away from admins, including the one way out of an impersonated session. It is styled to
   the header's own language instead. */
.admin-header-links,
.light-theme .admin-header-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 20px;
    min-height: 35px;
    padding: 6px var(--ap-gutter-mobile-tight);
    box-sizing: border-box;
    background-color: var(--ap-navy-deep);
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-fine);
    line-height: 1.5;
    text-align: center;
    color: var(--ap-white);
}

    .admin-header-links .impersonate {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 10px;
    }

    .admin-header-links a,
    .light-theme .admin-header-links a {
        font-weight: 600;
        color: var(--ap-white);
        text-decoration: underline;
    }

        .admin-header-links a:hover,
        .light-theme .admin-header-links a:hover {
            color: var(--ap-white);
            text-decoration: none;
        }

@media (min-width: 1201px) {

    /* theme tax / currency / language strip - empty here, absent from the design */
    .theme-v2 .header-upper {
        display: none;
    }

    /* --- Blue bar: logo, search, account links --- */

    .light-theme .theme-v2 .header-lower.revamp-header-bar,
    .theme-v2 .header-lower.revamp-header-bar {
        display: flex;
        align-items: center;
        gap: 40px;
        min-height: 80px;
        padding: 0 var(--ap-gutter);
        /* the palette lists a dedicated header swatch (#16628f) separate from
           #00588c, which is documented as "copy on a light background" */
        background-color: var(--ap-header);
        box-shadow: none;
    }

    .theme-v2 .revamp-header-bar .header-left,
    .theme-v2 .revamp-header-bar .header-center,
    .theme-v2 .revamp-header-bar .header-right,
    .theme-v2 .revamp-header-bar .store-search-box,
    .light-theme .theme-v2 .revamp-header-bar .header-right {
        position: static;
        float: none;
        width: auto;
        height: auto;
        min-height: 0;
        max-width: none;
        margin: 0;
        padding: 0;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
    }

    .theme-v2 .revamp-header-bar .header-left {
        flex: 0 0 auto;
        z-index: 1;
    }

    /* put the logo image back in normal flow and give it an explicit height, so
       .header-left has something to derive its width from */
    .theme-v2 .revamp-header-bar .header-logo,
    .theme-v2 .revamp-header-bar .header-logo a,
    .theme-v2 .revamp-header-logo {
        position: static;
        display: block;
        width: auto;
        height: auto;
        line-height: 0;
    }

    .theme-v2 .revamp-header-bar .header-center {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .theme-v2 .revamp-header-bar .header-right {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 32px;
    }

    /* the white wordmark is set on the <img> in the view, not here: blob serves it
       as application/octet-stream, which <img src> sniffs but a CSS
       "content: url()" swap refuses to render - that blanked the logo entirely */
    .theme-v2 .revamp-header-bar .header-logo img,
    .theme-v2 .revamp-header-logo img {
        position: static;
        display: block;
        width: auto;
        height: 44px;
        max-width: none;
        max-height: none;
        margin: 0;
        /* belt and braces in case another rule reaches this image */
        content: normal;
    }

    /* --- Search --- */

    /* re-applied after the reset group above, which sets width:auto on this too.
       position:relative is what the suggestions list anchors to, so it drops over the page instead
       of opening the header up - _Root.Head sets that list to position:initial and the
       recent-searches script writes position:relative inline, both of which put it in the flow */
    .light-theme .theme-v2 .revamp-header-bar .store-search-box,
    .theme-v2 .revamp-header-bar .store-search-box {
        position: relative;
        width: 100%;
        max-width: 620px;
        background: transparent;
    }

    /* align-items:stretch so the field and the Multi-Line button are always exactly
       the same height and read as one rectangle, whatever either one computes to */
    .theme-v2 .revamp-header-bar #small-search-box-form,
    .theme-v2 .revamp-header-bar #small-search-box-form.open {
        position: static;
        display: flex;
        align-items: stretch;
        height: var(--ap-control-height);
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .theme-v2 .revamp-header-bar .ui-autocomplete {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        right: 0 !important;
        left: 0 !important;
        width: auto !important;
        margin: 0;
        border-radius: var(--ap-radius);
        box-shadow: 0 8px 24px rgba(0, 26, 44, 0.18);
    }

    .theme-v2 .revamp-search-field {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: stretch;
    }

    /* Specificity: the inline block in _Root.Head.cshtml contributes its argument's weight and forces
       height, border, and border radius plus an inset shadow, all
       !important. */
    .light-theme .theme-v2 .revamp-header-bar .revamp-search-field input#small-searchterms,
    .theme-v2 .revamp-header-bar .revamp-search-field input#small-searchterms {
        width: 100% !important;
        height: 100% !important;
        min-height: var(--ap-control-height) !important;
        margin: 0 !important;
        padding: 0 48px 0 16px !important;
        border: none !important;
        border-radius: var(--ap-radius) 0 0 var(--ap-radius) !important;
        outline: 0 !important;
        background-color: var(--ap-white) !important;
        box-shadow: none !important;
        font-family: var(--ap-font-body) !important;
        font-size: var(--ap-text-link) !important;
        font-weight: 400 !important;
        line-height: normal !important;
        color: var(--ap-navy-deep);
    }

    .theme-v2 button#SearchBarSearchIcon,
    .theme-v2 .revamp-search-submit {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 48px;
        height: var(--ap-control-height);
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        color: var(--ap-blue);
        font-size: 18px;
        cursor: pointer;
    }

    .theme-v2 a#SearchBarMultiLineLink,
    .theme-v2 .revamp-search-multiline {
        position: static;
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        height: auto;
        align-self: stretch;
        margin: 0;
        padding: 0 18px;
        border-radius: 0 var(--ap-radius) var(--ap-radius) 0;
        background-color: var(--ap-navy);
        font-family: var(--ap-font-heading);
        font-size: var(--ap-text-link);
        line-height: var(--ap-leading-body);
        font-weight: 400;
        color: var(--ap-white);
        text-decoration: none;
        white-space: nowrap;
    }

        .theme-v2 a#SearchBarMultiLineLink:hover {
            background-color: var(--ap-navy-deep);
            color: var(--ap-white);
            text-decoration: none;
        }

    .theme-v2 .search-box-button,
    .theme-v2 .revamp-header-bar .search-opener {
        display: none;
    }

    /* --- Account links + cart ---
       Markup is now plain links (HeaderLinks / FlyoutShoppingCart views). What is
       left is undoing the theme's absolute positioning and icon chrome. */

    .theme-v2 .revamp-header-links,
    .light-theme .theme-v2 .revamp-header-links {
        position: static;
        display: flex;
        align-items: center;
        gap: 32px;
        right: auto;
        top: auto;
        bottom: auto;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        overflow: visible;
    }

    .theme-v2 .revamp-header-link,
    .theme-v2 .revamp-header-bar .ico-cart,
    .light-theme .theme-v2 .revamp-header-link,
    .light-theme .theme-v2 .revamp-header-bar .ico-cart {
        position: static;
        display: inline-block;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        font-family: var(--ap-font-heading) !important;
        font-size: var(--ap-text-link) !important;
        font-weight: 400 !important;
        line-height: normal;
        text-transform: none !important;
        letter-spacing: 0;
        color: var(--ap-white) !important;
        text-decoration: none;
        white-space: nowrap;
        overflow: visible;
    }

        .theme-v2 .revamp-header-link:hover,
        .theme-v2 .revamp-header-bar .ico-cart:hover {
            color: var(--ap-white) !important;
            text-decoration: underline;
        }

    .theme-v2 .revamp-header-link:before,
    .theme-v2 .revamp-header-link:after,
    .theme-v2 .revamp-header-bar .ico-cart:before,
    .theme-v2 .revamp-header-bar .ico-cart:after {
        display: none !important;
        content: none !important;
    }

    /* design shows a count on Cart but not on Saved */
    .theme-v2 .revamp-header-bar .wishlist-qty {
        display: none !important;
    }

    .theme-v2 .revamp-header-bar .cart-qty {
        display: inline !important;
        margin-left: 5px;
        font-family: var(--ap-font-heading);
        font-size: var(--ap-text-link);
        line-height: normal;
        font-weight: 400;
        color: var(--ap-white);
    }

    .theme-v2 .revamp-header-bar #topcartlink,
    .light-theme .theme-v2 .revamp-header-bar #topcartlink {
        position: static;
        float: none;
        width: auto;
        min-width: 0;
        height: auto;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        text-align: left;
    }

    .theme-v2 .revamp-header-bar .cart-wrapper,
    .light-theme .theme-v2 .revamp-header-bar .cart-wrapper {
        float: none;
        width: auto;
        min-width: 0;
        height: auto;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
    }

    /* --- Navy nav bar --- */

    .light-theme .theme-v2 .header-lower.revamp-header-nav,
    .theme-v2 .header-lower.revamp-header-nav {
        display: block;
        min-height: 0;
        padding: 0;
        background-color: var(--ap-navy);
        box-shadow: none;
    }

    .theme-v2 .revamp-header-nav .header-center {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ap-gap);
        float: none;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0 var(--ap-gutter);
    }

    .light-theme .theme-v2 .revamp-header-nav .header-menu,
    .theme-v2 .revamp-header-nav .header-menu {
        flex: 1 1 auto;
        min-width: 0;
        float: none;
        width: auto;
        /* the theme ships margin: 0 0 30px here. As a flex item that margin counts, so the menu's
           margin box fills the row and its links ride 26px above the expert link's centre line -
           which reads as the expert link sitting on a second row */
        margin: 0;
        background: none;
        box-shadow: none;
    }

    .theme-v2 .revamp-header-nav .header-menu > ul.mega-menu,
    .theme-v2 .revamp-header-nav .header-menu > ul.top-menu {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0 24px;
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: left;
    }

    .theme-v2 .revamp-header-nav .header-menu > ul > li {
        float: none;
        margin: 0;
        padding: 0;
    }

    .light-theme .theme-v2 .revamp-header-nav .header-menu > ul > li > a,
    .light-theme .theme-v2 .revamp-header-nav .header-menu > ul > li > span,
    .theme-v2 .revamp-header-nav .header-menu > ul > li > a,
    .theme-v2 .revamp-header-nav .header-menu > ul > li > span {
        display: block;
        padding: 11px 0;
        background: none;
        font-family: var(--ap-font-heading) !important;
        font-size: var(--ap-text-body) !important;
        line-height: var(--ap-leading-tight) !important;
        font-weight: 500 !important;
        letter-spacing: var(--ap-tracking-nav);
        text-transform: uppercase;
        color: var(--ap-white);
        text-decoration: none;
        white-space: nowrap;
    }

        .theme-v2 .revamp-header-nav .header-menu > ul > li:hover > a {
            text-decoration: underline;
        }

    .revamp-header-expert {
        flex: 0 0 auto;
        font-family: var(--ap-font-heading);
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-tight);
        font-weight: 400;
        color: var(--ap-white);
        text-decoration: none;
        white-space: nowrap;
    }

        .revamp-header-expert:hover {
            color: var(--ap-white);
            text-decoration: underline;
        }
}

/* between the theme's breakpoint and the width the full nav actually needs, the
   gutters are the first thing to give, then the gap.

   The live menu carries 9 top-level items (1074px of links at the 18px gap) where the design has 7
   plus the search. PARTS GUIDES and CLEARANCE are the extras, and PILOT SUPPLIES & EDUCATION is
   231px on its own. At 100px gutters and the design's 24px gap the row needs 1589px, so everything
   below that has to give something back. Sized from nav_measure: links 949px + 7 gaps. */
@media (min-width: 1201px) and (max-width: 1600px) {
    .light-theme .theme-v2 .header-lower.revamp-header-bar,
    .theme-v2 .header-lower.revamp-header-bar,
    .theme-v2 .revamp-header-nav .header-center {
        padding-left: var(--ap-gutter-narrow);
        padding-right: var(--ap-gutter-narrow);
    }

    .theme-v2 .revamp-header-nav .header-menu > ul.mega-menu,
    .theme-v2 .revamp-header-nav .header-menu > ul.top-menu {
        gap: 0 12px;
    }
}

/* Below 1435 the 9-item menu and the 248px expert link cannot both sit on the row without the links
   running under the phone number, so the link steps aside rather than collide. It comes back as soon
   as the menu loses the two items that are not in the design. Below 1200 the stock responsive nav
   takes over anyway - the revamp header is desktop-only until there is a mobile design. */
@media (max-width: 1434px) {
    .revamp-header-expert {
        display: none;
    }
}


/* The flyout cart is parked off-screen at translate(100%) but keeps the theme's
   0 0 25px shadow, which bleeds back over the right edge of every page. */
.theme-v2 .cart-wrapper:not(.active) .flyout-cart {
    box-shadow: none;
}


/* Search results - QuantumSync plugin page. */

/* --- Turn the DataTable into a card grid --- */

.revamp-search-table,
.revamp-search-table tbody,
.revamp-search-table tr,
.revamp-search-table td {
    display: block;
    width: auto;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}

.revamp-search-table thead {
    display: none;
}

.revamp-search-table tbody {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ap-gap);
    align-items: stretch;
}

@media (max-width: 991px) {
    .revamp-search-table tbody {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .revamp-search-table tbody {
        grid-template-columns: 1fr;
    }
}

/* DataTables' own processing / empty rows must not become cards */
.revamp-search-table tbody tr.odd,
.revamp-search-table tbody tr.even {
    display: block;
}

.revamp-search-table tbody tr > td {
    height: 100%;
}

.revamp-search-table .dataTables_empty {
    grid-column: 1 / -1;
    padding: 40px 0;
    text-align: center;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

.revamp-product-image {
    display: block;
    text-decoration: none;
}

    /* the server-rendered ImageElement carries .picture-img; size it exactly like the
       homepage card's <img> so both cards behave identically */
    .revamp-search-table .picture-img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 164px;
        margin: 0;
        object-fit: contain;
    }


/* button appearance is defined once in the shared .revamp-btn-* group above */


/* --- Results footer: pager + count on one row --- */

/* the length menu is removed from the dom string, but hide it defensively in case
   another code path re-adds it */
.dataTables_wrapper .dataTables_length {
    display: none;
}


/* --- Search hero band ---
   A dark full-bleed band under the nav holding the heading, the search field and
   the call button, whose right edge lines up with the content gutter.

   Being full-bleed, the page wrapper's max-width and vertical padding come off
   on this page. */

.html-search-page .master-wrapper-content {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.html-search-page .master-column-wrapper {
    padding: 0 var(--ap-gutter);
}

.revamp-search-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 186px;
    padding: 27px var(--ap-gutter) 0;
    margin: 0 0 27px;
    background-color: var(--ap-navy-deep);
}

/* not scoped to .page.search-page - the band renders in the Breadcrumb section */
.theme-v2 .revamp-search-hero h1.revamp-search-heading,
.revamp-search-hero h1.revamp-search-heading {
    font-family: var(--ap-font-heading) !important;
    font-weight: 400 !important;
    font-size: var(--ap-text-page-title) !important;
    line-height: var(--ap-leading-heading) !important;
    text-transform: none !important;
    color: var(--ap-white) !important;
    margin: 0 0 25px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-align: center;
}

    .revamp-search-hero h1.revamp-search-heading:before,
    .revamp-search-hero h1.revamp-search-heading:after {
        display: none !important;
    }

.revamp-search-hero-form {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 631px;
    height: 48px;
}

/* the (1,3,1) input:not(...) rule from _Root.Head.cshtml applies here too - REVAMP.md 6.2 */
/* needs (1,4,1) - see above */
.light-theme .theme-v2 .revamp-search-hero .revamp-search-hero-form input#q,
.light-theme .theme-v2 .revamp-search-hero-form input#q,
.theme-v2 .revamp-search-hero-form input#q,
.revamp-search-hero-form input#q {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: var(--ap-white) !important;
    box-shadow: none !important;
    outline: 0 !important;
    font-family: var(--ap-font-body) !important;
    font-size: var(--ap-text-link) !important;
    line-height: normal !important;
    color: var(--ap-navy-deep);
}

    .revamp-search-hero-form input#q::placeholder {
        color: var(--ap-placeholder);
    }

.theme-v2 .revamp-search-hero-form button#AzureSearchButton,
.revamp-search-hero-form button#AzureSearchButton {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: var(--ap-header);
    color: var(--ap-white);
    font-size: 18px;
    line-height: normal;
    cursor: pointer;
}

/* solid call button, not outlined - right edge lines up with the content gutter */
.revamp-search-hero .revamp-search-expert {
    position: absolute;
    top: 30px;
    right: var(--ap-gutter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 179px;
    height: var(--ap-control-height);
    padding: 0 16px;
    border: var(--ap-border-width) solid var(--ap-header);
    border-radius: var(--ap-radius);
    background-color: var(--ap-header);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white);
    text-decoration: none;
    white-space: nowrap;
}

    .revamp-search-hero .revamp-search-expert:hover {
        background-color: var(--ap-navy);
        border-color: var(--ap-navy);
        color: var(--ap-white);
        text-decoration: none;
    }

/* Suggested categories / multiple part search sit in the results column only - they
   push the cards down and never reach across into the sidebar */
.revamp-search-suggestions {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    padding: 0 0 var(--ap-gap);
}

    .revamp-search-suggestions h4 {
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-link);
        line-height: var(--ap-leading-body);
        text-transform: none !important;
        color: var(--ap-blue);
        margin: 0 0 4px;
    }

    .revamp-search-suggestions a {
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        color: var(--ap-blue);
    }

@media (max-width: 1200px) {
    .revamp-search-hero {
        height: auto;
        padding-bottom: 27px;
    }

    .revamp-search-hero .revamp-search-expert {
        position: static;
        margin-top: 16px;
    }
}

/* --- Categories sidebar ---
   Search and shop-by-category specify the same treatment, so the two pages
   share one block. */

.html-search-page .side-2 .block .title,
.html-category-page .side-2 .block .title,
.html-search-page .side-2 .block .title strong,
.html-category-page .side-2 .block .title strong,
.html-search-page .side-2 .block .listbox > .title,
.html-category-page .side-2 .block .listbox > .title {
    font-family: var(--ap-font-heading) !important;
    font-weight: 500 !important;
    font-size: var(--ap-text-subtitle) !important;
    line-height: var(--ap-leading-heading);
    text-transform: none !important;
    color: var(--ap-blue) !important;
}

.html-search-page .side-2 .block .list > li > a,
.html-category-page .side-2 .block .list > li > a {
    font-family: var(--ap-font-heading) !important;
    font-weight: 600 !important;
    font-size: var(--ap-text-link) !important;
    line-height: var(--ap-leading-body) !important;
    text-transform: none !important;
    color: var(--ap-blue) !important;
    text-decoration: none;
}

.html-search-page .side-2 .block .list li ul li a,
.html-category-page .side-2 .block .list li ul li a,
.html-search-page .side-2 .block .list .sublist li a,
.html-category-page .side-2 .block .list .sublist li a {
    font-family: var(--ap-font-heading) !important;
    font-weight: 400 !important;
    font-size: var(--ap-text-body) !important;
    line-height: var(--ap-leading-tight) !important;
    color: var(--ap-blue) !important;
}


/* --- Containment inside the card ---
   The server's Buttons HTML nests four wrappers deep
   (.product-item.item-box.sevenspikes-ajaxcart > .buttons > .ajax-cart-button-wrapper > button)
   and every one of those carries theme sizing built for the old grid: fixed widths, negative
   margins and hover reveals. That is what made the button break out of the card border and
   read as a box inside a box. Everything in the actions area is forced to the card's own
   content width, border-box, no margins. */

.revamp-product-actions {
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

    /* the Call To Order variant is an <a>, the Add to Cart a <button>; both carry
       .revamp-btn-outline-small and are styled by the shared rule */
    .revamp-product-actions a.revamp-btn-outline-small {
        text-decoration: none;
    }

/* --- Hero band is full-bleed above both columns */

.master-wrapper-content > .theme-v2 > .revamp-search-hero {
    margin-bottom: 27px;
}


/* Search card uses the shared .revamp-product-card rules; only the image differs. */

/* Product card - the homepage and search use the same component and only the
   image box differs, so one definition covers both. */

/* Venture reserves a 125-153px well under `.item-box .product-item` for the footer it positions
   absolutely. That selector out-specifies the bare card, so a revamp card inside an item-box -
   the cross-sell grids on the product page and the cart - lost its own padding and grew a dead
   band under the button. The card's own rules are given the matching reach instead of repeating
   their values here. */
.revamp-product-card,
.item-box > .revamp-product-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: 305px;
    min-height: 470px;
    height: auto;
    padding: 23px 30px 26px;
    position: relative;
    background-color: var(--ap-white);
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    box-sizing: border-box;
}

    .revamp-product-card * {
        box-sizing: border-box;
    }

.revamp-product-badgerow {
    flex: 0 0 auto;
    height: 24px;
    margin-bottom: 7px;
}

/* flex items stretch on the cross axis unless told not to */
.revamp-product-card .revamp-product-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: auto;
    min-width: 90px;
    height: 24px;
    margin: 0;
    padding: 0 10px;
    border-radius: var(--ap-radius);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-badge-lg);
    line-height: normal;
    text-transform: uppercase;
    color: var(--ap-white);
}

.revamp-product-card .revamp-product-title {
    flex: 0 0 auto;
    height: 42px;
    margin: 0 0 7px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-tight);
    text-transform: uppercase;
    color: var(--ap-blue);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

    .revamp-product-card .revamp-product-title a {
        color: var(--ap-blue);
        text-decoration: none;
    }

.revamp-product-card .revamp-product-image {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 164px;
    margin: 0;
    text-decoration: none;
}

    .revamp-product-card .revamp-product-image img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 164px;
        margin: 0;
        object-fit: contain;
    }

.revamp-product-card .revamp-product-footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding-bottom: 0;
}

/* card divider */
.revamp-product-card .revamp-product-sku {
    height: 25px;
    margin: 0 0 5px;
    padding: 0 0 4px;
    border-bottom: 1px solid var(--ap-border);
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    letter-spacing: var(--ap-tracking-tight);
    color: var(--ap-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.revamp-product-card .revamp-product-price {
    min-height: 28px;
    margin: 0;
    border: none;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: 28px;
    letter-spacing: var(--ap-tracking-tight);
    color: var(--ap-blue);
}

/* held to one line - wrapping used to push the button through the card border */
.revamp-product-card .revamp-product-core {
    height: 24px;
    margin: 0 0 4px;
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-micro);
    line-height: 24px;
    letter-spacing: var(--ap-tracking-tight);
    color: var(--ap-blue);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Venture's `.item-box button` (0,1,1) collapses catalog buttons to a 50x0 grey chip with
   font-size 0, and it outranks the shared .revamp-btn-outline-small group (0,1,0). Anywhere a card
   sits inside an .item-box - cross-sells, related products, the homepage grids - the action slot
   renders empty without this. */
/* .product-item on the card is what nopAjaxCart walks up to, but Quick View hooks the same class
   and injects a button the frame does not have */
.revamp-product-card > .quick-view-button {
    display: none;
}

/* nopAjaxCart replaces the card's own button with its own markup once its JS runs, so the slot
   has to look the same either way */
.revamp-product-card .revamp-product-actions .ajax-cart-button-wrapper {
    display: block;
    flex: 1 1 auto;
    width: 100% !important;
    max-width: none;
    height: 100%;
    margin: 0;
}

.revamp-product-card .revamp-btn-outline-small,
.item-box .revamp-product-card .revamp-btn-outline-small,
.revamp-product-card .revamp-product-actions .product-box-add-to-cart-button,
.item-box .revamp-product-card .revamp-product-actions .product-box-add-to-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    width: 100% !important;
    height: 32px !important;
    min-height: 32px;
    border: var(--ap-border-width) solid var(--ap-blue) !important;
    border-radius: var(--ap-radius);
    background: var(--ap-white) !important;
    background-color: var(--ap-white) !important;
    font-family: var(--ap-font-heading) !important;
    font-weight: 700;
    font-size: var(--ap-text-button) !important;
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-blue) !important;
}

    .revamp-product-card .revamp-btn-outline-small:hover,
    .item-box .revamp-product-card .revamp-btn-outline-small:hover,
    .revamp-product-card .revamp-product-actions .product-box-add-to-cart-button:hover,
    .item-box .revamp-product-card .revamp-product-actions .product-box-add-to-cart-button:hover {
        background: var(--ap-blue) !important;
        background-color: var(--ap-blue) !important;
        color: var(--ap-white) !important;
    }

/* the action slot is always present and always 32px, so the footer - and part #, price and
   core charge above it - sits at the same height on every card in a row */
.revamp-product-card .revamp-product-actions {
    display: flex;
    height: 32px;
}

/* The search grid and the catalog grid are the same geometry (3 x 1fr, --ap-gap), so the cards get
   the same treatment on both: fill the column rather than sit at 305 inside a wider track, which
   left dead space that read as uneven spacing between the two pages. The image box was larger here
   than everywhere else - Erika's file carries both sizes, so this standardises on the smaller one
   the other surfaces use. */
.revamp-search-table .revamp-product-card {
    max-width: none;
    height: 100%;
}

/* Pagination - a right-aligned row. */

.revamp-results-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.dataTables_wrapper .dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 17px;
    float: none;
    margin: 0;
}

/* page numbers: no box, no border - just type, inactive at 50% */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 26px;
    padding: 0;
    margin: 0;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-subtitle);
    line-height: 26px;
    color: var(--ap-blue) !important;
    opacity: 0.5;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        opacity: 1;
        border: none !important;
        background: none !important;
        background-color: transparent !important;
        color: var(--ap-blue) !important;
    }

/* previous / next are outlined buttons with a label and an arrow */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    gap: 8px;
    min-width: 120px;
    height: 32px;
    padding: 0 14px;
    border: var(--ap-border-width) solid var(--ap-blue) !important;
    border-radius: var(--ap-radius) !important;
    font-size: var(--ap-text-micro);
    line-height: normal;
    text-transform: uppercase;
    color: var(--ap-header) !important;
    opacity: 1;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
        background-color: var(--ap-blue) !important;
        color: var(--ap-white) !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
        opacity: 0.35;
        background: none !important;
        color: var(--ap-header) !important;
    }

.revamp-pg-label {
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-micro);
    text-transform: uppercase;
    letter-spacing: var(--ap-tracking-button);
}

.revamp-pg-arrow {
    font-size: 12px;
}

.dataTables_wrapper .dataTables_info {
    float: none;
    padding: 0;
    margin: 0;
    font-family: var(--ap-font-body);
    font-weight: 400;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}


/* min-height, not height - a wrapping core charge used to push the button
   through the bottom border. */

.revamp-product-card,
.item-box > .revamp-product-card,
.revamp-search-table .revamp-product-card {
    height: auto;
    min-height: 470px;
    padding-bottom: 26px;
}


/* Bootstrap-4 DataTables renders li.paginate_button > a.page-link. Strip the li,
   style the a, or you get a box inside a box. */

.dataTables_wrapper ul.pagination {
    display: flex;
    align-items: center;
    gap: 17px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dataTables_wrapper .dataTables_paginate li.paginate_button,
.dataTables_wrapper .dataTables_paginate li.page-item {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .page-link,
.dataTables_wrapper .dataTables_paginate li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 26px;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-subtitle);
    line-height: 26px;
    color: var(--ap-blue) !important;
    opacity: 0.5;
}

    .dataTables_wrapper .dataTables_paginate li.active > .page-link,
    .dataTables_wrapper .dataTables_paginate li.active > a,
    .dataTables_wrapper .dataTables_paginate li.current > a,
    .dataTables_wrapper .dataTables_paginate .page-link:hover,
    .dataTables_wrapper .dataTables_paginate li > a:hover {
        opacity: 1;
        border: none !important;
        background: none !important;
        background-color: transparent !important;
        color: var(--ap-blue) !important;
    }

/* previous / next: the outlined button sits on the <a>, not the <li> */
.dataTables_wrapper .dataTables_paginate li.previous > .page-link,
.dataTables_wrapper .dataTables_paginate li.next > .page-link,
.dataTables_wrapper .dataTables_paginate li.previous > a,
.dataTables_wrapper .dataTables_paginate li.next > a {
    gap: 8px;
    min-width: 120px;
    height: 32px;
    padding: 0 14px !important;
    border: var(--ap-border-width) solid var(--ap-blue) !important;
    border-radius: var(--ap-radius) !important;
    font-size: var(--ap-text-micro);
    line-height: normal;
    text-transform: uppercase;
    color: var(--ap-header) !important;
    opacity: 1;
}

    .dataTables_wrapper .dataTables_paginate li.previous > a:hover,
    .dataTables_wrapper .dataTables_paginate li.next > a:hover {
        background-color: var(--ap-blue) !important;
        color: var(--ap-white) !important;
    }

    .dataTables_wrapper .dataTables_paginate li.disabled > a,
    .dataTables_wrapper .dataTables_paginate li.disabled > .page-link,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled > a {
        opacity: 0.35;
    }


/* Sidebar expand toggle. The theme draws a grey box with a venture-font glyph;
   the design is a bare chevron that flips when
   open. Drawn with borders so it needs no icon font. */
.html-category-page .side-2 .sublist-toggle-button,
.html-search-page .side-2 .sublist-toggle-button {
    width: 28px;
    height: 28px;
    top: 0;
    background: none;
    box-shadow: none;
}

    .html-category-page .side-2 .sublist-toggle-button:hover,
    .html-search-page .side-2 .sublist-toggle-button:hover {
        background: none;
    }

    .html-category-page .side-2 .sublist-toggle-button:before,
    .html-search-page .side-2 .sublist-toggle-button:before {
        content: "";
        width: 8px;
        height: 8px;
        margin: auto;
        border: solid var(--ap-blue);
        border-width: 0 var(--ap-border-width) var(--ap-border-width) 0;
        transform: translateY(-3px) rotate(45deg);
        background: none;
        box-shadow: none;
        font-size: 0;
        transition: transform 0.2s ease-in-out;
    }

    .html-category-page .side-2 .sublist-toggle-button.open:before,
    .html-search-page .side-2 .sublist-toggle-button.open:before {
        transform: translateY(1px) rotate(-135deg);
    }


/* Sort and page size. Not in the export, so they take the design's standard dropdown field.
   !important because _Root.Head's inline form rules force every select */
.product-selectors .product-page-size,
.product-selectors .product-sorting {
    position: relative;
}

    .product-selectors .product-page-size:after,
    .product-selectors .product-sorting:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 13px;
        margin-top: -2px;
        border-style: solid;
        border-width: 5px 5.5px 0;
        border-color: var(--ap-blue) transparent transparent;
        pointer-events: none;
    }

.product-selectors select {
    display: block;
    min-width: 170px;
    height: var(--ap-control-height) !important;
    padding: 0 38px 0 14px !important;
    line-height: normal !important;
    border: var(--ap-border-width) solid var(--ap-border) !important;
    border-radius: var(--ap-radius) !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: none;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    color: var(--ap-blue);
    text-align: left;
    text-align-last: left;
    text-transform: none;
}

    .product-selectors select:focus {
        border-color: var(--ap-blue) !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

/* Filter by Series - the same outlined button as the pager's previous/next */
.revamp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ap-gap-horizontal);
    margin: 0 0 var(--ap-gap);
}

.theme-v2 .revamp-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 32px;
    padding: 0 22px;
    border: var(--ap-border-width) solid var(--ap-blue);
    border-radius: var(--ap-radius);
    background-color: transparent;
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-micro);
    line-height: normal;
    text-transform: uppercase;
    color: var(--ap-header);
    text-decoration: none;
    white-space: nowrap;
}

    .theme-v2 .revamp-chip:hover,
    .theme-v2 .revamp-chip.is-active {
        background-color: var(--ap-blue);
        color: var(--ap-white);
        text-decoration: none;
    }

/* the grid/list toggle does nothing now - catalog grids always render V2 cards */
.html-category-page .product-viewmode,
.html-manufacturer-page .product-viewmode {
    display: none;
}

/* Catalog grid - category and manufacturer pages. Same geometry as the search
   results grid so the two surfaces stay in step. */
.revamp-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ap-gap);
    align-items: stretch;
}

@media (max-width: 991px) {
    .revamp-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .revamp-catalog-grid {
        grid-template-columns: 1fr;
    }
}

/* cards fill their column here, unlike the fixed-width homepage row */
.revamp-catalog-grid .revamp-product-card {
    max-width: none;
    height: 100%;
}

/* Catalog pager - nop's own markup restyled to match the search pager:
   numbers in Archivo Medium, previous/next as outlined buttons. */
.revamp-pager ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    list-style: none;
    margin: var(--ap-section-space) 0 0;
    padding: 0;
}

.revamp-pager li {
    float: none;
    margin: 0;
    padding: 0;
}

/* numbers evenly spaced, set clear of previous/next */
.revamp-pager li.previous-page {
    margin-right: 79px;
}

.revamp-pager li.next-page {
    margin-left: 79px;
}

.revamp-pager li a,
.revamp-pager li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-subtitle);
    line-height: 26px;
    color: var(--ap-blue);
    text-decoration: none;
    opacity: 0.5;
}

.revamp-pager li.current-page span {
    opacity: 1;
}

    .revamp-pager li a:hover {
        opacity: 1;
        background: none;
        color: var(--ap-blue);
    }

.revamp-pager li.previous-page a,
.revamp-pager li.next-page a,
.revamp-pager li.first-page a,
.revamp-pager li.last-page a {
    min-width: 120px;
    height: 32px;
    padding: 0 14px;
    border: var(--ap-border-width) solid var(--ap-blue);
    border-radius: var(--ap-radius);
    font-size: var(--ap-text-micro);
    line-height: normal;
    text-transform: uppercase;
    color: var(--ap-header);
    opacity: 1;
}

    .revamp-pager li.previous-page a:hover,
    .revamp-pager li.next-page a:hover,
    .revamp-pager li.first-page a:hover,
    .revamp-pager li.last-page a:hover {
        background-color: var(--ap-blue);
        color: var(--ap-white);
    }

/* the theme draws chevrons on first/last via :before */
.revamp-pager li a:before,
.revamp-pager li a:after {
    display: none;
}


/* Category page */

.html-category-page .master-wrapper-content,
.html-revamp-page .master-wrapper-content {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.html-category-page .master-column-wrapper,
.html-revamp-page .master-column-wrapper {
    padding: 0 var(--ap-gutter);
}

/* hero band - category picture behind, heading bottom-left */
.revamp-cat-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 376px;
    padding: 0 var(--ap-gutter) 47px;
    margin-bottom: 41px;
    background-color: var(--ap-header);
    background-size: cover;
    background-position: center;
}

/* The export's hero photo is dark, so its white title needs no help. Category
   pictures are whatever the catalogue happens to hold - a bright sky drops white
   to about 2.5:1 - so a scrim keeps the specified white legible over any of them. */
.revamp-cat-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 26, 44, 0.72) 0%, rgba(0, 26, 44, 0.35) 38%, rgba(0, 26, 44, 0) 70%);
    pointer-events: none;
}

.revamp-cat-hero > * {
    position: relative;
    z-index: 1;
}

.theme-v2 .revamp-cat-hero h1.revamp-cat-hero-title,
.theme-v2.revamp-cat-hero h1.revamp-cat-hero-title {
    font-family: var(--ap-font-heading) !important;
    font-weight: 400 !important;
    font-size: var(--ap-text-page-title) !important;
    line-height: var(--ap-leading-heading) !important;
    text-transform: none !important;
    color: var(--ap-white) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

    .theme-v2 .revamp-cat-hero h1.revamp-cat-hero-title:before,
    .theme-v2.revamp-cat-hero h1.revamp-cat-hero-title:before,
    .theme-v2 .revamp-cat-hero h1.revamp-cat-hero-title:after,
    .theme-v2.revamp-cat-hero h1.revamp-cat-hero-title:after {
        display: none !important;
    }

/* 179x40 call button, shared by the hero bands and the FAQ block */
.revamp-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 179px;
    height: var(--ap-control-height);
    padding: 0 16px;
    border: var(--ap-border-width) solid var(--ap-white);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-blue);
    text-decoration: none;
    white-space: nowrap;
}

    .revamp-hero-cta:hover {
        background-color: transparent;
        color: var(--ap-white);
        text-decoration: none;
    }

.revamp-cat-hero .revamp-hero-cta {
    position: absolute;
    top: 299px;
    right: var(--ap-gutter);
}

/* on phones a two-line title runs into the pinned button, so it drops under the title */
@media (max-width: 767px) {
    .revamp-cat-hero {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 16px;
    }

        .revamp-cat-hero .revamp-hero-cta {
            position: static;
        }
}

/* subcategory tiles - square, five across */
.revamp-subcategories {
    margin-bottom: 60px;
}

.revamp-subcategory-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 55px 20px;
    margin-top: 24px;
}

@media (max-width: 1200px) {
    .revamp-subcategory-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .revamp-subcategory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.html-category-page .category-page-title .category-picture-wrapper:empty {
    display: none;
}

/* Bands rendered through the FullBleed slot sit directly in .master-wrapper-content,
   which is already the full width - so the 100vw breakout below is not only redundant
   here, it overflows by the scrollbar width. */
.revamp-fullbleed > .revamp-faq,
.revamp-fullbleed > .revamp-loyalty {
    width: 100%;
    margin-left: 0;
}

/* loyalty band - image left, copy right on the header blue */
.revamp-loyalty {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background-color: var(--ap-header);
}

.revamp-loyalty-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 74px var(--ap-gutter) 87px 68px;
}

@media (max-width: 991px) {
    .revamp-loyalty-inner {
        grid-template-columns: 1fr;
    }
}

.revamp-loyalty-image img {
    display: block;
    width: 100%;
    aspect-ratio: 608 / 563;
    object-fit: cover;
    border-radius: var(--ap-radius-lg);
}

.theme-v2 .revamp-loyalty-copy h2 {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-hero);
    line-height: 46px;
    text-transform: none !important;
    color: var(--ap-white);
    margin: 0 0 33px;
}

.revamp-loyalty-copy p {
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-card);
    line-height: 25px;
    color: var(--ap-white);
    margin: 0 0 12px;
}

    .revamp-loyalty-copy p:last-child {
        margin-bottom: 0;
    }

/* FAQ band - copy left, cards right on --ap-navy */
.revamp-faq {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background-color: var(--ap-navy);
}

.revamp-faq-inner {
    display: grid;
    grid-template-columns: 1fr var(--ap-faq-width);
    gap: 104px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 81px var(--ap-gutter) 82px 103px;
}

@media (max-width: 1200px) {
    .revamp-faq-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* the documented dark-band h2 size; the one frame that differs is the outlier */
.theme-v2 .revamp-faq h2.revamp-faq-title,
.theme-v2.revamp-faq h2.revamp-faq-title {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-section);
    line-height: var(--ap-leading-section);
    letter-spacing: var(--ap-tracking-section);
    text-transform: none !important;
    color: var(--ap-white);
    margin: 0 0 var(--ap-gap);
}

.theme-v2 .revamp-faq h3.revamp-faq-cta-title,
.theme-v2.revamp-faq h3.revamp-faq-cta-title {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-section);
    line-height: var(--ap-leading-section);
    letter-spacing: var(--ap-tracking-section);
    text-transform: none !important;
    color: var(--ap-white);
    /* sits at the foot of the column, not under the intro - the frame's box holds two lines
       with the button at its foot */
    margin: auto 0 26px;
}

.revamp-faq-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.revamp-faq-copy .revamp-hero-cta {
    min-width: 178px;
}

/* ends clear of the last question card */
@media (min-width: 1201px) {
    .revamp-faq-copy .revamp-hero-cta {
        margin-bottom: 88px;
    }
}

.revamp-faq-intro {
    font-family: var(--ap-font-body);
    font-weight: 400;
    font-size: var(--ap-text-card);
    line-height: var(--ap-leading-body);
    color: var(--ap-white);
    margin: 0;
    max-width: 528px;
}

.revamp-faq-item {
    padding: 25px 33px;
    margin-bottom: var(--ap-gap);
    border-radius: var(--ap-radius);
    background-color: var(--ap-page-bg);
}

    .revamp-faq-item:last-child {
        margin-bottom: 0;
    }

    .theme-v2 .revamp-faq-item h3 {
        font-family: var(--ap-font-heading);
        font-weight: 700;
        font-size: var(--ap-text-card);
        line-height: var(--ap-leading-card);
        text-transform: none !important;
        color: var(--ap-blue);
        margin: 0 0 12px;
    }

    .revamp-faq-item p {
        font-family: var(--ap-font-body);
        font-weight: 400;
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        color: var(--ap-blue);
        margin: 0;
    }

    .revamp-faq-item a {
        color: var(--ap-blue);
        text-decoration: underline;
    }

    .revamp-faq-item p + p,
    .revamp-faq-item ul + p {
        margin-top: 12px;
    }

    .revamp-faq-item ul {
        margin: 12px 0 0;
        padding: 0;
        list-style: none;
        columns: 2;
        column-gap: var(--ap-gap);
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        color: var(--ap-blue);
    }

        .revamp-faq-item ul li {
            break-inside: avoid;
        }

    /* a plain bulleted answer */
    .revamp-faq-item ul.revamp-faq-bullets {
        columns: 1;
        padding-left: 20px;
        list-style: disc;
    }

    /* engine model list runs four across */
    .revamp-faq-item ul.revamp-faq-columns-4 {
        columns: 4;
    }


/* Title band - the navy page header for pages with no hero photo */

.revamp-title-band {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ap-gap);
    height: 152px;
    padding: 0 var(--ap-gutter) 22px;
    margin: 0 0 64px;
    background-color: var(--ap-navy-deep);
}

.revamp-title-band-copy {
    min-width: 0;
}

.revamp-title-band-eyebrow {
    margin: 0 0 10px;
    font-family: var(--ap-font-heading);
    font-weight: 400;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-tight);
    color: var(--ap-white);
}

.theme-v2 .revamp-title-band h1.revamp-band-title,
.theme-v2.revamp-title-band h1.revamp-band-title {
    font-family: var(--ap-font-heading) !important;
    font-weight: 400 !important;
    font-size: var(--ap-text-page-title) !important;
    line-height: var(--ap-leading-heading) !important;
    text-transform: none !important;
    color: var(--ap-white) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

    .theme-v2 .revamp-title-band h1.revamp-band-title:before,
    .theme-v2.revamp-title-band h1.revamp-band-title:before,
    .theme-v2 .revamp-title-band h1.revamp-band-title:after,
    .theme-v2.revamp-title-band h1.revamp-band-title:after {
        display: none !important;
    }

/* the search hero's call button - filled header blue on the dark band */
.revamp-band-cta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 179px;
    height: var(--ap-control-height);
    padding: 0 16px;
    margin-bottom: 6px;
    border: var(--ap-border-width) solid var(--ap-header);
    border-radius: var(--ap-radius);
    background-color: var(--ap-header);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white);
    text-decoration: none;
    white-space: nowrap;
}

    .revamp-band-cta:hover {
        border-color: var(--ap-navy);
        background-color: var(--ap-navy);
        color: var(--ap-white);
        text-decoration: none;
    }

@media (max-width: 767px) {
    .revamp-title-band {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding-top: 32px;
    }
}


/* Engines - a full-width photo panel per brand, straight under the title band. Content is inset
   from the outer edge and sits closer to the middle. */

.html-revamp-engines-page .revamp-title-band {
    margin-bottom: 0;
}

.revamp-engines {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 calc(-1 * var(--ap-gutter));
    text-align: left;
}

.revamp-engine-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 650px;
    padding: 46px var(--ap-gutter-narrow) 51px var(--ap-gutter);
    background-color: var(--ap-navy-deep);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

    .revamp-engine-panel:before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--ap-shade-continental);
        opacity: 0.4;
        mix-blend-mode: multiply;
    }

    .revamp-engine-panel > * {
        position: relative;
    }

.revamp-engine-panel-lycoming {
    padding-right: var(--ap-gutter);
    padding-left: var(--ap-gutter-narrow);
}

    .revamp-engine-panel-lycoming:before {
        background-color: var(--ap-shade-lycoming);
        opacity: 0.75;
        mix-blend-mode: difference;
    }

.revamp-engine-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ap-gap);
    padding-bottom: 3px;
    margin-bottom: 21px;
    border-bottom: var(--ap-border-width) solid var(--ap-white);
}

.theme-v2.revamp-engines h2.revamp-engine-panel-title {
    margin: 0;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-section);
    line-height: var(--ap-leading-section);
    letter-spacing: var(--ap-tracking-section);
    text-transform: none !important;
    color: var(--ap-white);
}

/* chip-sized outline with the arrow */
.theme-v2 .revamp-engine-browse {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    min-width: 112px;
    height: 32px;
    margin-top: 1px;
    padding: 0 11px 0 16px;
    border: var(--ap-border-width) solid var(--ap-white);
    border-radius: var(--ap-radius);
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-micro);
    line-height: normal;
    text-transform: uppercase;
    color: var(--ap-white);
    text-decoration: none;
}

    .theme-v2 .revamp-engine-browse:after {
        content: "";
        width: 14px;
        height: 15px;
        margin-left: 12px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-1%20-1%2014%2015%27%3E%3Cpath%20d=%27M0%206.5h12M6%200l6%206.5-6%206.5%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-1%20-1%2014%2015%27%3E%3Cpath%20d=%27M0%206.5h12M6%200l6%206.5-6%206.5%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
    }

    .theme-v2 .revamp-engine-browse:hover {
        background-color: var(--ap-white);
        color: var(--ap-navy);
        text-decoration: none;
    }

.revamp-engine-panel-intro,
.revamp-engine-panel-range {
    margin: 0;
    font-family: var(--ap-font-body);
    font-weight: 500;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-tight);
    color: var(--ap-white);
}

.revamp-engine-panel-intro {
    margin-bottom: var(--ap-gap);
    letter-spacing: var(--ap-tracking-tight);
}

/* held at two lines so both panels' closing lines start level when only one of them wraps */
.revamp-engine-panel-range {
    min-height: calc(2 * var(--ap-leading-tight));
    margin-top: auto;
}

@media (max-width: 991px) {
    .revamp-engines {
        grid-template-columns: 1fr;
    }

    .revamp-engine-panel,
    .revamp-engine-panel-lycoming {
        min-height: 480px;
        padding-right: var(--ap-gutter);
        padding-left: var(--ap-gutter);
    }
}


/* Engine Financing - one navy band under the photo hero: intro, three numbered steps, then
   the application block. */

.html-revamp-financing-page .revamp-cat-hero {
    margin-bottom: 0;
}

/* the subtitle goes under the title, which keeps its place from the frame */
.revamp-cat-hero-has-sub {
    padding-bottom: 21px;
}

.revamp-cat-hero-sub {
    margin: 5px 0 0;
    font-family: var(--ap-font-heading);
    font-weight: 400;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-tight);
    color: var(--ap-white);
}

.revamp-financing {
    margin: 0 calc(-1 * var(--ap-gutter));
    padding: 41px var(--ap-gutter) var(--ap-section-space);
    background-color: var(--ap-navy);
    text-align: left;
}

.theme-v2.revamp-financing h2.revamp-financing-title {
    margin: 0 0 12px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-section);
    line-height: var(--ap-leading-section);
    letter-spacing: var(--ap-tracking-section);
    color: var(--ap-white);
}

.revamp-financing-lede {
    margin: 0;
    font-family: var(--ap-font-body);
    font-weight: 400;
    font-size: var(--ap-text-card);
    line-height: var(--ap-leading-body);
    color: var(--ap-white);
}

.revamp-financing-hook {
    max-width: 636px;
    margin: 0 auto;
    text-align: center;
}

.revamp-financing-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 41px 0;
    padding: 0;
    list-style: none;
}

/* number on top, heading under it, body pinned to the foot of the card */
.revamp-financing-step {
    display: flex;
    flex-direction: column;
    min-height: 346px;
    padding: 31px 30px 42px;
    border-radius: var(--ap-radius);
    background-color: var(--ap-page-bg);
    color: var(--ap-blue);
}

.revamp-financing-step-number {
    margin: 0 0 38px;
    font-family: var(--ap-font-heading);
    font-weight: 400;
    font-size: var(--ap-text-display);
    line-height: 70px;
    text-align: center;
}

.theme-v2.revamp-financing h3.revamp-financing-step-title {
    margin: 0 0 6px;
    font-family: var(--ap-font-heading);
    font-weight: 700;
    font-size: var(--ap-text-subtitle);
    line-height: 26px;
    text-transform: uppercase !important;
    text-wrap: balance;
    color: var(--ap-blue);
}

.revamp-financing-step-subtitle {
    margin: 0;
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

.revamp-financing-step-body {
    margin: auto 0 0;
    padding-top: 23px;
    font-family: var(--ap-font-body);
    font-weight: 400;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-fine);
    color: var(--ap-blue);
}

.revamp-financing-start {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

    .revamp-financing-start .revamp-financing-lede {
        max-width: 405px;
        margin-bottom: 20px;
    }

/* its right edge lines up with the third card's copy, inset from the card */
.revamp-financing-note {
    justify-self: end;
    width: 100%;
    max-width: 581px;
    margin-right: 30px;
    padding-top: 4px;
}

    .revamp-financing-note p {
        margin: 0 0 22px;
        font-family: var(--ap-font-body);
        font-weight: 500;
        font-size: var(--ap-text-link);
        line-height: 22px;
        color: var(--ap-white);
    }

        .revamp-financing-note p:last-child {
            margin-bottom: 0;
        }

@media (max-width: 991px) {
    .revamp-financing-steps,
    .revamp-financing-start {
        grid-template-columns: 1fr;
    }

    .revamp-financing-note {
        justify-self: stretch;
        max-width: none;
        margin-right: 0;
    }

    .revamp-financing-step {
        min-height: 0;
    }
}


/* FAQ page - white question cards in two columns on the page background, set under the title
   band. The cards are .revamp-faq-item. */

.html-revamp-frequently-asked-questions-page .revamp-title-band {
    margin-bottom: 43px;
}

.revamp-faq-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 29px;
    align-items: start;
    margin-bottom: 47px;
    text-align: left;
}

    /* most cards inset their copy from the card edge; the long first card insets less */
    .revamp-faq-page .revamp-faq-item {
        padding: 25px 48px;
        margin-bottom: 27px;
        background-color: var(--ap-white);
    }

        .revamp-faq-page .revamp-faq-item-wide {
            padding: 25px 33px;
        }

        .theme-v2.revamp-faq-page .revamp-faq-item h3 {
            margin-bottom: 9px;
        }

        .revamp-faq-page .revamp-faq-item:last-child {
            margin-bottom: 0;
        }

        .revamp-faq-page .revamp-faq-item p + p,
        .revamp-faq-page .revamp-faq-item ul + p {
            margin-top: 24px;
        }

        .revamp-faq-page .revamp-faq-item ul.revamp-faq-bullets {
            margin-top: 0;
        }

        .revamp-faq-page .revamp-faq-item ul.revamp-faq-spaced {
            margin-top: 24px;
        }

@media (max-width: 991px) {
    .revamp-faq-page {
        grid-template-columns: 1fr;
        gap: 27px;
    }

        .revamp-faq-page .revamp-faq-item {
            padding: 25px 33px;
        }
}

/* a numbered answer */
.revamp-faq-item ol.revamp-faq-numbered {
    margin: 12px 0 0;
    padding-left: 22px;
    list-style: decimal;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}


/* Manufacturers - featured logos, an A-Z jump row, every other manufacturer by letter,
   then the info band and the FAQ band, which laps the info band's foot by its corner radius */

.html-manufacturer-list-page .revamp-title-band {
    margin-bottom: 25px;
}

.revamp-mfr-page {
    text-align: left;
}

.theme-v2.revamp-mfr-page h2.revamp-mfr-featured-title {
    margin: 0 0 18px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-title);
    line-height: var(--ap-leading-heading);
    color: var(--ap-blue);
}

/* five across, with the name under each card */
.revamp-mfr-featured {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.theme-v2 .revamp-mfr-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    padding: 14px 18px;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

    .theme-v2 .revamp-mfr-logo:hover {
        border-color: var(--ap-blue);
    }

    .revamp-mfr-logo img {
        max-width: 100%;
        max-height: 69px;
        object-fit: contain;
    }

.theme-v2 .revamp-mfr-logo-name {
    display: block;
    margin-top: 11px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-tight);
    text-transform: uppercase;
    color: var(--ap-blue);
    text-decoration: none;
}

    .theme-v2 .revamp-mfr-logo-name:hover {
        text-decoration: underline;
    }

/* letter tiles, the current letter solid; arrows scroll the row when it overflows */
.revamp-alpha {
    margin-top: 76px;
}

.revamp-alpha-arrows {
    display: flex;
    justify-content: flex-end;
    gap: 22px;
    margin-bottom: 22px;
}

.revamp-alpha:not(.is-scrollable) .revamp-alpha-arrows {
    visibility: hidden;
}

.theme-v2 .revamp-alpha-arrows button {
    width: 17px;
    height: 17px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background-color: var(--ap-blue);
    cursor: pointer;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-1%20-1%2017%2017%27%3E%3Cpath%20d=%27M15%207.5H0M7.5%200L0%207.5%207.5%2015%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-1%20-1%2017%2017%27%3E%3Cpath%20d=%27M15%207.5H0M7.5%200L0%207.5%207.5%2015%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
}

    .theme-v2 .revamp-alpha-arrows .revamp-alpha-next {
        transform: scaleX(-1);
    }

    .theme-v2 .revamp-alpha-arrows button:disabled {
        opacity: 0.3;
        cursor: default;
    }

.revamp-alpha-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .revamp-alpha-track::-webkit-scrollbar {
        display: none;
    }

.theme-v2 .revamp-alpha-tile {
    display: flex;
    flex: 0 0 45px;
    align-items: center;
    justify-content: center;
    height: 45px;
    border-radius: var(--ap-radius);
    background-color: color-mix(in srgb, var(--ap-header) 30%, transparent);
    font-family: var(--ap-font-heading);
    font-weight: 400;
    font-size: var(--ap-text-section);
    line-height: 1;
    text-transform: uppercase;
    color: var(--ap-white);
    text-decoration: none;
}

    .theme-v2 a.revamp-alpha-tile:hover,
    .theme-v2 .revamp-alpha-tile.is-active {
        background-color: var(--ap-header);
        color: var(--ap-white);
        text-decoration: none;
    }

    .theme-v2 .revamp-alpha-tile.is-empty {
        opacity: 0.4;
    }

/* letter over a rule at half strength, names in columns as wide as their longest */
.revamp-mfr-groups {
    margin: 59px 0 72px;
}

.revamp-mfr-group {
    scroll-margin-top: 24px;
}

    .revamp-mfr-group + .revamp-mfr-group {
        margin-top: 27px;
    }

.theme-v2.revamp-mfr-page h2.revamp-mfr-letter {
    margin: 0;
    border-bottom: var(--ap-border-width) solid color-mix(in srgb, var(--ap-blue) 50%, transparent);
    font-family: var(--ap-font-heading);
    font-weight: 400;
    font-size: 42px;
    line-height: var(--ap-leading-heading);
    color: var(--ap-blue);
}

.revamp-mfr-names {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--rows), auto);
    grid-auto-columns: minmax(0, max-content);
    column-gap: 115px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

    .theme-v2 .revamp-mfr-names a {
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-tight);
        color: var(--ap-blue);
        text-decoration: none;
    }

        .theme-v2 .revamp-mfr-names a:hover {
            text-decoration: underline;
        }

/* on the FAQ band's grid (.revamp-faq-inner), so the headings share its left edge and the copy
   starts where its cards do */
.revamp-mfr-info {
    padding: 52px 0 calc(47px + var(--ap-radius-lg));
    border-radius: var(--ap-radius-lg) var(--ap-radius-lg) 0 0;
    background-color: var(--ap-header);
}

.revamp-mfr-info-inner {
    display: grid;
    grid-template-columns: 1fr var(--ap-faq-width);
    gap: 64px 104px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--ap-gutter) 0 103px;
    text-align: left;
}

    .revamp-mfr-info-inner > div {
        max-width: 553px;
    }

.theme-v2 .revamp-mfr-info h2 {
    margin: 0;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-section);
    line-height: var(--ap-leading-section);
    letter-spacing: var(--ap-tracking-section);
    text-transform: none !important;
    color: var(--ap-white);
}

.revamp-mfr-info p {
    margin: 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-white);
}

    .revamp-mfr-info p + p {
        margin-top: 24px;
    }

.revamp-fullbleed > .revamp-mfr-info + .revamp-faq {
    position: relative;
    margin-top: calc(-1 * var(--ap-radius-lg));
    border-radius: var(--ap-radius-lg) var(--ap-radius-lg) 0 0;
}

@media (max-width: 1200px) {
    .revamp-mfr-names {
        column-gap: 48px;
    }

    .revamp-mfr-info-inner {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }
}

@media (max-width: 991px) {
    .revamp-mfr-featured {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .revamp-mfr-featured {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .revamp-mfr-names {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }
}


/* Saved Parts - the wishlist. A navy header row, then bordered rows on the same grid;
   neighbouring rows share their border. */

.revamp-saved-page {
    max-width: 1201px;
    margin: 33px auto 80px;
    text-align: left;
}

.theme-v2.revamp-saved-page h1.revamp-saved-title {
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-family: var(--ap-font-heading) !important;
    font-weight: 600 !important;
    font-size: var(--ap-text-title) !important;
    line-height: var(--ap-leading-heading) !important;
    text-align: left;
    text-transform: none !important;
    color: var(--ap-blue) !important;
}

    .theme-v2.revamp-saved-page h1.revamp-saved-title:before,
    .theme-v2.revamp-saved-page h1.revamp-saved-title:after {
        display: none !important;
    }

.revamp-saved-head,
.revamp-saved-row {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr) 139px 176px 144px 163px;
    align-items: center;
}

.revamp-saved-head {
    height: 53px;
    background-color: var(--ap-navy);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-body);
    letter-spacing: var(--ap-tracking-tight);
    color: var(--ap-white);
}

    .revamp-saved-head-item {
        grid-column: 2;
    }

    .revamp-saved-head-price {
        grid-column: 3;
    }

    .revamp-saved-head-qty {
        grid-column: 4;
    }

    .revamp-saved-head-total {
        grid-column: 5;
    }

.revamp-saved-row {
    position: relative;
    grid-template-areas: "image item price qty total cart";
    min-height: 149px;
    border: var(--ap-border-width) solid var(--ap-border);
    background-color: var(--ap-white);
}

    .revamp-saved-row + .revamp-saved-row {
        margin-top: calc(-1 * var(--ap-border-width));
    }

.revamp-saved-image {
    grid-area: image;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 137px;
    height: 122px;
    margin-left: 57px;
    overflow: hidden;
    border-radius: var(--ap-radius);
}

    .revamp-saved-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.revamp-saved-item {
    grid-area: item;
    padding-right: var(--ap-gap);
}

.theme-v2 .revamp-saved-name {
    display: block;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-tight);
    text-transform: uppercase;
    color: var(--ap-blue);
    text-decoration: none;
}

    .theme-v2 .revamp-saved-name:hover {
        text-decoration: underline;
    }

.revamp-saved-sku {
    display: block;
    margin-top: 5px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-tight);
    text-transform: uppercase;
    color: var(--ap-blue);
}

.revamp-saved-item .attributes,
.revamp-saved-item .recurring-info,
.revamp-saved-item .rental-info,
.revamp-saved-item .message-error,
.theme-v2 .revamp-saved-edit {
    display: block;
    margin-top: 6px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-fine);
    line-height: var(--ap-leading-fine);
    color: var(--ap-blue);
}

.revamp-saved-price,
.revamp-saved-subtotal {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-body);
    letter-spacing: var(--ap-tracking-tight);
    color: var(--ap-blue);
}

.revamp-saved-price {
    grid-area: price;
}

.revamp-saved-subtotal {
    grid-area: total;
}

    .revamp-saved-subtotal .discount,
    .revamp-saved-subtotal .discount-additional-info {
        font-family: var(--ap-font-body);
        font-weight: 400;
        font-size: var(--ap-text-fine);
        line-height: var(--ap-leading-fine);
        letter-spacing: 0;
    }

.revamp-saved-qty {
    grid-area: qty;
}

/* outlined, with the minus and plus drawn in the button */
.revamp-qty {
    display: inline-flex;
    align-items: stretch;
    justify-content: space-between;
    width: 108px;
    height: var(--ap-control-height);
    margin-left: 4px;
    border: var(--ap-border-width) solid var(--ap-blue);
    border-radius: var(--ap-radius);
}

.theme-v2 .revamp-qty button {
    position: relative;
    flex: 0 0 32px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    cursor: pointer;
}

    .theme-v2 .revamp-qty button:before,
    .theme-v2 .revamp-qty .revamp-qty-plus:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 2px;
        margin: -1px 0 0 -6px;
        background-color: var(--ap-blue);
    }

    .theme-v2 .revamp-qty .revamp-qty-plus:after {
        transform: rotate(90deg);
    }

.light-theme .theme-v2 .revamp-qty input.revamp-qty-input,
.theme-v2 .revamp-qty input.revamp-qty-input {
    flex: 1 1 auto;
    width: 36px !important;
    min-width: 0;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font-family: var(--ap-font-heading) !important;
    font-weight: 600;
    font-size: var(--ap-text-button) !important;
    text-align: center;
    color: var(--ap-blue) !important;
}

.theme-v2 .revamp-saved-select {
    height: var(--ap-control-height) !important;
    margin-left: 4px;
    padding: 0 12px !important;
    border: var(--ap-border-width) solid var(--ap-blue) !important;
    border-radius: var(--ap-radius) !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    color: var(--ap-blue);
}

.revamp-saved-cart {
    grid-area: cart;
}

.theme-v2 .revamp-saved-add {
    width: 146px;
    height: var(--ap-control-height);
    margin: 0;
    padding: 0 12px;
    border: none;
    border-radius: var(--ap-radius);
    background-color: var(--ap-blue);
    font-family: var(--ap-font-heading);
    font-weight: 700;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white);
    cursor: pointer;
}

    .theme-v2 .revamp-saved-add:hover {
        background-color: var(--ap-navy);
    }

/* a grey cross in the top right corner */
.theme-v2 .revamp-saved-remove {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 28px;
    height: 28px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    color: var(--ap-border);
    cursor: pointer;
}

    .theme-v2 .revamp-saved-remove:before,
    .theme-v2 .revamp-saved-remove:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 17px;
        height: 2px;
        margin: -1px 0 0 -8.5px;
        background-color: currentColor;
        transform: rotate(45deg);
    }

    .theme-v2 .revamp-saved-remove:after {
        transform: rotate(-45deg);
    }

    .theme-v2 .revamp-saved-remove:hover {
        color: var(--ap-blue);
    }

.revamp-saved .tax-shipping-info,
.revamp-saved-empty {
    margin: var(--ap-gap) 0 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

@media (max-width: 991px) {
    .revamp-saved-head {
        display: none;
    }

    .revamp-saved-row {
        grid-template-columns: 120px minmax(0, 1fr);
        grid-template-areas:
            "image item"
            "image price"
            "qty total"
            "cart cart";
        gap: 12px 20px;
        min-height: 0;
        padding: 20px 48px 20px 20px;
    }

    .revamp-saved-image {
        width: 120px;
        height: 107px;
        margin-left: 0;
    }

    .revamp-saved-price:before,
    .revamp-saved-subtotal:before {
        content: attr(data-label) ": ";
        font-weight: 400;
    }

    .revamp-qty,
    .theme-v2 .revamp-saved-select {
        margin-left: 0;
    }

    .theme-v2 .revamp-saved-add {
        width: 100%;
    }
}


/* Shopping Cart - two columns: the item table with the Parts List Upload and Order Notes cards
   under it, and a narrower side column with Discount Code and Your Order. Rows reuse the Saved
   Parts cells. */

.revamp-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.revamp-cart-page {
    max-width: 1251px;
    margin: 42px auto 60px;
    text-align: left;
}

/* the 1251 page is wider than the 100px gutters leave at 1440, so the cart centres itself in the room
   there is, never closer to the edge than the narrow gutter */
.html-shopping-cart-page .master-column-wrapper {
    padding-right: max(var(--ap-gutter-narrow), min(var(--ap-gutter), calc((100% - 1251px) / 2)));
    padding-left: max(var(--ap-gutter-narrow), min(var(--ap-gutter), calc((100% - 1251px) / 2)));
}

/* the theme floats and sizes the totals block and checkout buttons for its own sidebar */
.revamp-cart-order .totals > *,
.revamp-cart-order .total-info,
.revamp-cart-order .cart-total,
.revamp-cart-order .checkout-buttons {
    width: 100%;
    float: none;
}

.revamp-cart-notes {
    position: relative;
}

    .revamp-cart-notes .revamp-cart-notes-status {
        position: absolute;
        right: 22px;
        bottom: 3px;
        left: 22px;
        margin: 0;
    }

.theme-v2.revamp-cart-page h1.revamp-cart-title {
    margin: 0 0 9px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-family: var(--ap-font-heading) !important;
    font-weight: 600 !important;
    font-size: var(--ap-text-title) !important;
    line-height: var(--ap-leading-heading) !important;
    text-align: left;
    text-transform: none !important;
    color: var(--ap-blue) !important;
}

    .theme-v2.revamp-cart-page h1.revamp-cart-title:before,
    .theme-v2.revamp-cart-page h1.revamp-cart-title:after {
        display: none !important;
    }

.revamp-cart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 347px;
    column-gap: 20px;
    align-items: stretch;
}

.revamp-cart-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.revamp-cart-side {
    display: flex;
    flex-direction: column;
    gap: 23px;
    min-width: 0;
}

    .revamp-cart-side .revamp-cart-order {
        flex: 1 1 auto;
    }

.revamp-cart-crosssells {
    grid-column: 1 / -1;
}

.revamp-cart-head,
.revamp-cart-row {
    display: grid;
    grid-template-columns: 214px minmax(0, 1fr) 130px 158px 128px;
    align-items: center;
}

.revamp-cart-head {
    height: 53px;
    background-color: var(--ap-navy);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-body);
    letter-spacing: var(--ap-tracking-tight);
    color: var(--ap-white);
}

    .revamp-cart-head-item {
        grid-column: 2;
    }

    .revamp-cart-head-price {
        grid-column: 3;
    }

    .revamp-cart-head-qty {
        grid-column: 4;
    }

    .revamp-cart-head-total {
        grid-column: 5;
    }

.revamp-cart-row {
    position: relative;
    grid-template-areas: "image item price qty total";
    min-height: 149px;
    border: var(--ap-border-width) solid var(--ap-border);
    background-color: var(--ap-white);
}

    .revamp-cart-row + .revamp-cart-row {
        margin-top: calc(-1 * var(--ap-border-width));
    }

    .revamp-cart-row .revamp-saved-image {
        margin-left: 27px;
    }

    .revamp-cart-row .revamp-qty,
    .theme-v2 .revamp-cart-row .revamp-saved-select {
        margin-left: 0;
    }

.revamp-cart-core {
    display: block;
    margin-top: 2px;
    font-family: var(--ap-font-body);
    font-weight: 400;
    font-size: var(--ap-text-fine);
    line-height: var(--ap-leading-fine);
    letter-spacing: 0;
    color: var(--ap-blue);
}

.revamp-cart .tax-shipping-info,
.revamp-cart-page .message-error,
.revamp-cart-message,
.revamp-cart-order .min-amount-warning,
.revamp-cart-order .checkout-disabled,
.revamp-cart-notes-status {
    margin-top: 8px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-fine);
    line-height: var(--ap-leading-fine);
    color: var(--ap-blue);
}

.revamp-cart-tools {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 590fr) minmax(0, 270fr);
    gap: 24px;
    margin-top: 22px;
}

.revamp-cart-tools-single {
    grid-template-columns: minmax(0, 1fr);
}

.revamp-cart-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 15px 22px 25px;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

.revamp-cart-side .revamp-cart-card {
    padding-right: 24px;
    padding-left: 24px;
}

.revamp-cart-side .revamp-cart-discount {
    padding-top: 12px;
}

.theme-v2 .revamp-cart-card h2.revamp-cart-card-title {
    margin: 0;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-subtitle);
    line-height: var(--ap-leading-heading);
    text-transform: none !important;
    color: var(--ap-blue);
}

/* shared solid button - the cards' Submit and Proceed to Checkout */
.theme-v2 .revamp-cart-submit,
.theme-v2 .revamp-cart-checkout {
    width: 100%;
    height: var(--ap-control-height);
    margin: auto 0 0;
    padding: 0 12px;
    border: none;
    border-radius: var(--ap-radius);
    background-color: var(--ap-blue);
    font-family: var(--ap-font-heading);
    font-weight: 700;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white);
    cursor: pointer;
}

    .theme-v2 .revamp-cart-submit:hover,
    .theme-v2 .revamp-cart-checkout:hover {
        background-color: var(--ap-navy);
    }

    .theme-v2 .revamp-cart-submit:disabled {
        opacity: 0.6;
        cursor: default;
    }

.revamp-cart-upload-hint {
    margin: 4px 0 0;
    font-family: var(--ap-font-body);
    font-weight: 500;
    font-size: var(--ap-text-body);
    line-height: 20px;
    color: var(--ap-blue);
}

    .theme-v2 .revamp-cart-upload-hint a {
        color: var(--ap-blue);
        text-decoration: underline;
    }

/* the grey drop box: a white Upload button with its icon over a hint. A native file
   input covers the whole box, so a click or a dropped file lands on it */
.revamp-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 123px;
    margin: 24px 0;
    padding: 21px 16px 16px;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-page-bg);
    text-align: center;
    cursor: pointer;
}

    .revamp-drop input[type="file"] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.revamp-drop-button,
.revamp-cart-order .qq-upload-button.revamp-drop-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 125px;
    height: 48px;
    margin: 0;
    padding: 0 18px;
    float: none;
    border: none;
    border-radius: var(--ap-radius);
    box-shadow: none;
    background: var(--ap-white);
    font-family: var(--ap-font-body);
    font-weight: 500;
    font-size: var(--ap-text-body);
    line-height: 20px;
    text-transform: none;
    color: var(--ap-blue);
}

    .revamp-drop-button:before {
        content: "";
        flex: 0 0 18px;
        height: 18px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2018%2018%27%3E%3Cpath%20d=%27M2%2012v3a1.5%201.5%200%200%200%201.5%201.5h11A1.5%201.5%200%200%200%2016%2015v-3M9%2012V2M5%205.5L9%201.5l4%204%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2018%2018%27%3E%3Cpath%20d=%27M2%2012v3a1.5%201.5%200%200%200%201.5%201.5h11A1.5%201.5%200%200%200%2016%2015v-3M9%2012V2M5%205.5L9%201.5l4%204%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
    }

.revamp-drop-hint {
    margin-top: 14px;
    font-family: var(--ap-font-body);
    font-weight: 500;
    font-size: var(--ap-text-body);
    line-height: 20px;
    color: var(--ap-blue);
}

.theme-v2 #shopping-cart-form .revamp-cart-notes dl,
.theme-v2 #shopping-cart-form .revamp-cart-notes dd {
    margin: 0;
}

.theme-v2 #shopping-cart-form .revamp-cart-notes textarea {
    display: block;
    width: 100%;
    max-width: none;
    height: 197px;
    min-height: 0;
    margin: 4px 0 24px;
    padding: 8px 13px;
    border: none;
    border-radius: var(--ap-radius);
    background-color: var(--ap-page-bg);
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-link);
    line-height: 20px;
    color: var(--ap-blue);
    resize: vertical;
}

    .theme-v2 #shopping-cart-form .revamp-cart-notes textarea::placeholder {
        color: var(--ap-placeholder);
    }

/* grey code field with the header-blue Apply butted onto it */
.revamp-cart-code {
    display: flex;
    overflow: hidden;
    border-radius: var(--ap-radius);
    background-color: var(--ap-page-bg);
}

#shopping-cart-form input#discountcouponcode,
#shopping-cart-form input#discountcouponcode:focus {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: var(--ap-control-height) !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-link);
    color: var(--ap-blue);
}

    #shopping-cart-form input#discountcouponcode::placeholder {
        color: var(--ap-placeholder);
    }

.theme-v2 .revamp-cart-code button {
    flex: 0 0 84px;
    height: var(--ap-control-height);
    margin: 0;
    padding: 0;
    border: none;
    background-color: var(--ap-header);
    font-family: var(--ap-font-heading);
    font-weight: 700;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white);
    cursor: pointer;
}

    .theme-v2 .revamp-cart-code button:hover {
        background-color: var(--ap-navy);
    }

.revamp-cart-message .remove-discount-button {
    margin-left: 6px;
    vertical-align: middle;
}

/* checkout attributes, then the cost breakdown and checkout */
.revamp-cart-order .revamp-cart-attributes dl {
    margin: 0;
}

.revamp-cart-order .revamp-cart-attributes dt {
    margin: 24px 0 0;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    letter-spacing: var(--ap-tracking-tight);
    color: var(--ap-blue);
}

    .revamp-cart-order .revamp-cart-attributes dt:first-child {
        margin-top: 4px;
    }

    .revamp-cart-order .revamp-cart-attributes dt label {
        font: inherit;
        text-transform: none;
        color: inherit;
    }

.revamp-cart-order .revamp-cart-attributes dd {
    margin: 9px 0 0;
}

.revamp-cart-page .revamp-cart-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.revamp-cart-page .revamp-cart-options-inline {
    flex-direction: row;
    gap: 0;
}

    .revamp-cart-page .revamp-cart-options-inline li {
        min-width: 99px;
    }

.revamp-cart-page .revamp-cart-options li {
    position: relative;
    display: block;
}

.revamp-cart-page .revamp-cart-attributes .option-list input[type='radio'],
.revamp-cart-page .revamp-cart-attributes .option-list input[type='checkbox'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    margin: 0;
    opacity: 0;
}

.revamp-cart-page .revamp-cart-attributes .option-list input[type='radio'] ~ label,
.revamp-cart-page .revamp-cart-attributes .option-list input[type='checkbox'] ~ label {
    position: relative;
    display: inline-block;
    min-height: 28px;
    margin: 0;
    padding: 2px 0 2px 38px;
    font-family: var(--ap-font-heading);
    font-weight: 400;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    letter-spacing: var(--ap-tracking-tight);
    text-transform: none;
    color: var(--ap-blue);
    cursor: pointer;
}

    /* a square outline, filled with a white tick when on */
    .revamp-cart-page .revamp-cart-attributes .option-list input[type='radio'] ~ label:before,
    .revamp-cart-page .revamp-cart-attributes .option-list input[type='checkbox'] ~ label:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: auto;
        left: 0;
        display: block;
        width: 28px;
        height: 28px;
        margin: 0;
        border: var(--ap-border-width) solid var(--ap-blue) !important;
        border-radius: 2px;
        box-shadow: none !important;
        background-color: var(--ap-white);
        box-sizing: border-box;
    }

    .revamp-cart-page .revamp-cart-attributes .option-list input:checked ~ label:before {
        background-color: var(--ap-blue);
    }

    .revamp-cart-page .revamp-cart-attributes .option-list input[type='radio']:checked ~ label:after,
    .revamp-cart-page .revamp-cart-attributes .option-list input[type='checkbox']:checked ~ label:after {
        content: "";
        position: absolute;
        top: 8px;
        bottom: auto;
        left: 6px;
        display: block;
        width: 16px;
        height: 12px;
        margin: 0;
        border-radius: 0;
        background: var(--ap-white);
        transition: none;
        -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2012%27%3E%3Cpath%20d=%27M1.5%206l4.5%204.5L14.5%201.5%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272.5%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2012%27%3E%3Cpath%20d=%27M1.5%206l4.5%204.5L14.5%201.5%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272.5%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
    }

.light-theme .theme-v2 #shopping-cart-form .revamp-cart-attributes input.textbox[type="text"],
.light-theme .theme-v2 #shopping-cart-form .revamp-cart-attributes input.textbox[type="text"]:focus {
    width: 100% !important;
    max-width: none;
    height: var(--ap-control-height) !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: none !important;
    border-radius: var(--ap-radius) !important;
    background-color: var(--ap-page-bg) !important;
    box-shadow: none !important;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    color: var(--ap-blue);
}

/* the fine uploader, restyled to the smaller drop box */
.revamp-cart-order .revamp-drop.qq-uploader {
    min-height: 95px;
    max-height: none;
    margin: 0;
    padding: 14px 16px 12px;
    overflow: visible;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-page-bg);
    cursor: default;
}

.revamp-cart-order .qq-upload-button.revamp-drop-button {
    min-width: 139px;
    height: var(--ap-control-height);
}

    .revamp-cart-order .qq-upload-button.revamp-drop-button:hover {
        background: var(--ap-white);
        color: var(--ap-navy);
    }

.revamp-cart-order .revamp-drop .revamp-drop-hint {
    margin-top: 8px;
    font-size: var(--ap-text-fine);
}

.revamp-cart-order .qq-upload-drop-area {
    border: var(--ap-border-width) dashed var(--ap-blue);
    border-radius: var(--ap-radius);
    background: var(--ap-page-bg);
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-fine);
    color: var(--ap-blue);
}

.revamp-cart-order .qq-upload-list {
    margin: 8px 0 0;
    box-shadow: none;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-fine);
    color: var(--ap-blue);
}

    .revamp-cart-order .qq-upload-list li {
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        color: var(--ap-blue);
    }

.revamp-drop-download a,
.revamp-cart-order .remove-download-button {
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-fine);
    line-height: var(--ap-leading-fine);
    color: var(--ap-blue);
    text-decoration: underline;
    cursor: pointer;
}

.revamp-cart-order .selected-checkout-attributes {
    display: none;
}

/* 1200.css floats .shopping-cart-page .totals right at a third of its column */
.revamp-cart-order .totals {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    margin: 31px 0 0;
    float: none;
}

.revamp-cart-order .total-info {
    margin: 0 0 21px;
    padding: 0;
    border: none;
    border-bottom: 1px solid var(--ap-border);
    background: none;
}

    .revamp-cart-order .total-info .total-title {
        display: none;
    }

.revamp-cart-order .cart-total {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

    .revamp-cart-order .cart-total td {
        padding: 0 0 23px;
        border: none;
        background: none;
        vertical-align: top;
    }

    .revamp-cart-order .cart-total .cart-total-left,
    .revamp-cart-order .cart-total .cart-total-left label {
        font-family: var(--ap-font-body);
        font-weight: 400;
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        letter-spacing: var(--ap-tracking-tight);
        text-align: left;
        text-transform: none;
        color: var(--ap-blue);
    }

    .revamp-cart-order .cart-total .cart-total-right,
    .revamp-cart-order .cart-total .cart-total-right span,
    .revamp-cart-order .cart-total .cart-total-right strong {
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-link);
        line-height: var(--ap-leading-body);
        letter-spacing: var(--ap-tracking-tight);
        text-align: right;
        color: var(--ap-blue);
    }

    /* "Calculated during checkout" sits at reduced opacity */
    .revamp-cart-order .cart-total .cart-total-right > span:not(.value-summary) {
        opacity: 0.7;
    }

    .revamp-cart-order .cart-total .selected-shipping-method {
        display: block;
        font-size: var(--ap-text-fine);
    }

.revamp-cart-order .checkout-buttons {
    margin-top: auto;
}

.revamp-cart-empty-tools {
    max-width: 590px;
    margin-top: var(--ap-gap);
}

/* cart-level warnings (a required checkout attribute left empty, stock problems) have to be seen */
.revamp-cart-page .order-summary-content > .message-error {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: var(--ap-border-width) solid var(--ap-blue);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
    font-weight: 600;
}

    .revamp-cart-page .order-summary-content > .message-error ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

@media (max-width: 1200px) {
    .revamp-cart {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 23px;
    }
}

@media (max-width: 991px) {
    .revamp-cart-head {
        display: none;
    }

    .revamp-cart-row {
        grid-template-columns: 120px minmax(0, 1fr);
        grid-template-areas:
            "image item"
            "image price"
            "qty total";
        gap: 12px 20px;
        min-height: 0;
        padding: 20px 48px 20px 20px;
    }

        .revamp-cart-row .revamp-saved-image {
            width: 120px;
            height: 107px;
            margin-left: 0;
        }

    .revamp-cart-tools {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Application Guides - a row per manufacturer: logo, then resources, each set off by a
   3px rule. A resource with several documents is a <details> menu. */

.revamp-guides-page {
    text-align: left;
}

.revamp-guides {
    display: flex;
    flex-direction: column;
    gap: var(--ap-gap-horizontal);
    padding-bottom: 80px;
}

/* the logo box and the first resource are each inset from the row's left edge */
.revamp-guide-row {
    display: flex;
    align-items: center;
    gap: 114px;
    min-height: 121px;
    padding: 20px 58px 20px 60px;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

.revamp-guide-logo {
    display: flex;
    flex: 0 0 183px;
    align-items: center;
    height: 61px;
}

    .revamp-guide-logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.revamp-guide-name {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-tight);
    color: var(--ap-blue);
}

.revamp-guide-resources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 40px;
}

.theme-v2 .revamp-guide-resource {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding-left: 21px;
    border-left: 3px solid var(--ap-blue);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-card);
    line-height: var(--ap-leading-card);
    color: var(--ap-blue);
    text-decoration: none;
}

    .theme-v2 a.revamp-guide-resource:hover {
        color: var(--ap-blue);
        text-decoration: underline;
    }

    .theme-v2 a.revamp-guide-resource:focus-visible,
    .revamp-guide-menu > summary:focus-visible {
        outline: 2px solid var(--ap-blue-light);
        outline-offset: 4px;
    }

.revamp-guide-menu {
    position: relative;
}

    .revamp-guide-menu > summary {
        display: inline-flex;
        align-items: center;
        list-style: none;
        cursor: pointer;
    }

        .revamp-guide-menu > summary::-webkit-details-marker {
            display: none;
        }

/* label and arrow share the underline */
.revamp-guide-menu-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    border-bottom: 2px solid var(--ap-blue);
}

    .revamp-guide-menu-label:after {
        content: "";
        width: 8px;
        height: 8px;
        margin: 0 6px 0 0;
        border: solid var(--ap-blue);
        border-width: 0 var(--ap-border-width) var(--ap-border-width) 0;
        transform: translateY(-3px) rotate(45deg);
        transition: transform 0.2s ease-in-out;
    }

.revamp-guide-menu[open] .revamp-guide-menu-label:after {
    transform: translateY(1px) rotate(-135deg);
}

.revamp-guide-menu > ul {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: max-content;
    min-width: 100%;
    max-width: 480px;
    max-height: 360px;
    margin: 0;
    padding: 12px 0;
    overflow-y: auto;
    list-style: none;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

    .revamp-guide-menu > ul li {
        margin: 0;
        padding: 0;
    }

    .revamp-guide-menu > ul a {
        display: block;
        padding: 6px 24px;
        font-family: var(--ap-font-body);
        font-weight: 400;
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        color: var(--ap-blue);
        text-decoration: none;
    }

        .revamp-guide-menu > ul a:hover {
            background-color: var(--ap-page-bg);
            color: var(--ap-blue);
            text-decoration: underline;
        }

@media (max-width: 1200px) {
    .revamp-guide-row {
        gap: 48px;
        padding: 20px 32px;
    }
}

@media (max-width: 991px) {
    .revamp-guide-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px;
    }

    .revamp-guide-logo {
        flex-basis: auto;
    }
}


/* Engine Kits - section titles, the installation kit card, and "Why Tanis?" above the FAQ */

/* the heading over the chips and over the kit card */
.revamp-branch-title {
    margin: 0 0 18px;
    line-height: var(--ap-leading-heading);
    text-align: left;
}

.revamp-kit {
    margin: var(--ap-section-space) 0 0;
    text-align: left;
}

/* the kit card: picture inset on the left, copy beside it */
.revamp-kit-card {
    display: grid;
    grid-template-columns: 364px 1fr;
    gap: 31px;
    min-height: 470px;
    padding: 26px 31px 26px 20px;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

/* grid cell - lets long kit copy wrap instead of widening the column */
.revamp-kit-body {
    min-width: 0;
}

.revamp-kit-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .revamp-kit-image img {
        max-width: 100%;
        max-height: 325px;
        object-fit: contain;
    }

.revamp-kit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ap-gap);
    margin: 0 0 16px;
}

.theme-v2 .revamp-kit-title {
    margin: 8px 0 0;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-subtitle);
    line-height: var(--ap-leading-body);
    letter-spacing: var(--ap-tracking-tight);
    text-transform: none !important;
    color: var(--ap-blue);
}

    .theme-v2 .revamp-kit-title a {
        color: var(--ap-blue);
        text-decoration: underline;
    }

.revamp-kit-cta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 158px;
    height: 32px;
    padding: 0 12px;
    border: var(--ap-border-width) solid var(--ap-blue);
    border-radius: var(--ap-radius);
    background-color: transparent;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    text-transform: uppercase;
    color: var(--ap-blue);
    text-decoration: none;
    white-space: nowrap;
}

    .revamp-kit-cta:hover {
        background-color: var(--ap-blue);
        color: var(--ap-white);
        text-decoration: none;
    }

.revamp-kit-meta {
    width: max-content;
    min-width: 139px;
    margin: 0 0 4px;
    padding: 0 0 4px;
    border-bottom: 1px solid var(--ap-border);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    letter-spacing: var(--ap-tracking-tight);
    color: var(--ap-blue);
}

.revamp-kit-contents {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-tight);
    color: var(--ap-blue);
}

.revamp-kit-description {
    margin: 16px 0 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

    .revamp-kit-description p {
        margin: 0 0 12px;
    }

@media (max-width: 991px) {
    .revamp-kit-card {
        grid-template-columns: 1fr;
    }

    .revamp-kit-head {
        flex-direction: column;
    }
}

/* "Why Tanis?" sits in the FAQ band on the same columns as the FAQ below it */
.revamp-faq-lead {
    display: grid;
    grid-template-columns: 1fr var(--ap-faq-width);
    gap: 104px;
    align-items: start;
    max-width: 1440px;
    margin: 0 auto;
    padding: 69px var(--ap-gutter) 107px 103px;
}

    .revamp-faq-lead + .revamp-faq-inner {
        padding-top: 0;
    }

.revamp-faq-lead-copy {
    max-width: 502px;
}

.theme-v2 .revamp-faq-lead h3.revamp-faq-lead-subtitle {
    margin: 0 0 20px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-subhead);
    line-height: var(--ap-leading-body);
    text-transform: none !important;
    color: var(--ap-white);
}

.revamp-faq-lead-copy p {
    margin: 0 0 24px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-white);
}

    .revamp-faq-lead-copy p:last-child {
        margin-bottom: 0;
    }

/* the export frames it 612x408, but the clip is 16:9 - at 3:2 YouTube letterboxes it */
.revamp-faq-lead-media iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--ap-radius);
}

@media (max-width: 1200px) {
    .revamp-faq-lead {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}


/* About Us - one dark band runs from the nav down to the white team section: the planes photo
   sits at the top of it and the gradient takes over below, its first stop being sky blue so it
   meets the photo without a seam. */

/* the export paints the gradient first and the photo over it (root children 2 then 3), so the
   planes stay whole and the gradient carries the band below them. The photo arrives as a custom
   property from the view - an inline background-image would replace both layers, not just one. */
.revamp-about-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 64px 0 92px;
    background-color: var(--ap-about-ground);
    /* The export paints the gradient first and the photo over it (root children 2 then 3), so the
       planes stay whole and the gradient carries the band below them. The photo is full bleed in
       the frame (1438 of 1440), so it tracks the viewport rather than sitting at a fixed 1440 -
       pinned, it letterboxes with hard edges on anything wider. The copy below follows the photo's
       height so it keeps landing in the faded part of the image (see .revamp-about-intro). */
    background-image: var(--ap-about-hero-photo, none),
                      linear-gradient(180deg, var(--ap-about-sky) 0%, var(--ap-about-dusk) 40%, var(--ap-about-ground) 96%);
    background-position: center 111px, left 851px;
    background-size: 100% auto, 100% calc(100% - 851px);
    background-repeat: no-repeat, no-repeat;
    overflow: hidden;
}

    .revamp-about-hero > * {
        position: relative;
        z-index: 1;
    }

.revamp-about-hero-copy {
    max-width: calc(1070px + var(--ap-gutter-narrow) * 2);
    margin: 0 auto;
    padding: 0 var(--ap-gutter-narrow);
    text-align: center;
}

.theme-v2.revamp-about h1.revamp-about-hero-title {
    margin: 0;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: 32px;
    line-height: 36px;
    text-transform: none !important;
    color: var(--ap-white);
    text-wrap: balance;
}

.revamp-about-hero-sub {
    max-width: 687px;
    margin: 17px auto 0;
    font-family: var(--ap-font-body);
    font-weight: 400;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-body);
    color: var(--ap-white);
}

/* the photo occupies the band between the opening copy and this block */
/* the two blocks are placed from the container edge with an explicit gap rather than
   space-between */
.revamp-about-intro {
    display: grid;
    grid-template-columns: 380px 639px;
    justify-content: start;
    column-gap: 248px;
    max-width: calc(1294px + var(--ap-gutter-narrow) * 2);
    /* the photo is 2876x2582, so it renders 0.8978 * viewport tall. In the frame this copy starts
       217px above the photo's bottom edge, inside its faded part - holding that relationship keeps
       the text off the bright sky and fuselage on wider screens. Resolves to the frame's 962px at
       1440, which is where it was measured. */
    margin: calc(100vw * 0.8978 - 331px) auto 0;
    padding: 0 var(--ap-gutter-narrow);
}

.theme-v2.revamp-about h2.revamp-about-intro-title {
    margin: 0;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-section);
    line-height: var(--ap-leading-section);
    text-transform: none !important;
    color: var(--ap-white);
}

.revamp-about-intro-copy p {
    margin: 0 0 21px;
    font-family: var(--ap-font-body);
    font-weight: 500;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-tight);
    color: var(--ap-white);
}

.theme-v2 a.revamp-about-expert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 178px;
    height: var(--ap-control-height);
    margin-top: 16px;
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-blue);
    text-decoration: none;
}

    .theme-v2 a.revamp-about-expert:hover {
        background-color: var(--ap-page-bg);
        color: var(--ap-blue);
    }

.revamp-about-voices {
    max-width: calc(1294px + var(--ap-gutter-narrow) * 2);
    margin: 75px auto 0;
    padding: 0 var(--ap-gutter-narrow);
}

.revamp-about-voices-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ap-gap);
}

.theme-v2 .revamp-about-voices-head h2 {
    max-width: 694px;
    margin: 0;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-section);
    line-height: var(--ap-leading-section);
    text-transform: none !important;
    color: var(--ap-white);
}

.revamp-about-voices-nav {
    display: flex;
    flex: 0 0 auto;
    gap: 21px;
    margin-top: 51px;
}

.theme-v2 button.revamp-about-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 32px;
    padding: 0;
    border: var(--ap-border-width) solid var(--ap-white);
    border-radius: var(--ap-radius);
    background: none;
    cursor: pointer;
}

    /* 13x13 chevron, drawn rather than shipped as an asset */
    .theme-v2 button.revamp-about-arrow span {
        width: 9px;
        height: 9px;
        border-left: var(--ap-border-width) solid var(--ap-white);
        border-bottom: var(--ap-border-width) solid var(--ap-white);
        transform: rotate(45deg);
        margin-left: 3px;
    }

    .theme-v2 button.revamp-about-arrow-next span {
        transform: rotate(-135deg);
        margin-left: -3px;
    }

    .theme-v2 button.revamp-about-arrow:hover {
        background-color: rgba(255, 255, 255, 0.14);
    }

.revamp-about-voices-track {
    display: flex;
    gap: 10px;
    margin-top: 33px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

    .revamp-about-voices-track::-webkit-scrollbar {
        display: none;
    }

.revamp-about-voice {
    position: relative;
    flex: 0 0 425px;
    min-height: 322px;
    margin: 0;
    padding: 32px 25px 60px;
    box-sizing: border-box;
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
    scroll-snap-align: start;
}

.revamp-about-voice-name {
    display: inline-flex;
    align-items: center;
    height: 31px;
    padding: 0 13px;
    border: var(--ap-border-width) solid var(--ap-blue);
    border-radius: var(--ap-radius);
    font-family: var(--ap-font-heading);
    font-weight: 700;
    font-size: var(--ap-text-body);
    line-height: 28px;
    color: var(--ap-blue);
}

.revamp-about-voice blockquote {
    margin: 21px 0 0;
    font-family: var(--ap-font-body);
    font-weight: 500;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

.revamp-about-voice-year {
    position: absolute;
    right: 13px;
    bottom: 22px;
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
    opacity: 0.7;
}

/* --- White team section --- */

.revamp-about-team {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 54px 0 74px;
    background-color: var(--ap-white);
}

.theme-v2.revamp-about h2.revamp-about-team-title {
    max-width: calc(1294px + var(--ap-gutter-narrow) * 2);
    margin: 0 auto;
    padding: 0 var(--ap-gutter-narrow);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: 42px;
    line-height: var(--ap-leading-heading);
    text-transform: none !important;
    color: var(--ap-header);
}

/* 1fr rows rather than auto: every row takes the height of the tallest one, so all the cards match
   each other whatever length the bios are, instead of each row finding its own height */
.revamp-about-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 43px 30px;
    max-width: calc(1294px + var(--ap-gutter-narrow) * 2);
    margin: 33px auto 0;
    padding: 0 var(--ap-gutter-narrow);
}

.revamp-about-member {
    display: flex;
    flex-direction: column;
    min-height: 601px;
    padding: 18px 15px 24px;
    box-sizing: border-box;
    border-radius: var(--ap-radius-lg);
    background-color: var(--ap-blue);
}

.revamp-about-member-photo {
    display: block;
    width: 100%;
    height: 312px;
    object-fit: cover;
    border-radius: var(--ap-radius-lg);
}

.revamp-about-member-photo-empty {
    background-color: var(--ap-navy);
    opacity: 0.35;
}

.theme-v2.revamp-about h3.revamp-about-member-name {
    margin: 23px 8px 0;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-tight);
    text-transform: uppercase !important;
    color: var(--ap-white);
}

.revamp-about-member-role {
    margin: 12px 8px 0;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--ap-border);
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-white);
}

/* the design draws 163px of bio, nine lines at 14/18, but the notes in admin run longer than that
   and cutting them off loses real copy. They print in full instead, and the grid keeps the cards
   level (see grid-auto-rows on .revamp-about-grid). */
.revamp-about-member-bio {
    margin: 12px 10px 0;
    font-family: var(--ap-font-body);
    font-weight: 500;
    font-size: var(--ap-text-fine);
    line-height: 18px;
    color: var(--ap-white);
}

/* --- Contact form, sitting in the grid beside the last row of cards --- */

/* the design has ten members, so the form falls in the last two columns; pinned there so it keeps
   that place as people are added or removed in admin */
.revamp-about-contact {
    grid-column: -3 / -1;
    align-self: start;
    min-height: 603px;
    padding: 41px 28px 32px;
    box-sizing: border-box;
    border-radius: var(--ap-radius-lg);
    background-color: var(--ap-navy);
}

.theme-v2.revamp-about h2.revamp-about-contact-title {
    margin: 0 0 15px 7px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-section);
    line-height: var(--ap-leading-heading);
    text-transform: none !important;
    color: var(--ap-white);
}

.revamp-about-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* the inline block in _Root.Head forces height, border and shadow on every input and select at
   (1,3,1) - REVAMP.md 6.2 - so these are keyed on the field id to outrank it */
#OurTeamContactForm input#Name,
#OurTeamContactForm input#Email,
#OurTeamContactForm input#Subject,
#OurTeamContactForm select#TeamMemberId,
#OurTeamContactForm textarea#Message {
    width: 100% !important;
    height: var(--ap-control-height) !important;
    margin: 0 !important;
    padding: 0 13px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--ap-placeholder) !important;
    border-radius: var(--ap-radius) !important;
    background-color: var(--ap-page-bg) !important;
    box-shadow: none !important;
    font-family: var(--ap-font-body) !important;
    font-weight: 400 !important;
    font-size: var(--ap-text-body) !important;
    line-height: var(--ap-leading-body) !important;
    color: var(--ap-blue);
}

#OurTeamContactForm textarea#Message {
    height: 168px !important;
    padding: 10px 13px !important;
    resize: vertical;
}

#OurTeamContactForm input::placeholder,
#OurTeamContactForm textarea::placeholder {
    color: var(--ap-placeholder);
    opacity: 1;
}

#OurTeamContactForm select#TeamMemberId {
    color: var(--ap-placeholder);
}

.revamp-about-captcha {
    margin-top: 5px;
}

.theme-v2 button.revamp-about-send {
    align-self: flex-end;
    width: 157px;
    height: var(--ap-control-height);
    padding: 0;
    border: none;
    border-radius: var(--ap-radius);
    background-color: var(--ap-blue-light);
    font-family: var(--ap-font-heading);
    font-weight: 700;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white);
    cursor: pointer;
}

    .theme-v2 button.revamp-about-send:hover {
        background-color: var(--ap-header);
    }

.revamp-about-form .field-validation-error {
    display: none;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-fine);
    line-height: var(--ap-leading-fine);
    color: var(--ap-white);
}

@media (max-width: 1200px) {
    .revamp-about-intro {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 640px;
    }

    .revamp-about-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .revamp-about-hero {
        background-size: cover;
    }
}

@media (max-width: 767px) {
    .revamp-about-grid {
        grid-template-columns: 1fr;
    }

    .revamp-about-contact {
        grid-column: span 1;
    }

    .revamp-about-voice {
        flex-basis: 300px;
    }
}


/* Multi-Line Search Tool - navy ground, two tool cards on the left and the result cards on the
   right. The title band and the drop box are the components the topic pages and the cart already
   use. */

.html-revamp-multiline-page body {
    background-color: var(--ap-navy);
}

/* html-revamp-page already supplies the 100px gutters, so this adds none of its own: 1240px of
   content against the frame's 1245, which leaves the right column at 595 for its 600px cards */
.revamp-mls {
    display: grid;
    grid-template-columns: 590px minmax(0, 1fr);
    gap: 55px;
    padding: 0 0 90px;
}

/* the results heading sits 19px above the first tool card in the frame */
.revamp-mls-tools {
    margin-top: 19px;
}

.revamp-mls-panel {
    padding: 16px 22px 29px;
    box-sizing: border-box;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

    .revamp-mls-panel + .revamp-mls-panel {
        margin-top: 22px;
    }

.theme-v2.revamp-mls h2.revamp-mls-panel-title {
    margin: 0;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-title);
    line-height: var(--ap-leading-heading);
    text-transform: none !important;
    color: var(--ap-blue);
}

/* --- Part number rows: a rule under each field, no box --- */

.revamp-mls-fields {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 8px;
}

.revamp-mls-field {
    position: relative;
    display: flex;
    align-items: center;
}

/* the inline block in _Root.Head forces height, border and shadow on every input at (1,3,1), so
   these need two ids in the chain to outrank it - REVAMP.md 6.2 */
#MlsPage #MlsSearchCard input.revamp-mls-input {
    flex: 1 1 auto;
    width: 100% !important;
    height: 25px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 26px 0 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    border-bottom: 1px solid var(--ap-blue) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-family: var(--ap-font-body) !important;
    font-weight: 400 !important;
    font-size: var(--ap-text-body) !important;
    line-height: var(--ap-leading-body) !important;
    color: var(--ap-blue);
}

    #MlsPage #MlsSearchCard input.revamp-mls-input::placeholder {
        color: var(--ap-blue);
        opacity: 0.7;
    }

.theme-v2 button.revamp-mls-remove {
    position: absolute;
    right: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    color: var(--ap-blue);
    opacity: 0.55;
    cursor: pointer;
}

    .theme-v2 button.revamp-mls-remove:before {
        content: "\00d7";
        font-size: 19px;
        line-height: 1;
    }

    .theme-v2 button.revamp-mls-remove:hover {
        opacity: 1;
    }

.theme-v2 button.revamp-mls-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--ap-control-height);
    margin: 24px 0 0;
    padding: 0 14px;
    border: 1px solid var(--ap-blue);
    border-radius: var(--ap-radius);
    background: none;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    color: var(--ap-blue);
    opacity: 0.7;
    cursor: pointer;
}

    .theme-v2 button.revamp-mls-add:before {
        content: "+";
        font-size: 18px;
        line-height: 1;
    }

    .theme-v2 button.revamp-mls-add:hover {
        opacity: 1;
    }

.theme-v2 button.revamp-mls-submit {
    display: block;
    width: 100%;
    height: var(--ap-control-height);
    margin: 21px 0 0;
    padding: 0;
    border: none;
    border-radius: var(--ap-radius);
    background-color: var(--ap-blue);
    font-family: var(--ap-font-heading);
    font-weight: 700;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white);
    cursor: pointer;
}

    .theme-v2 button.revamp-mls-submit:hover {
        background-color: var(--ap-navy);
    }

.revamp-mls-upload-hint {
    margin: 4px 0 0;
    font-family: var(--ap-font-body);
    font-weight: 500;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-fine);
    color: var(--ap-blue);
}

    .revamp-mls-upload-hint a {
        color: var(--ap-blue);
        text-decoration: underline;
    }

/* --- Results --- */


.theme-v2.revamp-mls h2.revamp-mls-results-title {
    margin: 0 0 21px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-title);
    line-height: var(--ap-leading-heading);
    text-transform: none !important;
    color: var(--ap-white);
}

.revamp-mls-empty,
.revamp-mls-missing {
    margin: 0 0 17px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-white);
}

.revamp-mls-missing {
    opacity: 0.75;
}

/* 600x235 with the picture inset 5/8 and the details column starting at 229 */
.revamp-mls-card {
    position: relative;
    min-height: 235px;
    padding: 13px 18px 18px 229px;
    box-sizing: border-box;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

    .revamp-mls-card + .revamp-mls-card {
        margin-top: 17px;
    }

.revamp-mls-card-image {
    position: absolute;
    left: 5px;
    top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 208px;
    height: 208px;
    text-decoration: none;
}

    .revamp-mls-card-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.revamp-mls-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ap-gap-horizontal);
    min-height: 24px;
}

.revamp-mls-card-price {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
    white-space: nowrap;
}

.theme-v2.revamp-mls h3.revamp-mls-card-title {
        order: 2;
    margin: 7px 0 0;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-tight);
    text-transform: uppercase !important;
    color: var(--ap-blue);
}

    .theme-v2.revamp-mls h3.revamp-mls-card-title a {
        color: var(--ap-blue);
        text-decoration: none;
    }

.revamp-mls-card-sku {
        order: 3;
    margin: 10px 0 0;
    padding-bottom: 4px;
    max-width: 215px;
    border-bottom: 1px solid var(--ap-border);
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

.revamp-mls-card-core {
        order: 5;
    margin: 4px 0 0;
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-micro);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
    opacity: 0.7;
}

.theme-v2 .revamp-mls-card-cta {
        order: 6;
    position: absolute;
    right: 17px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 32px;
    padding: 0;
    border: var(--ap-border-width) solid var(--ap-blue);
    border-radius: var(--ap-radius);
    background: none;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-blue);
    text-decoration: none;
    cursor: pointer;
}

    .theme-v2 .revamp-mls-card-cta:hover {
        background-color: var(--ap-blue);
        color: var(--ap-white);
    }

@media (max-width: 1200px) {
    .revamp-mls {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    .revamp-mls-tools {
        margin-top: 0;
    }

    .revamp-mls-panel {
        max-width: 590px;
    }
}

@media (max-width: 600px) {
    .revamp-mls-card {
        padding: 13px 18px 70px;
    }

    .revamp-mls-card-image {
        position: static;
        width: 100%;
        height: 160px;
        margin-bottom: 12px;
    }

    .theme-v2 .revamp-mls-card-cta {
        left: 18px;
        right: auto;
    }
}


/* Product page - the template keeps its own markup (the price block, add to cart, attributes and
   gallery own the purchasing contract), so everything here restyles what nop and the 5-Point
   customisations already render. The frame is a photo panel beside a detail column. */

.html-revamp-product-page body {
    background-color: var(--ap-page-bg);
}

.html-revamp-product-page .product-details-page {
    max-width: calc(958px + var(--ap-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--ap-gutter) 90px;
    box-sizing: border-box;
}


.html-revamp-product-page .product-essential-wrapper {
    background: none;
    background-color: transparent;
    /* the theme's `padding: 70px 0` is kept at the top but its bottom half was most of the gap under the product block */
    padding-bottom: 0;
}


.html-revamp-product-page .product-essential {
    display: grid;
    grid-template-columns: 482px minmax(0, 1fr);
    align-items: start;
    column-gap: 34px;
    max-width: none;
    margin: 51px 0 0;
    padding: 0;
}

    .html-revamp-product-page .product-essential:after,
    .html-revamp-product-page .product-essential:before {
        content: none;
    }

/* --- Photo panel: a white card, the picture inset 30/31 --- */


.html-revamp-product-page .gallery {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 482px;
    min-height: 446px;
    height: 100%;
    margin: 0;
    padding: 31px 30px;
    box-sizing: border-box;
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

    .html-revamp-product-page .gallery .picture {
        width: 100%;
        margin: 0;
    }

        .html-revamp-product-page .gallery .picture img {
            display: block;
            width: 100%;
            max-height: 377px;
            margin: 0 auto;
            object-fit: contain;
            border-radius: var(--ap-radius);
        }

/* slider ("Ask an Expert") is not in the frame. It is AnywhereSliders content, not markup, so it
   is hidden here rather than deleted from a slider other pages may use. */
.html-revamp-product-page .slider-wrapper.ask-an-expert {
    display: none;
}

/* slider carries "Price Valid Until Stock is Depleted".  */
.html-revamp-product-page .product-essential-wrapper > .slider-wrapper {
    width: 442px;
    margin: 12px 0 0 auto;
    text-align: left;
}

    .html-revamp-product-page .product-essential-wrapper > .slider-wrapper p {
        margin: 0;
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-fine);
        line-height: 26px;
        text-align: left !important;
        color: var(--ap-blue);
    }

    .html-revamp-product-page .product-essential-wrapper > .slider-wrapper em {
        font-style: normal;
    }


.html-revamp-product-page .ui-tabs .product-specs-box,
.html-revamp-product-page .product-specs-box {
    display: none !important;
}

/* "Call for pricing" is forced to white by an inline rule meant for the old green bar */
.html-revamp-product-page .prices .call-for-price {
    padding: 0;
    background: none !important;
}

    .html-revamp-product-page .prices .call-for-price span {
        color: var(--ap-blue) !important;
    }

/* --- Detail column --- */

.html-revamp-product-page .overview {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    margin: 0;
    padding: 0;
}

.theme-v2 .html-revamp-product-page .product-name h1,
.html-revamp-product-page .product-name h1 {
    margin: 0 0 18px;
    font-family: var(--ap-font-heading) !important;
    font-weight: 600 !important;
    font-size: var(--ap-text-title) !important;
    line-height: var(--ap-leading-body) !important;
    text-transform: none !important;
    color: var(--ap-blue) !important;
}

/* the frame's spec block: manufacturer, part number, the four fields GetExtraProductDetails fills,
   then condition  */
.html-revamp-product-page .manufacturers,
.html-revamp-product-page .additional-details > div,
.html-revamp-product-page .product-condition {
    margin: 0;
    padding: 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-link);
    line-height: 26px;
    color: var(--ap-blue);
}

    .html-revamp-product-page .manufacturers .label,
    .html-revamp-product-page .additional-details .label,
    .html-revamp-product-page .product-condition .label {
        font-weight: 400;
        color: var(--ap-blue);
    }

    .html-revamp-product-page .manufacturers .value,
    .html-revamp-product-page .additional-details .value,
    .html-revamp-product-page .product-condition .value {
        font-weight: 600;
        color: var(--ap-blue);
    }

    .html-revamp-product-page .manufacturers a {
        color: var(--ap-blue);
        text-decoration: none;
    }

/* --- Stock pill: inline under the specs, not floated to the far edge --- */


.html-revamp-product-page .availability-attributes-wrapper {
    position: static;
}


.html-revamp-product-page .availability {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    clear: both;
    width: auto !important;
    max-width: none;
    margin: 22px 0 0;
    border: none;
    text-align: left;
}

    .html-revamp-product-page .availability .stock {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        float: none;
    }

    .html-revamp-product-page .availability .label {
        display: none;
    }

.html-revamp-product-page .availability .value.ap-stock {
    display: inline-flex;
    align-items: center;
    float: none;
    width: auto;
    min-height: 24px;
    padding: 0 11px !important;
    border-radius: 0;
    background: var(--ap-blue) !important;
    background-color: var(--ap-blue) !important;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-badge-lg);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white) !important;
}

/* the theme sets this grey Lato at styles.css:3318, left over from the old page. The kit contents
   are real product information, so they take the page's body treatment. */
.html-revamp-product-page .overview .short-description {
    margin: 18px 0 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

/* --- Price: labels kept, restyled to the frame's weight --- */

.html-revamp-product-page .prices {
    margin: 20px 0 0;
}

    .html-revamp-product-page .prices .product-price,
    .html-revamp-product-page .prices .old-product-price,
    .html-revamp-product-page .prices .product-core-charge,
    .html-revamp-product-page .prices .product-price-plus-core {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin: 0;
        font-family: var(--ap-font-heading);
        color: var(--ap-blue);
    }

    .html-revamp-product-page .prices .product-price {
        font-weight: 600;
        font-size: var(--ap-text-subtitle);
        line-height: var(--ap-leading-body);
    }

        .html-revamp-product-page .prices .product-price label,
        .html-revamp-product-page .prices .product-price span {
            font: inherit;
            color: inherit;
        }

    .html-revamp-product-page .prices .call-for-price span {
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-subtitle);
        line-height: var(--ap-leading-body);
        color: var(--ap-blue);
    }

    /* the two core rows sit quieter than the headline, as the cards do */
    .html-revamp-product-page .prices .old-product-price,
    .html-revamp-product-page .prices .product-core-charge,
    .html-revamp-product-page .prices .product-price-plus-core {
        margin-top: 4px;
        font-weight: 500;
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        opacity: 0.7;
    }

    .html-revamp-product-page .prices .ap-grey-1-text {
        color: var(--ap-blue);
    }

/* --- Attributes (Condition pickers on engine parts) --- */

/* the frame shows the condition as a plain row, not the theme's bordered grey panel */
.html-revamp-product-page .attributes {
    margin: 20px 0 0;
    padding: 0;
    border: none;
    background: none;
}

    .html-revamp-product-page .attributes dl {
        margin: 0 !important;
    }

/* with the specifications table hidden, the tab strip above the cross-sells is left with a lone
   empty label */
.html-revamp-product-page .ui-tabs .ui-tabs-nav,
.html-revamp-product-page .product-collateral .title:empty {
    display: none;
}

/* ...and the tab container itself then collapses to height 0 but keeps the 80px margin-bottom,
   which was most of the leftover gap under the product block. QuickTabs.css sets it through
   `.product-page-bottom #quickTabs` (1,1,0), so the id has to be named here to outrank it. */
.html-revamp-product-page .product-page-bottom #quickTabs,
.html-revamp-product-page .product-page-bottom > .productTabs {
    margin-bottom: 0;
}

    .html-revamp-product-page .attributes dt label,
    .html-revamp-product-page .attributes dd label {
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
        color: var(--ap-blue);
    }

/* --- Buttons row: stepper, navy add to cart, outlined wishlist at the column edge --- */

.html-revamp-product-page .overview-buttons {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 29px 0 0;
}

.html-revamp-product-page .overview-buttons .qty-label {
    display: none;
}

.html-revamp-product-page .add-to-cart-qty-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 108px;
    width: 108px;
    height: var(--ap-control-height);
    padding: 0 10px;
    box-sizing: border-box;
    border: var(--ap-border-width) solid var(--ap-blue);
    border-radius: var(--ap-radius);
}

/* _Root.Head.cshtml carries two inline rules for this input (REVAMP.md 6.1): one forces
   `height: 50px !important` at (0,6,1) through a :not chain, the other paints it white with its own
   border and inset shadow. A 50px input inside the 40px stepper is what was sitting behind the
   number. The :not chain is repeated here so this lands above it. */
.html-revamp-product-page .add-to-cart > .add-to-cart-qty-wrapper > input.qty-input:not(.search-box-text):not(.newsletter-subscribe-text):not(#CsvFile),
.html-revamp-product-page .add-to-cart-qty-wrapper > input.qty-input:not(.search-box-text):not(.newsletter-subscribe-text):not(#CsvFile),
.html-revamp-product-page .add-to-cart-qty-wrapper input.qty-input {
    width: 34px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    font-family: var(--ap-font-heading) !important;
    font-weight: 600 !important;
    font-size: var(--ap-text-button) !important;
    text-align: center;
    color: var(--ap-blue);
}

.html-revamp-product-page .add-to-cart-qty-wrapper .plus,
.html-revamp-product-page .add-to-cart-qty-wrapper .minus {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 100%;
    border: none;
    background: none;
    font-family: var(--ap-font-heading);
    font-size: 18px;
    line-height: 1;
    color: var(--ap-blue);
    cursor: pointer;
}

.html-revamp-product-page .add-to-cart-qty-wrapper .minus {
    order: -1;
}

/* the theme draws the + and - as absolutely positioned 8x4 bars on :before/:after. Making the
   spans static reparented those bars to the wrapper - the nearest positioned ancestor - where
   `left: 0; right: 0` centred them straight over the quantity digit. That was the mark sitting
   behind the number. The spans carry literal "+" and "-" text, so the drawn bars are redundant. */
.html-revamp-product-page .add-to-cart-qty-wrapper .plus:before,
.html-revamp-product-page .add-to-cart-qty-wrapper .plus:after,
.html-revamp-product-page .add-to-cart-qty-wrapper .minus:before,
.html-revamp-product-page .add-to-cart-qty-wrapper .minus:after {
    content: none;
}

.html-revamp-product-page .overview-buttons .add-to-cart-button {
    width: 128px;
    min-width: 128px;
    height: var(--ap-control-height);
    padding: 0;
    border: none;
    border-radius: var(--ap-radius);
    background-color: var(--ap-navy) !important;
    background-image: none !important;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white) !important;
}

    .html-revamp-product-page .overview-buttons .add-to-cart-button:hover {
        background-color: var(--ap-navy-deep) !important;
    }

/* pushed to the right edge of the 439 column, as in the frame */
.html-revamp-product-page .wishlist-button-wrapper {
    margin-left: auto;
}

    .html-revamp-product-page .wishlist-button-wrapper .add-to-wishlist {
        margin: 0;
    }

    /* the theme's button carries its heart as a hover-only background image, so the label is hidden
       and the outline gets a drawn heart of its own */
    .html-revamp-product-page .wishlist-button-wrapper .add-to-wishlist-button {
        position: relative;
        width: 40px;
        height: 40px;
        min-width: 0;
        padding: 0;
        border: var(--ap-border-width) solid var(--ap-blue) !important;
        border-radius: var(--ap-radius);
        background: none !important;
        background-image: none !important;
        font-size: 0;
        color: transparent;
    }

        .html-revamp-product-page .wishlist-button-wrapper .add-to-wishlist-button:before {
            content: "";
            position: absolute;
            inset: 0;
            margin: auto;
            /* 28x25 for a 24x21 heart: the arc across the top of the lobes reaches about 1 above
               the path's own box once the 2px stroke is counted, and a mask clips at its edge -
               that was the flat white line across the top of the lobes. The viewBox carries the
               same 2 of margin, so the heart is drawn at its original size. */
            width: 28px;
            height: 25px;
            background-color: var(--ap-blue);
            -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-2%20-2%2028%2025%27%3E%3Cpath%20d=%27M12%2020S1.5%2013.2%201.5%206.6A5.1%205.1%200%200%201%2012%204.3%205.1%205.1%200%200%201%2022.5%206.6C22.5%2013.2%2012%2020%2012%2020Z%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-2%20-2%2028%2025%27%3E%3Cpath%20d=%27M12%2020S1.5%2013.2%201.5%206.6A5.1%205.1%200%200%201%2012%204.3%205.1%205.1%200%200%201%2022.5%206.6C22.5%2013.2%2012%2020%2012%2020Z%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
        }

        .html-revamp-product-page .wishlist-button-wrapper .add-to-wishlist-button:hover {
            background-color: var(--ap-blue) !important;
        }

            .html-revamp-product-page .wishlist-button-wrapper .add-to-wishlist-button:hover:before {
                background-color: var(--ap-white);
            }

/* --- Description ---
   Kept: the copy is real product information. It is the one block still carrying the old design, so
   it takes the cross-sell section's treatment - same left-aligned Archivo heading, same white card -
   rather than the theme's centred yellow-underlined title and grey Lato body on a shadowed panel
   (styles.css:4217). */

.html-revamp-product-page .product-collateral > div {
    margin: 0 0 49px;
}

.html-revamp-product-page .full-description-wrapper .title {
    margin: 0 0 27px;
    padding: 0;
    border: none;
    text-align: left;
}

    .html-revamp-product-page .full-description-wrapper .title strong {
        display: block;
        padding: 0;
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-title);
        line-height: var(--ap-leading-body);
        text-transform: none !important;
        color: var(--ap-blue);
    }

        /* the yellow rule under the old tab headings */
        .html-revamp-product-page .full-description-wrapper .title strong:before {
            content: none;
        }

.html-revamp-product-page .full-description {
    margin: 0;
    padding: 30px;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background: var(--ap-white);
    box-shadow: none;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

    .html-revamp-product-page .full-description p {
        margin: 0 0 12px;
    }

        .html-revamp-product-page .full-description p:last-child {
            margin-bottom: 0;
        }

/* --- Customers Who Bought this Item also Bought --- */

/* the frame leaves 94px between the product block and the cross-sell heading; the theme adds its
   own 45px top padding on this wrapper */
.html-revamp-product-page .product-page-bottom {
    margin-top: 49px;
    padding-top: 45px;
}

/* flush with the left edge of the first card, not centred over the grid */
.html-revamp-product-page .revamp-pdp-crosssell .title,
.html-shopping-cart-page .revamp-pdp-crosssell .title {
    margin: 0 0 27px;
    padding-left: 0;
    border: none;
    text-align: left;
}

    /* the theme hangs a 75x3 skewed accent bar off this heading. The Description heading above it
       carries the same decoration on its <strong> instead, which is already cleared, so both
       headings on this page end up plain. */
    .html-revamp-product-page .revamp-pdp-crosssell .title:before,
    .html-shopping-cart-page .revamp-pdp-crosssell .title:before,
    .html-revamp-product-page .revamp-pdp-crosssell .title:after,
    .html-shopping-cart-page .revamp-pdp-crosssell .title:after {
        content: none;
    }

    .theme-v2 .html-revamp-product-page .revamp-pdp-crosssell .title strong,
    .theme-v2 .html-shopping-cart-page .revamp-pdp-crosssell .title strong,
    .html-revamp-product-page .revamp-pdp-crosssell .title strong,
    .html-shopping-cart-page .revamp-pdp-crosssell .title strong {
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-title);
        line-height: var(--ap-leading-body);
        text-transform: none !important;
        color: var(--ap-blue);
    }

/* Venture floats these at 23.5% four-up; the frame is three 305 cards with a 21 gutter */
.html-revamp-product-page .revamp-pdp-crosssell .item-grid,
.html-shopping-cart-page .revamp-pdp-crosssell .item-grid {
    display: grid;
    grid-template-columns: repeat(3, 305px);
    justify-content: start;
    gap: 25px 21px;
}

    .html-revamp-product-page .revamp-pdp-crosssell .item-grid:after,
    .html-shopping-cart-page .revamp-pdp-crosssell .item-grid:after,
    .html-revamp-product-page .revamp-pdp-crosssell .item-grid:before,
    .html-shopping-cart-page .revamp-pdp-crosssell .item-grid:before {
        content: none;
    }

.html-revamp-product-page .revamp-pdp-crosssell .item-box,
.html-shopping-cart-page .revamp-pdp-crosssell .item-box {
    width: auto;
    margin: 0;
    float: none;
    clear: none;
}

@media (max-width: 1200px) {
    .html-revamp-product-page .product-essential {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
    }

    .html-revamp-product-page .gallery {
        grid-row: auto;
        width: 100%;
        max-width: 482px;
    }

    .html-revamp-product-page .product-essential > .slider-wrapper,
    .html-revamp-product-page .overview {
        grid-column: 1;
        grid-row: auto;
    }

    .html-revamp-product-page .revamp-pdp-crosssell .item-grid,
    .html-shopping-cart-page .revamp-pdp-crosssell .item-grid {
        grid-template-columns: repeat(2, 305px);
    }
}

@media (max-width: 767px) {
    .html-revamp-product-page .revamp-pdp-crosssell .item-grid,
    .html-shopping-cart-page .revamp-pdp-crosssell .item-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .html-revamp-product-page .overview-buttons {
        flex-wrap: wrap;
    }
}


/* Create Account - Figma "Create Account". An 880 white card centred on a full-bleed photo band.
   The card's inner width is 812 (880 less 34 either side), which is what the frame's rows add up
   to: 400 + 11 + 400, and 400 + 11 + 195 + 11 + 195.

   Nearly every rule here needs !important, and that is not defensive: the inline <style> in
   _Root.Head (REVAMP.md 6.1) styles form controls through
   `input:not(.search-box-text):not(.newsletter-subscribe-text):not(.qty-input):not(#CsvFile)`,
   which :not() inflates to (1,3,1), all declarations !important - a 31px height, a grey border, a
   4px radius and an inset shadow on every input on the site. The selectors below repeat enough of
   that chain to land above it. `select` in the same rule is only (0,0,1), so selects are easy. */

.html-revamp-form-page .master-column-wrapper {
    padding: 0;
}

/* the frame's photo runs edge to edge behind the card; the band lives in the page body, so it
   breaks out of the gutters the way .revamp-about-hero does rather than using the FullBleed slot */
.revamp-register-band {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 53px var(--ap-gutter-narrow);
    background-color: var(--ap-header);
    background-image: var(--ap-register-hero-photo, none);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.revamp-register-card {
    width: 880px;
    max-width: 100%;
    margin: 0 auto;
    padding: 34px;
    box-sizing: border-box;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

.theme-v2 .revamp-register-card h1.revamp-register-title {
    margin: 0 0 20px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: 0.28px;
    text-transform: none !important;
    color: var(--ap-blue);
}

.revamp-register-section {
    margin: 0 0 20px;
}

.theme-v2 .revamp-register-card h2.revamp-register-heading {
    margin: 0;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: 21px;
    line-height: 53px;
    text-transform: none !important;
    color: var(--ap-blue);
}

/* --- Field rows: 400 / 195 tracks with an 11 gutter --- */

.revamp-register-row {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin: 0 0 11px;
}

    .revamp-register-row:last-child {
        margin-bottom: 0;
    }

    .revamp-register-row:empty {
        display: none;
    }

/* default is a half row; the modifiers pin the frame's fixed widths */
.revamp-field {
    flex: 1 1 0;
    min-width: 0;
}

.revamp-field--wide {
    flex: 0 0 400px;
}

.revamp-field--narrow {
    flex: 0 0 195px;
}

.html-revamp-form-page .revamp-field input:not(.search-box-text):not(.newsletter-subscribe-text):not(#CsvFile),
.html-revamp-form-page .revamp-field select {
    display: block;
    width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--ap-placeholder) !important;
    border-radius: var(--ap-radius) !important;
    background-color: var(--ap-page-bg) !important;
    box-shadow: none !important;
    font-family: var(--ap-font-body) !important;
    font-weight: 400 !important;
    font-size: var(--ap-text-body) !important;
    line-height: var(--ap-leading-body) !important;
    letter-spacing: -0.48px;
    text-transform: none !important;
    color: var(--ap-blue) !important;
}

/* the password pair is 48 tall in the frame, not 40 */
.html-revamp-form-page .revamp-field--tall input:not(.search-box-text):not(.newsletter-subscribe-text):not(#CsvFile) {
    height: 48px !important;
}

/* selects are drawn as outlined boxes on the card, not filled like the text inputs, and carry the
   frame's own caret rather than the platform one */
.html-revamp-form-page .revamp-field--select select {
    padding-right: 34px !important;
    border: var(--ap-border-width) solid var(--ap-border) !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2011%205%27%3E%3Cpath%20d=%27M0%200h11L5.5%205z%27%20fill=%27%2300588c%27/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 11px 5px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* the inline block forces the placeholder to #c1c1c1 at (0,1,1); the palette calls for #9a9a9a */
.html-revamp-form-page .revamp-field input::placeholder {
    font-family: var(--ap-font-body) !important;
    font-size: var(--ap-text-body) !important;
    letter-spacing: -0.48px;
    color: var(--ap-placeholder) !important;
    opacity: 1;
}

.html-revamp-form-page .revamp-field input:focus:not(.search-box-text):not(.newsletter-subscribe-text):not(#CsvFile),
.html-revamp-form-page .revamp-field select:focus {
    border-color: var(--ap-blue) !important;
    background-color: var(--ap-white) !important;
    box-shadow: none !important;
    outline: 2px solid var(--ap-blue-light);
    outline-offset: 1px;
}

.revamp-field .field-validation-error,
.revamp-register-summary {
    display: block;
    margin-top: 4px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-micro);
    line-height: var(--ap-leading-tight);
    color: #c00;
}

.revamp-register-summary:empty {
    display: none;
}

/* --- Checkboxes ---
   Outside .inputs the theme's hidden-input skin does not apply, so these are real checkboxes drawn
   with appearance:none. They still have to outrank the inline block's input rule, hence the same
   :not() chain. */

.revamp-register-checkgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 8px 11px;
}

.revamp-register-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 11px;
}

.revamp-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.html-revamp-form-page .revamp-check input[type="checkbox"]:not(.search-box-text):not(.newsletter-subscribe-text):not(#CsvFile) {
    flex: 0 0 20px;
    width: 20px !important;
    height: 20px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: var(--ap-border-width) solid var(--ap-placeholder) !important;
    border-radius: 0 !important;
    background-color: var(--ap-white) !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

    .html-revamp-form-page .revamp-check input[type="checkbox"]:checked:not(.search-box-text):not(.newsletter-subscribe-text):not(#CsvFile) {
        border-color: var(--ap-blue) !important;
        background-color: var(--ap-blue) !important;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2016%27%3E%3Cpath%20d=%27M3%208.5l3.2%203.2L13%205%27%20fill=%27none%27%20stroke=%27%23fff%27%20stroke-width=%272.4%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 16px 16px !important;
    }

.revamp-check label {
    margin: 0;
    font-family: var(--ap-font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.45px;
    text-transform: none;
    color: var(--ap-placeholder);
    cursor: pointer;
}

/* the preferences and consent lines are a size up from the aviation grid */
.revamp-register-checks .revamp-check label,
.revamp-check--consent label {
    font-size: var(--ap-text-body);
    letter-spacing: -0.48px;
}

/* --- Consent and submit --- */

.revamp-register-consents {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* these used to follow the last section and take its 20 of margin; they sit inside it now */
    margin: 20px 0 0;
}

.revamp-register-section:last-of-type {
    margin-bottom: 0;
}

.revamp-check--consent .read {
    margin-left: 6px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    color: var(--ap-blue);
    text-decoration: underline;
    cursor: pointer;
}

.html-revamp-register-page .revamp-register-submit {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 20px;
    padding: 0;
    border: none;
    border-radius: var(--ap-radius);
    background-color: var(--ap-blue) !important;
    background-image: none !important;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white) !important;
    cursor: pointer;
}

    .html-revamp-register-page .revamp-register-submit:hover {
        background-color: var(--ap-navy) !important;
    }

.html-revamp-register-page .external-authentication:empty {
    display: none;
}

/* the stock partial, used only if a non-checkbox customer attribute is ever added */
.revamp-register-attr .inputs {
    width: auto;
    margin: 0;
}

@media (max-width: 991px) {
    .revamp-register-band {
        padding: 32px var(--ap-gutter-narrow);
    }

    .revamp-field--wide,
    .revamp-field--narrow {
        flex: 1 1 100%;
    }

    .revamp-register-checkgrid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, auto);
    }
}

@media (max-width: 600px) {
    .revamp-register-row {
        flex-direction: column;
    }

    .revamp-register-checkgrid {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        grid-template-rows: none;
    }
}


/* Sign In - Figma "Sign In". A 441 card held to the right edge of a 711 hero. The fields, the
   checkbox and the placeholder colour are the .html-revamp-form-page rules above, shared with the
   register card - only the card, its copy and the buttons are specific to this page. */

.revamp-login-band {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100vw;
    min-height: 711px;
    margin-left: calc(50% - 50vw);
    padding: 50px var(--ap-gutter-narrow);
    box-sizing: border-box;
    background-color: var(--ap-header);
    background-image: var(--ap-login-hero-photo, none);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.revamp-login-card {
    width: 441px;
    max-width: 100%;
    padding: 35px;
    box-sizing: border-box;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

.theme-v2 .revamp-login-card h1.revamp-login-title {
    margin: 0;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: 0.28px;
    text-transform: none !important;
    color: var(--ap-blue);
}

.revamp-login-sub {
    margin: 0 0 20px;
    font-family: var(--ap-font-body);
    font-weight: 400;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

.revamp-login-form .revamp-field {
    flex: none;
    width: 100%;
    margin: 0 0 11px;
}

/* remember-me and the recovery link share a row, pushed apart */
.revamp-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 16px;
}

/* the frame's tick is 22, a notch larger than the register card's 20 */
.html-revamp-login-page .revamp-login-row .revamp-check input[type="checkbox"]:not(.search-box-text):not(.newsletter-subscribe-text):not(#CsvFile) {
    flex: 0 0 22px;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
}

.revamp-login-row .revamp-check {
    align-items: center;
}

.revamp-login-forgot {
    font-family: var(--ap-font-body);
    font-weight: 400;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    letter-spacing: -0.48px;
    color: var(--ap-placeholder);
    text-decoration: none;
    white-space: nowrap;
}

    .revamp-login-forgot:hover {
        color: var(--ap-blue);
        text-decoration: underline;
    }

.revamp-login-summary {
    margin: 0 0 12px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-micro);
    line-height: var(--ap-leading-tight);
    color: #c00;
}

    /* nop always emits the "unsuccessful" text; it only earns space once the summary has errors */
    .revamp-login-summary.validation-summary-valid {
        display: none;
    }

.revamp-login-captcha {
    margin: 0 0 12px;
}

/* --- Buttons: one solid, one outlined, both full width --- */

.html-revamp-login-page .revamp-login-submit,
.html-revamp-login-page .revamp-login-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 0;
    box-sizing: border-box;
    border: var(--ap-border-width) solid var(--ap-blue);
    border-radius: var(--ap-radius);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.html-revamp-login-page .revamp-login-submit,
.html-revamp-login-page .revamp-login-action--solid {
    background-color: var(--ap-blue) !important;
    background-image: none !important;
    color: var(--ap-white) !important;
}

    .html-revamp-login-page .revamp-login-submit:hover,
    .html-revamp-login-page .revamp-login-action--solid:hover {
        background-color: var(--ap-navy) !important;
        border-color: var(--ap-navy);
    }

.html-revamp-login-page .revamp-login-action--ghost {
    background-color: var(--ap-white) !important;
    background-image: none !important;
    color: var(--ap-blue) !important;
}

    .html-revamp-login-page .revamp-login-action--ghost:hover {
        background-color: var(--ap-blue) !important;
        color: var(--ap-white) !important;
    }

/* --- Register prompt --- */

.revamp-login-register {
    margin: 24px 0 0;
}

.theme-v2 .revamp-login-card h2.revamp-login-register-title {
    margin: 0 0 6px;
    font-family: var(--ap-font-heading);
    font-weight: 700;
    font-size: 21px;
    line-height: 28px;
    text-transform: none !important;
    color: var(--ap-blue);
}

.revamp-login-register-text {
    margin: 0 0 16px;
    font-family: var(--ap-font-body);
    font-weight: 400;
    font-size: var(--ap-text-body);
    line-height: 19px;
    color: var(--ap-blue);
}

    .revamp-login-register-text p:last-child {
        margin-bottom: 0;
    }

.revamp-login-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.html-revamp-login-page .external-authentication:empty,
.html-revamp-login-page .revamp-login-info:empty {
    display: none;
}

.revamp-login-info {
    margin-top: 16px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

@media (max-width: 991px) {
    .revamp-login-band {
        justify-content: center;
        min-height: 0;
        padding: 40px var(--ap-gutter-narrow);
    }
}


/* Customer portal - "Customer Portal Account Information" (Figma). 

   Controls reuse the shared .html-revamp-form-page rules, so only the shell, the menu and the
   page's own spacing are in this block. */

/* the frame runs the menu to the left edge of the viewport, so this page's wrappers drop the
   centred max-width the rest of the site uses */
.html-account-page .master-wrapper-content,
.html-account-page .master-column-wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.html-account-page .master-column-wrapper {
    display: flex;
    align-items: flex-start;
    background-color: var(--ap-white);
}

    .html-account-page .master-column-wrapper:after {
        content: none;
    }


.html-account-page .side-2 {
    flex: 0 0 269px;
    width: 269px;
    float: none;
    margin: 0;
    align-self: stretch;
    background-color: var(--ap-navy-deep);
    position: static;
    top: auto;
    right: auto;
    margin-right: 0;
}

.html-account-page .center-2 {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    float: none;
    padding: 30px 40px 60px;
    box-sizing: border-box;
}


.html-account-page .master-column-wrapper .center-2 {
    border-left: none;
}

/* --- The menu --- */

/* Erika's note: the menu stays with the viewport rather than scrolling away with the form. It is
   deliberately content-height, not 100vh - a full-height menu would fill .side-2 and leave sticky
   nothing to travel through. */
.revamp-portal-nav {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    max-height: 100vh;
    padding: 28px 0 32px 32px;
    box-sizing: border-box;
    background-color: var(--ap-navy-deep);
}

.revamp-portal-user {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 34px;
}

.revamp-portal-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--ap-placeholder);
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: 24px;
    line-height: 1;
    color: var(--ap-white);
}

.revamp-portal-name {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-body);
    letter-spacing: -0.54px;
    color: var(--ap-white);
}

.revamp-portal-group {
    margin: 0 0 26px;
}

.theme-v2.revamp-portal-nav h2.revamp-portal-group-title {
    margin: 0 0 4px;
    font-family: var(--ap-font-heading);
    font-weight: 400;
    font-size: var(--ap-text-button);
    line-height: var(--ap-leading-body);
    text-transform: uppercase !important;
    color: var(--ap-border);
}

.revamp-portal-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .revamp-portal-list li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .revamp-portal-list a {
        display: block;
        font-family: var(--ap-font-body);
        font-weight: 400;
        font-size: var(--ap-text-body);
        line-height: 28px;
        color: var(--ap-white);
        text-decoration: none;
    }

        .revamp-portal-list a:hover {
            text-decoration: underline;
        }

    .revamp-portal-list li.active a {
        font-weight: 600;
    }

.revamp-portal-signout {
    margin-top: auto;
    padding-top: 28px;
    font-family: var(--ap-font-heading);
    font-weight: 400;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-white);
    text-decoration: none;
}

    .revamp-portal-signout:hover {
        text-decoration: underline;
    }

/* --- The form --- */

.revamp-portal {
    max-width: 1071px;
}

.theme-v2.revamp-portal h1.revamp-portal-title {
    margin: 0 0 12px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: 0.28px;
    text-transform: none !important;
    color: var(--ap-blue);
}

.revamp-portal-section {
    margin: 0 0 18px;
}

/* the portal headings are 18, a step down from the register card's 21 */
.theme-v2.revamp-portal h2.revamp-portal-heading {
    margin: 0;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: 53px;
    text-transform: none !important;
    color: var(--ap-blue);
}

.revamp-portal-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 10px;
}

    .revamp-portal-row:last-child {
        margin-bottom: 0;
    }

    .revamp-portal-row:empty {
        display: none;
    }


.revamp-portal-row .revamp-field {
    flex: 0 0 350px;
}

.revamp-portal-row .revamp-field--narrow {
    flex: 0 0 170px;
}

/* aviation and preferences sit side by side under the address block */
.revamp-portal-split {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin: 0 0 18px;
}

.revamp-portal-aviation {
    flex: 0 0 510px;
    margin: 0;
}

.revamp-portal-prefs {
    flex: 0 0 350px;
    margin: 0;
}

/* the frame stacks these two columns of six rather than the register card's four of three */
.revamp-portal-checkgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    gap: 8px 11px;
}

.revamp-portal-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 11px;
}

.revamp-portal-note {
    margin: 8px 0 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-micro);
    line-height: var(--ap-leading-tight);
    color: var(--ap-blue);
}

.revamp-portal-summary {
    margin: 0 0 12px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-micro);
    line-height: var(--ap-leading-tight);
    color: #c00;
}

    .revamp-portal-summary.validation-summary-valid,
    .revamp-portal-summary:empty {
        display: none;
    }

.revamp-portal-signature textarea {
    width: 100%;
    min-height: 90px;
}

.revamp-portal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.html-account-page .revamp-portal-save {
    min-width: 209px;
    height: 41px;
    padding: 0 20px;
    border: none;
    border-radius: var(--ap-radius);
    background-color: var(--ap-blue) !important;
    background-image: none !important;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white) !important;
    cursor: pointer;
}

    .html-account-page .revamp-portal-save:hover {
        background-color: var(--ap-navy) !important;
    }

@media (max-width: 991px) {
    .html-account-page .master-column-wrapper {
        display: block;
    }

    .html-account-page .side-2 {
        position: static;
        width: 100%;
        max-height: none;
        flex-basis: auto;
    }

    .revamp-portal-nav {
        min-height: 0;
        padding: 24px 32px;
    }

    .html-account-page .center-2 {
        padding: 24px var(--ap-gutter-narrow) 48px;
    }

    .revamp-portal-row .revamp-field,
    .revamp-portal-row .revamp-field--narrow,
    .revamp-portal-aviation,
    .revamp-portal-prefs {
        flex: 1 1 100%;
    }

    .revamp-portal-checkgrid {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        grid-template-rows: none;
    }
}


/* Customer portal Orders - Figma "Customer Portal My Orders". 

   The rows are drawn by DataTables from JSON, so nothing in the table body can carry a class -
   everything here works through element selectors. */


.revamp-orders {
    max-width: none;
}

/* --- Filter panel --- */

.revamp-orders-filters {
    margin: 12px 0 0;
    padding: 32px;
    box-sizing: border-box;
    background-color: var(--ap-header);
}


.revamp-orders-filter-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 13px;
}


.revamp-orders-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 160px;
    min-width: 0;
}

    .revamp-orders-field label {
        margin: 0;
        font-family: var(--ap-font-heading);
        font-weight: 400;
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        text-transform: none;
        color: var(--ap-white);
    }


.html-revamp-orders-page .revamp-orders-field input:not(.search-box-text):not(.newsletter-subscribe-text):not(#CsvFile) {
    display: block;
    width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: var(--ap-radius) !important;
    background-color: var(--ap-white) !important;
    box-shadow: none !important;
    font-family: var(--ap-font-body) !important;
    font-size: var(--ap-text-body) !important;
    line-height: var(--ap-leading-body) !important;
    color: var(--ap-blue) !important;
}

    .html-revamp-orders-page .revamp-orders-field input:focus:not(.search-box-text):not(.newsletter-subscribe-text):not(#CsvFile) {
        background-color: var(--ap-white) !important;
        box-shadow: none !important;
        outline: 2px solid var(--ap-white);
        outline-offset: 1px;
    }

/* --- Clear / Search, right aligned under the fields --- */

.revamp-orders-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin: 19px 0 0;
}


.html-revamp-orders-page .revamp-orders-clear,
.html-revamp-orders-page .revamp-orders-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 41px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: var(--ap-radius);
    font-family: var(--ap-font-heading) !important;
    font-weight: 600;
    font-size: var(--ap-text-button) !important;
    line-height: normal !important;
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    cursor: pointer;
}

.html-revamp-orders-page .revamp-orders-clear {
    border: var(--ap-border-width) solid var(--ap-white) !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--ap-white) !important;
}

    .html-revamp-orders-page .revamp-orders-clear:hover {
        background-color: var(--ap-white) !important;
        color: var(--ap-header) !important;
    }

.html-revamp-orders-page .revamp-orders-search {
    border: var(--ap-border-width) solid var(--ap-navy) !important;
    background-color: var(--ap-navy) !important;
    background-image: none !important;
    color: var(--ap-white) !important;
}

    .html-revamp-orders-page .revamp-orders-search:hover {
        background-color: var(--ap-navy-deep) !important;
        border-color: var(--ap-navy-deep) !important;
    }

    .html-revamp-orders-page .revamp-orders-clear[disabled],
    .html-revamp-orders-page .revamp-orders-search[disabled] {
        opacity: 0.6;
        cursor: default;
    }

/* --- Table --- */

.revamp-portal-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.revamp-portal-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background-color: var(--ap-white);
}

    .revamp-portal-table thead th {
        height: 53px;
        padding: 0 16px;
        border: none;
        background-color: var(--ap-navy-deep);
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        text-align: left;
        text-transform: none;
        white-space: nowrap;
        color: var(--ap-white);
    }

    .revamp-portal-table tbody td {
        height: 78px;
        padding: 0 16px;
        border: none;
        border-bottom: var(--ap-border-width) solid var(--ap-border);
        background-color: var(--ap-white);
        font-family: var(--ap-font-body);
        font-weight: 400;
        font-size: 15px;
        line-height: var(--ap-leading-body);
        color: var(--ap-blue);
        vertical-align: middle;
    }

        .revamp-portal-table tbody td a,
        .revamp-portal-table tbody td a.ap-link {
            font-family: var(--ap-font-body);
            font-size: 15px;
            color: var(--ap-blue);
            text-decoration: none;
        }

            .revamp-portal-table tbody td a:hover {
                text-decoration: underline;
            }

    .revamp-portal-table tbody tr:hover td {
        background-color: var(--ap-page-bg);
    }

    /* DataTables' own empty row keeps the body from collapsing to nothing */
    .revamp-portal-table tbody td.dataTables_empty {
        height: 78px;
        text-align: center;
        color: var(--ap-placeholder);
    }

/* the sort arrows DataTables paints on sortable headers */
.revamp-portal-table thead th.sorting,
.revamp-portal-table thead th.sorting_asc,
.revamp-portal-table thead th.sorting_desc {
    position: relative;
    cursor: pointer;
}

.revamp-portal-table thead th:before,
.revamp-portal-table thead th:after {
    color: var(--ap-white);
    opacity: 0.5;
}

@media (max-width: 991px) {
    .revamp-orders-filters {
        padding: 20px;
    }

    .revamp-orders-field {
        flex: 1 1 160px;
    }

    .revamp-orders-actions {
        justify-content: flex-start;
    }
}


/* Back Orders and Open Cores - the Orders frame without its filter panel, since neither page has
   a search of its own. They differ from Orders as they are DataTables with
   paging on, so the search box, page length select, info line and pager actually render. */

.revamp-portal-wide {
    max-width: none;
}


.revamp-portal-table-wrap .dataTables_wrapper .row > .col-md-12 {
    padding-left: 0;
    padding-right: 0;
}

.revamp-portal-table-wrap .dataTables_wrapper table.dataTable {
    margin-top: 0 !important;
}


/* Customer portal Shipping Accounts - "Customer Portal Shipping Account" (Figma).
 */

.revamp-ship-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 17px;
    margin: 0 0 24px;
}

    .revamp-ship-row .revamp-field {
        flex: 0 0 350px;
    }

.revamp-ship-label {
    display: block;
    margin: 0 0 6px;
    font-family: var(--ap-font-heading);
    font-weight: 400;
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    text-transform: none;
    color: var(--ap-blue);
}

.html-account-page .revamp-ship-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 145px;
    width: 145px;
    height: 40px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: var(--ap-border-width) solid var(--ap-blue);
    border-radius: var(--ap-radius);
    background-color: var(--ap-blue) !important;
    background-image: none !important;
    font-family: var(--ap-font-heading) !important;
    font-weight: 600;
    font-size: var(--ap-text-button) !important;
    line-height: normal !important;
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white) !important;
    cursor: pointer;
}

    .html-account-page .revamp-ship-add:hover {
        background-color: var(--ap-navy) !important;
        border-color: var(--ap-navy);
    }

    .html-account-page .revamp-ship-add[disabled] {
        opacity: 0.6;
        cursor: default;
    }

/* the accounts already on file: the frame does not draw this list, but the page carries one and
   hiding it would lose real data */
.revamp-ship-table-wrap {
    max-width: 717px;
}

.revamp-ship-empty {
    margin: 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-placeholder);
}

@media (max-width: 991px) {
    .revamp-ship-row .revamp-field {
        flex: 1 1 100%;
    }

    .revamp-ship-table-wrap {
        max-width: none;
    }
}


/* Customer portal GDPR Tools - "Customer Portal GDPR Tools" (Figma). */

.revamp-gdpr-block {
    max-width: 570px;
    margin: 0 0 28px;
}

.revamp-gdpr-text {
    margin: 0 0 16px;
    font-family: var(--ap-font-body);
    font-weight: 400;
    font-size: var(--ap-text-body);
    line-height: 19px;
    letter-spacing: -0.16px;
    color: var(--ap-blue);
}

.html-account-page .revamp-gdpr-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 225px;
    height: 40px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: var(--ap-border-width) solid var(--ap-blue);
    border-radius: var(--ap-radius);
    background-color: var(--ap-blue) !important;
    background-image: none !important;
    font-family: var(--ap-font-heading) !important;
    font-weight: 600;
    font-size: var(--ap-text-button) !important;
    line-height: normal !important;
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white) !important;
    cursor: pointer;
}

    .html-account-page .revamp-gdpr-button:hover {
        background-color: var(--ap-navy) !important;
        border-color: var(--ap-navy);
    }

.html-account-page .revamp-gdpr-button--danger {
    border-color: var(--ap-danger);
    background-color: var(--ap-danger) !important;
}

    .html-account-page .revamp-gdpr-button--danger:hover {
        background-color: var(--ap-danger-dark) !important;
        border-color: var(--ap-danger-dark);
    }

/* the outcome of an export or a delete request */
.revamp-gdpr-result {
    max-width: 570px;
    margin: 0 0 24px;
    padding: 12px 16px;
    border-left: 3px solid var(--ap-blue);
    background-color: var(--ap-page-bg);
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

@media (max-width: 991px) {
    .html-account-page .revamp-gdpr-button {
        width: 100%;
        max-width: 350px;
    }
}


/* Customer portal Account Statement - "Customer Portal Account Statement" (Figma).

   The panel, field and Search button are the Orders ones, the page carries
   html-revamp-orders-page so they apply unchanged.*/

.revamp-statement-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

    .revamp-statement-row .revamp-orders-field {
        flex: 0 0 160px;
    }

.revamp-statement-note {
    max-width: 1024px;
    margin: 0 0 4px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

    .revamp-statement-note:empty {
        display: none;
    }


.html-account-page .revamp-statement-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    height: 32px;
    padding: 0 14px;
    box-sizing: border-box;
    border: var(--ap-border-width) solid var(--ap-blue);
    border-radius: var(--ap-radius);
    background-color: transparent;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-micro);
    line-height: normal;
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ap-blue);
    cursor: pointer;
}

    .html-account-page .revamp-statement-pay:hover {
        background-color: var(--ap-blue);
        color: var(--ap-white);
    }

@media (max-width: 991px) {
    .revamp-statement-row .revamp-orders-field {
        flex: 1 1 160px;
    }
}


/* Customer portal My Product Reviews - "Customer Portal My Reviews" (Figma) */

.revamp-reviews-table thead th {
    height: 53px;
    padding: 0 16px;
    border: none;
    background-color: var(--ap-navy);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-body);
    text-align: left;
    text-transform: none;
    white-space: nowrap;
    color: var(--ap-white);
}

.revamp-reviews-table tbody td {
    padding: 14px 16px;
    border: none;
    border-bottom: var(--ap-border-width) solid var(--ap-border);
    background-color: var(--ap-white);
    font-family: var(--ap-font-body);
    font-weight: 400;
    font-size: var(--ap-text-body);
    line-height: 21px;
    color: var(--ap-blue);
    vertical-align: top;
}


.revamp-reviews-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.revamp-reviews-thumb {
    flex: 0 0 137px;
    width: 137px;
    height: 122px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .revamp-reviews-thumb img {
        max-width: 100%;
        max-height: 122px;
        object-fit: contain;
    }

.revamp-reviews-name {
    display: block;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: 21px;
    text-transform: uppercase;
    color: var(--ap-blue);
    text-decoration: none;
}

    .revamp-reviews-name:hover {
        text-decoration: underline;
    }

.revamp-reviews-sku {
    margin-top: 6px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: 21px;
    text-transform: uppercase;
    color: var(--ap-blue);
}


.revamp-stars {
    display: inline-flex;
    align-items: center;
    gap: 0;
    width: 125px;
    height: 25px;
}

    .revamp-stars svg {
        width: 25px;
        height: 25px;
        flex: 0 0 25px;
    }

.revamp-reviews-status {
    display: block;
    margin-top: 6px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-micro);
    line-height: var(--ap-leading-tight);
    color: var(--ap-placeholder);
}

.revamp-reviews-reply {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ap-border);
}

.revamp-reviews-reply-head {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-micro);
    text-transform: uppercase;
    color: var(--ap-placeholder);
}

.revamp-reviews-date {
    white-space: nowrap;
}

.revamp-reviews-empty {
    margin: 12px 0 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

@media (max-width: 991px) {
    .revamp-reviews-item {
        flex-direction: column;
    }

    .revamp-reviews-thumb {
        flex-basis: auto;
    }
}


/* Customer portal Addresses. The form rows reuse .revamp-portal-row and .revamp-field, so the 
   control styling are the same rules the account info page uses; only the
   saved-address cards and their buttons are specific to this page. */

.revamp-address-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 8px 0 0;
}

.revamp-address-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 350px;
    padding: 24px;
    box-sizing: border-box;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

.theme-v2 .revamp-address-card h2.revamp-address-name {
    margin: 0 0 12px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-body);
    text-transform: none !important;
    color: var(--ap-blue);
}

.revamp-address-info {
    flex: 1 1 auto;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

    .revamp-address-info li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

.revamp-address-label {
    color: var(--ap-placeholder);
}

.revamp-address-actions {
    display: flex;
    gap: 10px;
}

.html-account-page .revamp-address-edit,
.html-account-page .revamp-address-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 36px;
    padding: 0 16px;
    box-sizing: border-box;
    border: var(--ap-border-width) solid var(--ap-blue);
    border-radius: var(--ap-radius);
    background-image: none !important;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    cursor: pointer;
}

.html-account-page .revamp-address-edit {
    background-color: var(--ap-blue) !important;
    color: var(--ap-white) !important;
}

    .html-account-page .revamp-address-edit:hover {
        background-color: var(--ap-navy) !important;
        border-color: var(--ap-navy);
    }

.html-account-page .revamp-address-delete {
    background-color: var(--ap-white) !important;
    color: var(--ap-blue) !important;
}

    .html-account-page .revamp-address-delete:hover {
        background-color: var(--ap-blue) !important;
        color: var(--ap-white) !important;
    }


.revamp-changepassword-fields {
    display: flex;
    flex-direction: column;
    gap: 11px;
    width: 350px;
    max-width: 100%;
    margin: 8px 0 0;
}

    .revamp-changepassword-fields .revamp-field {
        flex: none;
        width: 100%;
    }

.revamp-portal-actions--start {
    justify-content: flex-start;
}

.revamp-address-incomplete {
    margin: 0 0 12px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-placeholder);
}

.revamp-address-empty {
    margin: 8px 0 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

/* the form pages put Back beside the save button */
.revamp-address-cancel {
    display: inline-flex;
    align-items: center;
    margin-right: 16px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-blue);
    text-decoration: none;
}

    .revamp-address-cancel:hover {
        text-decoration: underline;
    }

/* the stock attribute partial, used only for control types the inline branch does not cover */
.revamp-address-attr .inputs {
    width: auto;
    margin: 0;
}

@media (max-width: 991px) {
    .revamp-address-card {
        flex: 1 1 100%;
    }
}

.revamp-portal-errors {
    margin: 0 0 16px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: #c00;
}

    .revamp-portal-errors p {
        margin: 0 0 4px;
    }

.revamp-portal-errors-title {
    font-family: var(--ap-font-heading);
    font-weight: 600;
}

/* Open Cores right-aligns its Charge column */
.revamp-portal-table .revamp-portal-table-num {
    text-align: right;
}

/* --- DataTables controls --- */


.html-revamp-table-page .dataTables_wrapper .row {
    margin: 0;
}

.html-revamp-table-page .dataTables_filter {
    margin: 0 0 14px;
    text-align: right;
}

    .html-revamp-table-page .dataTables_filter label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        font-family: var(--ap-font-heading);
        font-weight: 400;
        font-size: var(--ap-text-body);
        text-transform: none;
        color: var(--ap-blue);
    }


.html-revamp-table-page .dataTables_filter input:not(.search-box-text):not(.newsletter-subscribe-text):not(#CsvFile) {
    width: 260px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    border: var(--ap-border-width) solid var(--ap-border) !important;
    border-radius: var(--ap-radius) !important;
    background-color: var(--ap-white) !important;
    box-shadow: none !important;
    font-family: var(--ap-font-body) !important;
    font-size: var(--ap-text-body) !important;
    color: var(--ap-blue) !important;
}

.html-revamp-table-page .dataTables_length {
    margin: 14px 0 0;
}

    .html-revamp-table-page .dataTables_length label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
        text-transform: none;
        color: var(--ap-blue);
    }

    .html-revamp-table-page .dataTables_length select {
        height: 34px !important;
        padding: 0 8px !important;
        border: var(--ap-border-width) solid var(--ap-border) !important;
        border-radius: var(--ap-radius) !important;
        background-color: var(--ap-white) !important;
        box-shadow: none !important;
        font-family: var(--ap-font-body) !important;
        font-size: var(--ap-text-body) !important;
        color: var(--ap-blue) !important;
    }

.html-revamp-table-page .dataTables_info {
    margin: 14px 0 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}


.html-revamp-table-page .dataTables_paginate {
    margin: 14px 0 0;
}

    .html-revamp-table-page .dataTables_paginate ul.pagination {
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .html-revamp-table-page .dataTables_paginate .page-item {
        margin: 0;
    }

    .html-revamp-table-page .dataTables_paginate .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        margin: 0;
        padding: 0 12px;
        border: var(--ap-border-width) solid var(--ap-border);
        border-radius: var(--ap-radius);
        background-color: var(--ap-white);
        font-family: var(--ap-font-heading);
        font-weight: 500;
        font-size: var(--ap-text-body);
        line-height: normal;
        color: var(--ap-blue);
    }

        .html-revamp-table-page .dataTables_paginate .page-link:hover {
            border-color: var(--ap-blue);
            background-color: var(--ap-page-bg);
            color: var(--ap-blue);
        }

    .html-revamp-table-page .dataTables_paginate .page-item.active .page-link {
        border-color: var(--ap-blue);
        background-color: var(--ap-blue);
        color: var(--ap-white);
    }

    .html-revamp-table-page .dataTables_paginate .page-item.disabled .page-link {
        opacity: 0.45;
        background-color: var(--ap-white);
        color: var(--ap-placeholder);
    }


/* Lycoming loyalty band - a header-blue band between the product grid and the FAQ, on the
   Lycoming engines root only. */

.revamp-lyc-loyalty {
    padding: 64px 0;
    background-color: var(--ap-header);
    color: var(--ap-white);
}

.revamp-lyc-loyalty-inner {
    box-sizing: border-box;
    width: 90%;
    max-width: 1251px;
    margin: 0 auto;
}

.theme-v2 .revamp-lyc-loyalty-title {
    margin: 0 0 20px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: 42px;
    line-height: 53px;
    text-transform: none;
    color: var(--ap-white);
}

.revamp-lyc-loyalty-intro {
    max-width: 745px;
    margin: 0 0 36px;
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: 23px;
    line-height: 28px;
    color: var(--ap-white);
}

.revamp-lyc-loyalty-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: flex-start;
}

.revamp-lyc-loyalty-main {
    flex: 0 1 614px;
    min-width: 0;
}

.revamp-lyc-loyalty-terms {
    flex: 1 1 440px;
    min-width: 0;
}

    .revamp-lyc-loyalty-terms p {
        margin: 0 0 14px;
        font-family: var(--ap-font-body);
        font-weight: 400;
        font-size: var(--ap-text-body);
        line-height: 18px;
        color: var(--ap-white);
    }

.revamp-lyc-loyalty-note {
    margin: 12px 0 0;
    font-family: var(--ap-font-body);
    font-weight: 400;
    font-size: var(--ap-text-body);
    line-height: 18px;
    color: var(--ap-white);
}

/* the price matrix */
.revamp-lyc-loyalty-matrix {
    width: 100%;
    max-width: 614px;
    border-collapse: collapse;
    font-family: var(--ap-font-heading);
}

    .revamp-lyc-loyalty-matrix th,
    .revamp-lyc-loyalty-matrix td {
        height: 37px;
        padding: 0 8px;
        border: 1px solid var(--ap-border);
        background-color: var(--ap-white);
        font-size: var(--ap-text-body);
        line-height: 19px;
        text-align: center;
        vertical-align: middle;
    }

    .revamp-lyc-loyalty-matrix td {
        font-weight: 400;
        color: #000000;
    }

    .revamp-lyc-loyalty-matrix th {
        font-weight: 600;
        color: var(--ap-blue);
    }

    .revamp-lyc-loyalty-matrix .revamp-lyc-loyalty-corehead,
    .revamp-lyc-loyalty-matrix .revamp-lyc-loyalty-purchase {
        background-color: var(--ap-navy);
        color: var(--ap-white);
    }

    .revamp-lyc-loyalty-matrix .revamp-lyc-loyalty-purchase {
        width: 137px;
    }

    .revamp-lyc-loyalty-matrix .revamp-lyc-loyalty-cyl {
        width: 90px;
    }


    .revamp-lyc-loyalty-matrix .revamp-lyc-loyalty-corner {
        height: auto;
        padding: 0 20px 10px 0;
        border: none;
        background-color: transparent;
        font-family: var(--ap-font-body);
        font-weight: 400;
        font-size: var(--ap-text-body);
        line-height: 18px;
        text-align: left;
        vertical-align: top;
        color: var(--ap-white);
    }

@media (max-width: 991px) {
    .revamp-lyc-loyalty-cols {
        gap: 28px;
    }

    .theme-v2 .revamp-lyc-loyalty-title {
        font-size: 32px;
        line-height: 40px;
    }

    .revamp-lyc-loyalty-intro {
        font-size: 19px;
        line-height: 26px;
    }

    .revamp-lyc-loyalty-main {
        flex: 1 1 100%;
        overflow-x: auto;
    }

    .revamp-lyc-loyalty-matrix {
        min-width: 560px;
    }
}


/* Recently Viewed Products - the page reuses the hero, catalog grid and card, so only its
   empty state needs anything of its own. */
.revamp-rvp-empty {
    margin: 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-placeholder);
}


/* Footer INFORMATION topics - they use the shared photo hero and this reading column. The bodies are authored in admin and carry some inline styling;
   across all nine only font-size, colour and font-family would clash, so those are forced here. */

.revamp-topic {
    padding: 0 0 72px;
}

.revamp-topic-body {
    max-width: 860px;
}

    .theme-v2 .revamp-topic-body h2,
    .theme-v2 .revamp-topic-body h3,
    .theme-v2 .revamp-topic-body h4,
    .theme-v2 .revamp-topic-body h5 {
        margin: 34px 0 12px;
        font-family: var(--ap-font-heading) !important;
        font-weight: 600;
        text-transform: none !important;
        color: var(--ap-blue) !important;
    }

    .theme-v2 .revamp-topic-body h2 {
        font-size: var(--ap-text-title) !important;
        line-height: 36px;
    }

    .theme-v2 .revamp-topic-body h3 {
        font-size: var(--ap-text-card) !important;
        line-height: 28px;
    }

    .theme-v2 .revamp-topic-body h4,
    .theme-v2 .revamp-topic-body h5 {
        font-size: var(--ap-text-link) !important;
        line-height: 24px;
    }

    /* the first block sits tight under the hero */
    .revamp-topic-body > :first-child {
        margin-top: 0;
    }

.revamp-topic-body p,
.revamp-topic-body li,
.revamp-topic-body span {
    font-family: var(--ap-font-body) !important;
    font-size: var(--ap-text-body) !important;
    line-height: var(--ap-leading-body) !important;
    color: var(--ap-blue) !important;
}

    .revamp-topic-body p {
        margin: 0 0 16px;
    }

.revamp-topic-body ul,
.revamp-topic-body ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

    .revamp-topic-body li {
        margin: 0 0 8px;
    }

.revamp-topic-body a {
    color: var(--ap-header) !important;
    text-decoration: underline;
}

    .revamp-topic-body a:hover {
        color: var(--ap-blue) !important;
    }

.revamp-topic-body strong,
.revamp-topic-body b {
    font-weight: 600;
}

@media (max-width: 991px) {
    .revamp-topic {
        padding-bottom: 48px;
    }
}


/* Contact Us - no design of its own, so it follows the footer text pages: the shared hero, then
   the topic copy beside the form. The form panel is the About page's contact card reused. */

.revamp-contact {
    padding: 0 0 72px;
}

.revamp-contact-cols {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 56px;
}

.revamp-contact-intro {
    flex: 1 1 520px;
    min-width: 0;
}

.revamp-contact-card {
    flex: 0 1 480px;
    min-width: 0;
    box-sizing: border-box;
    padding: 36px 28px 32px;
    border-radius: var(--ap-radius-lg);
    background-color: var(--ap-navy);
}

.theme-v2 .revamp-contact-card-title {
    margin: 0 0 20px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-card);
    line-height: var(--ap-leading-card);
    text-transform: none !important;
    color: var(--ap-white);
}

.revamp-contact-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.revamp-contact-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .revamp-contact-field label {
        margin: 0;
        font-family: var(--ap-font-heading);
        font-weight: 400;
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        text-transform: none;
        color: var(--ap-white);
    }

    /* the required star sits after the input in the stock markup */
    .revamp-contact-field .required {
        display: none;
    }

/* the inline block in _Root.Head forces height, border and shadow on every input at (1,3,1) */
#ContactUsForm input#FullName,
#ContactUsForm input#Email,
#ContactUsForm input#Country,
#ContactUsForm input#Subject,
#ContactUsForm textarea#Enquiry {
    width: 100% !important;
    height: var(--ap-control-height) !important;
    margin: 0 !important;
    padding: 0 13px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--ap-placeholder) !important;
    border-radius: var(--ap-radius) !important;
    background-color: var(--ap-page-bg) !important;
    box-shadow: none !important;
    font-family: var(--ap-font-body) !important;
    font-weight: 400 !important;
    font-size: var(--ap-text-body) !important;
    line-height: var(--ap-leading-body) !important;
    color: var(--ap-blue) !important;
}

#ContactUsForm textarea#Enquiry {
    height: 168px !important;
    padding: 10px 13px !important;
    resize: vertical;
}

#ContactUsForm input::placeholder,
#ContactUsForm textarea::placeholder {
    color: var(--ap-placeholder);
    opacity: 1;
}

.revamp-contact-captcha {
    margin-top: 2px;
}

.theme-v2 button.revamp-contact-send {
    align-self: flex-end;
    min-width: 157px;
    height: var(--ap-control-height);
    padding: 0 22px;
    border: none;
    border-radius: var(--ap-radius);
    background-color: var(--ap-blue-light) !important;
    background-image: none !important;
    font-family: var(--ap-font-heading) !important;
    font-weight: 700;
    font-size: var(--ap-text-button) !important;
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white) !important;
    cursor: pointer;
}

    .theme-v2 button.revamp-contact-send:hover {
        background-color: var(--ap-header) !important;
    }

/* validation and the posted result, both on the navy panel */
.revamp-contact-form .field-validation-error,
.revamp-contact-summary {
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-fine);
    line-height: var(--ap-leading-fine);
    color: var(--ap-white);
}

    .revamp-contact-summary:empty {
        display: none;
    }

.revamp-contact-result {
    margin: 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-white);
}

@media (max-width: 991px) {
    .revamp-contact-cols {
        gap: 32px;
    }

    .revamp-contact-card {
        flex: 1 1 100%;
    }
}

.html-revamp-contact-page .contact-page .page-body {
    max-width: none;
    margin: 0;
    background: none;
    box-shadow: none;
}

.html-revamp-contact-page .contact-page .topic-block {
    padding: 0;
    border-bottom: none;
}

/* ---------------------------------------------------------------------------
   Ready-to-Ship Engines
   --------------------------------------------------------------------------- */

.html-revamp-rts-page .revamp-cat-hero {
    margin-bottom: 32px;
}

.revamp-rts-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 35px;
}

.theme-v2 .revamp-rts-intro h2.revamp-rts-intro-title {
    margin: 0 0 14px;
    font-family: var(--ap-font-heading);
    font-weight: 500;
    font-size: var(--ap-text-section);
    line-height: var(--ap-leading-section);
    letter-spacing: var(--ap-tracking-section);
    color: var(--ap-blue);
}

.revamp-rts-intro-text {
    max-width: 798px;
    margin: 0;
    font-family: var(--ap-font-body);
    font-weight: 500;
    font-size: var(--ap-text-link);
    line-height: 25px;
    color: var(--ap-blue);
}


.revamp-rts-intro-cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 171px;
    height: var(--ap-control-height);
    padding: 0 16px;
    border: var(--ap-border-width) solid var(--ap-blue);
    border-radius: var(--ap-radius);
    background-color: var(--ap-blue);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white);
    text-decoration: none;
    white-space: nowrap;
}

    .revamp-rts-intro-cta:hover {
        background-color: transparent;
        color: var(--ap-blue);
        text-decoration: none;
    }

/* the two maker panels sit side by side and keep their own heights - Continental
   is usually much shorter than Lycoming. The frame runs them wider than the copy
   above, out to the narrow gutter, which is also what keeps a serial on one line. */
.revamp-rts-brands {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    margin-right: calc(var(--ap-gutter-narrow) - var(--ap-gutter));
    margin-bottom: var(--ap-section-space);
    margin-left: calc(var(--ap-gutter-narrow) - var(--ap-gutter));
}

.revamp-rts-brand {
    padding: 23px 22px 22px;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

.theme-v2 .revamp-rts-brand h2.revamp-rts-brand-title {
    margin: 0 0 20px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-title);
    color: var(--ap-blue);
}

.revamp-rts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 9px;
}

.revamp-rts-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 313px;
    padding: 17px 14px 14px;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-card-bg);
    text-decoration: none;
}

    .revamp-rts-card:hover {
        border-color: var(--ap-blue);
        text-decoration: none;
    }

/* the whole card is the click target, so the link covers it */
.revamp-rts-card-link {
    position: absolute;
    inset: 0;
    border-radius: var(--ap-radius);
}

    .revamp-rts-card-link:focus-visible {
        outline: 2px solid var(--ap-blue);
        outline-offset: 2px;
    }

.revamp-rts-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--ap-radius);
    background-color: var(--ap-blue);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-badge-lg);
    text-transform: uppercase;
    color: var(--ap-white);
}

/* the condition codes the Portal sends: NE new, RB rebuilt, OH overhauled */
.revamp-rts-badge-rb {
    background-color: var(--ap-blue-light);
}

.revamp-rts-badge-oh {
    background-color: var(--ap-navy-deep);
}

.revamp-rts-card-title {
    margin-top: 7px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-tight);
    text-transform: uppercase;
    color: var(--ap-blue);
}

/* auto margins centre the mark in whatever space the title leaves */
.revamp-rts-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto 0;
    padding: 12px 0;
}

    .revamp-rts-card-logo img {
        max-width: 100%;
        max-height: 52px;
        width: auto;
        height: auto;
    }

.revamp-rts-card-serial {
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    letter-spacing: var(--ap-tracking-tight);
    color: var(--ap-blue);
}

.revamp-rts-empty,
.revamp-rts-unavailable {
    margin: 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

.revamp-rts-unavailable {
    margin-bottom: var(--ap-section-space);
    padding: 23px 22px;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

    .revamp-rts-unavailable p {
        margin: 0;
    }

@media (max-width: 1200px) {
    .revamp-rts-brands {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .revamp-rts-intro {
        flex-direction: column;
        gap: 20px;
    }

    .revamp-rts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .revamp-rts-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------
   Customer portal: Saved Cards
   Erika asked for "the same as Addresses", so the block metrics are that card's.
   --------------------------------------------------------------------------- */

.revamp-card-intro,
.revamp-card-empty {
    margin: 0 0 18px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

.revamp-card-empty {
    margin: 8px 0 0;
}

.revamp-card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 8px 0 0;
}

.revamp-card-item {
    display: flex;
    flex-direction: column;
    flex: 0 0 350px;
    padding: 24px;
    box-sizing: border-box;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

.revamp-card-item--expired {
    border-color: var(--ap-danger);
}

.revamp-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
}

.revamp-card-brand {
    flex: none;
    width: 45px;
    height: auto;
}

.theme-v2 .revamp-card-item h2.revamp-card-type {
    margin: 0;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    line-height: var(--ap-leading-body);
    text-transform: none !important;
    color: var(--ap-blue);
}

.revamp-card-expired {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: var(--ap-radius);
    background-color: var(--ap-danger);
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-badge-lg);
    text-transform: uppercase;
    color: var(--ap-white);
}

.revamp-card-info {
    flex: 1 1 auto;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

    .revamp-card-info li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

/* the masked number reads as a number, not prose */
.revamp-card-number {
    letter-spacing: var(--ap-tracking-tight);
    font-variant-numeric: tabular-nums;
}

.revamp-card-label {
    color: var(--ap-placeholder);
}

/* hand-listed engines have no product page, so the card dials and says so */
.revamp-rts-card-cta {
    margin-top: 6px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-blue);
}

.revamp-card-actions {
    display: flex;
    gap: 10px;
}

.html-account-page .revamp-card-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 36px;
    padding: 0 16px;
    box-sizing: border-box;
    border: var(--ap-border-width) solid var(--ap-blue);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white) !important;
    background-image: none !important;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-blue) !important;
    cursor: pointer;
}

    .html-account-page .revamp-card-delete:hover {
        background-color: var(--ap-blue) !important;
        color: var(--ap-white) !important;
    }

@media (max-width: 480px) {
    .revamp-card-item {
        flex: 1 1 100%;
    }
}

/* the dots belong to the mobile carousel; the row layout needs none */
.revamp-benefits-dots {
    display: none;
}

/* ---------------------------------------------------------------------------
   Mobile (Figma Mobile 09.03, 402px frames)

   Everything below 768px. Nothing in this block may appear outside a media
   query - desktop must not move. Where a mockup and the guideline sheet
   disagree the sheet wins, so: body copy 16/20, buttons 40px, Inter not Rubik.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   "Item added to cart" - Figma. SevenSpikes drops this into a Kendo window it
   also uses for the attribute picker, so the window itself is reached through
   :has() and only this popup takes the navy treatment. Everything inside it is
   named specifically enough to select on its own.
   --------------------------------------------------------------------------- */

.ajaxCart:has(.productAddedToCartWindow) {
    border: none;
    border-radius: var(--ap-radius);
    background-color: var(--ap-navy-deep);
}

    .ajaxCart:has(.productAddedToCartWindow) .k-window-titlebar {
        position: relative;
        height: 60px;
        border: none;
        background: none;
        box-shadow: none;
    }

        /* the rule the frame draws under the heading */
        .ajaxCart:has(.productAddedToCartWindow) .k-window-titlebar:after {
            content: "";
            position: absolute;
            left: 30px;
            right: 30px;
            bottom: 0;
            height: 1px;
            background-color: rgba(255, 255, 255, 0.4);
        }

        .ajaxCart:has(.productAddedToCartWindow) .k-window-titlebar .k-window-actions {
            top: 18px;
            right: 30px;
        }

            .ajaxCart:has(.productAddedToCartWindow) .k-window-titlebar .k-window-actions a:before {
                width: 22px;
                height: 22px;
                font-size: 22px;
                color: var(--ap-white);
            }

/* the heading is absolute against the window, so it lands over the title bar. The wishlist popup
   is the same markup with its own wording, so both are covered here. */
.productAddedToCartWindowTitle {
    padding: 18px 60px;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white);
}

.productAddedToCartWindow {
    padding: 26px 30px 30px;
    background: none;
}

.productAddedToCartItem {
    display: flex;
    gap: 24px;
}

.productAddedToCartWindowImage {
    flex: 0 0 180px;
    float: none;
    width: 180px;
    height: 180px;
    margin: 0;
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
    overflow: hidden;
}

    .productAddedToCartWindowImage a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .productAddedToCartWindowImage img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.productAddedToCartWindowDescription {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
}

    .productAddedToCartWindowDescription h1 {
        margin: 0;
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-link);
        line-height: 24px;
        text-transform: uppercase;
    }

        /* the name links to the product, but the frame prints it as plain text. styles.css opens
           with a site-wide `a:hover, a:hover * { text-decoration: underline !important }` and
           theme.custom-1.css paints this one blue on hover. */
        .light-theme .productAddedToCartWindowDescription h1 a,
        .light-theme .productAddedToCartWindowDescription h1 a:hover,
        .productAddedToCartWindowDescription h1 a,
        .productAddedToCartWindowDescription h1 a:hover,
        .productAddedToCartWindowDescription h1 a:hover * {
            color: var(--ap-white);
            text-decoration: none !important;
        }

    /* theme.custom-1.css paints this the old link blue */
    .light-theme .productAddedToCartWindowDescription .price,
    .productAddedToCartWindowDescription .price {
        margin: 8px 0 0;
        font-family: var(--ap-font-body);
        font-weight: 400;
        font-size: var(--ap-text-body);
        line-height: 24px;
        text-transform: none;
        color: var(--ap-white);
    }

    .productAddedToCartWindowDescription .attributeInfo {
        color: rgba(255, 255, 255, 0.7);
    }

    /* the frame sets the quantity against the bottom of the picture */
    .productAddedToCartWindowDescription .quantity {
        margin-top: auto;
        padding-top: 12px;
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-link);
        line-height: 24px;
        text-transform: uppercase;
        color: var(--ap-white);
    }

/* not in the frame, but dropping them would leave the cart icon in the header as the only way on
   to checkout */
.productAddedToCartWindowSummary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
}

    .productAddedToCartWindowSummary a.continueShoppingLink,
    .productAddedToCartWindowSummary a.viewBasketLink {
        flex: 1 1 auto;
        width: auto;
        margin: 0;
        padding: 0;
        background: none;
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-button);
        letter-spacing: var(--ap-tracking-button);
        /* ajaxCart.css centres the summary row */
        text-align: left;
        text-transform: uppercase;
        color: var(--ap-white);
    }

        .productAddedToCartWindowSummary a.continueShoppingLink:hover,
        .productAddedToCartWindowSummary a.viewBasketLink:hover {
            background: none;
            color: var(--ap-white);
            text-decoration: none !important;
        }

    .productAddedToCartWindowSummary .viewBasketLink {
        display: none;
    }

    .productAddedToCartWindowSummary .checkoutButtonWrapper,
    .productAddedToCartWindowSummary .shoppingCartButtonWrapper {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
    }

    .light-theme .productAddedToCartWindowSummary .button-1,
    .productAddedToCartWindowSummary .button-1 {
        width: auto;
        min-width: 0;
        height: var(--ap-control-height);
        padding: 0 24px;
        border: none;
        border-radius: var(--ap-radius);
        background-color: var(--ap-blue) !important;
        background-image: none !important;
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-button);
        letter-spacing: var(--ap-tracking-button);
        text-transform: uppercase;
        color: var(--ap-white) !important;
    }

        .productAddedToCartWindowSummary .button-1:hover {
            background-color: var(--ap-blue-light) !important;
        }


/* ============================================================================
   Checkout - Figma desktop "Checkout" (1440x2911)
   SevenSpikes RealOnePageCheckout, so the markup comes from Angular and the plugin ships its
   own stylesheet. Everything here is scoped to .html-real-opc-page and leans on the section
   names the controllers already use. The frame runs Contact Information, Billing, Shipping,
   Shipping Method and Payment down a 756 column, and the summary with the two code boxes down
   a 477 one.
   ============================================================================ */

.html-real-opc-page .page.checkout-page {
    max-width: 1253px;
    margin: 0 auto 80px;
    text-align: left;
}

/* the plugin sticks this to the top of the viewport and centres it */
.html-real-opc-page .checkout-page > .page-title {
    position: static !important;
    margin: 0 0 20px;
    padding: 0;
    border: none;
    background: none !important;
    text-align: left;
}

.html-real-opc-page .checkout-page > .page-title h1 {
    margin: 0;
    padding: 0;
    border: none;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-title);
    line-height: var(--ap-leading-heading);
    text-align: left;
    text-transform: none;
    color: var(--ap-blue);
}

    .html-real-opc-page .checkout-page > .page-title h1:before,
    .html-real-opc-page .checkout-page > .page-title h1:after {
        content: none !important;
    }

/* --- the two columns. The bootstrap grid is still in the markup, so the widths are set here
       rather than by rewriting every col class. --- */
.html-real-opc-page .page-body > .row {
    display: grid;
    grid-template-columns: 756px minmax(0, 477px);
    align-items: start;
    gap: 20px;
    margin: 0;
}

    .html-real-opc-page .page-body > .row > .col-md-8,
    .html-real-opc-page .page-body > .row > .col-md-4 {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 0;
        padding: 0;
        flex: 0 0 auto;
    }

/* the right column is sticky in the plugin; that is kept, but the gap is owned here */
.html-real-opc-page .page-body > .row > .col-md-4 > div {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Discount Code and Gift Cards stacked flush against each other - every .panel is margin: 0,
   so the gap belongs on the wrapper, same 20px the right column uses. */
.html-real-opc-page .panels-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.html-real-opc-page .panel {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}

/* --- the card. Every section is one, except billing, which the frame splits in two. --- */
.html-real-opc-page .section {
    margin: 0;
    padding: 25px 25px 30px;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

.html-real-opc-page .section.billing-address {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    border: none;
    background: none;
}

    /* replaced by the heading on each group below */
    .html-real-opc-page .section.billing-address > .section-title {
        display: none;
    }

    .html-real-opc-page .section.billing-address > .section-body {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

.html-real-opc-page .section-title,
.html-real-opc-page .section-title.title {
    position: static !important;
    margin: 0 0 18px;
    padding: 0 !important;
    border: none;
    background: none !important;
    cursor: default;
}

    .html-real-opc-page .section-title strong,
    .html-real-opc-page .section-title.title strong {
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-card);
        line-height: var(--ap-leading-heading);
        text-transform: none;
        color: var(--ap-blue);
    }

.html-real-opc-page .section-body {
    display: block;
}

/* --- field groups --------------------------------------------------------- */

.html-real-opc-page .revamp-opc-group {
    display: grid;
    column-gap: 16px;
    row-gap: 20px;
    margin: 0;
    padding: 25px 25px 30px;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

    /* the heading the frame gives each half of the billing step */
    .html-real-opc-page .revamp-opc-group:before {
        grid-column: 1 / -1;
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-card);
        line-height: var(--ap-leading-heading);
        color: var(--ap-blue);
    }

.html-real-opc-page .revamp-opc-group-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

    .html-real-opc-page .revamp-opc-group-contact:before {
        content: "Contact Information";
    }

.html-real-opc-page .revamp-opc-group-address {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

    .html-real-opc-page .revamp-opc-group-address:before {
        content: "Billing Address";
    }

/* the bootstrap columns inside the groups become plain grid cells */
.html-real-opc-page .revamp-opc-group > [class*="col-"] {
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    flex: none;
}

/* --- controls ------------------------------------------------------------- */

/* Each field is labelled above the control rather than from a placeholder, so the label is still
   there to check against once the field has been filled in. */
.html-real-opc-page .inputs > label {
    position: static !important;
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 6px;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-micro);
    line-height: 1.4;
    color: var(--ap-blue);
}

.html-real-opc-page .inputs {
    position: relative;
    margin: 0;
    padding: 0;
}

.light-theme .html-real-opc-page .inputs input[type="text"],
.light-theme .html-real-opc-page .inputs input[type="email"],
.light-theme .html-real-opc-page .inputs input[type="tel"],
.html-real-opc-page .inputs input[type="text"],
.html-real-opc-page .inputs input[type="email"],
.html-real-opc-page .inputs input[type="tel"] {
    width: 100% !important;
    height: var(--ap-control-height) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius) !important;
    background-color: var(--ap-page-bg) !important;
    box-shadow: none !important;
    font-family: var(--ap-font-body) !important;
    font-size: var(--ap-text-body) !important;
    line-height: var(--ap-leading-body) !important;
    color: var(--ap-blue) !important;
}

    .html-real-opc-page .inputs input::placeholder {
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
        color: var(--ap-placeholder);
        opacity: 1;
    }

/* the frame draws the selects as outlined boxes, not filled like the text fields */
.light-theme .html-real-opc-page .inputs select,
.html-real-opc-page .inputs select,
.html-real-opc-page .choose-address select {
    width: 100% !important;
    height: var(--ap-control-height) !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: var(--ap-border-width) solid var(--ap-border) !important;
    border-radius: var(--ap-radius) !important;
    background-color: var(--ap-white) !important;
    box-shadow: none !important;
    font-family: var(--ap-font-body) !important;
    font-size: var(--ap-text-body) !important;
    color: var(--ap-blue) !important;
}

.html-real-opc-page .choose-address {
    margin: 0 0 20px;
}

/* the asterisk and the inline errors the plugin places beside each field */
.html-real-opc-page .inputs > .required {
    position: absolute;
    right: -9px;
    color: var(--ap-danger);
}

.html-real-opc-page .message-error,
.html-real-opc-page .field-validation-error {
    display: block;
    margin-top: 4px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-fine);
    line-height: var(--ap-leading-fine);
    color: var(--ap-danger);
}

.html-real-opc-page .inputs input.has-error,
.html-real-opc-page .inputs select.has-error {
    border-color: var(--ap-danger) !important;
}

/* --- checkbox rows: ship to same address, pickup, shipping options -------- */
.html-real-opc-page .options,
.html-real-opc-page .pickup-in-store {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: none !important;
}

.html-real-opc-page .options label,
.html-real-opc-page .pickup-in-store label {
    margin: 0;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

/* --- shipping and payment method lists ------------------------------------ */
.html-real-opc-page .section.shipping-method li,
.html-real-opc-page .section.payment-method li {
    list-style: none;
}

.html-real-opc-page .section.shipping-method,
.html-real-opc-page .section.payment-method,
.html-real-opc-page .section.checkout-attributes {
    font-family: var(--ap-font-body);
    color: var(--ap-blue);
}

/* --- the summary card: three panels the frame draws as one ---------------- */
.html-real-opc-page .revamp-opc-summary {
    display: flex;
    flex-direction: column;
    padding: 25px 30px 30px;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

    .html-real-opc-page .revamp-opc-summary .section {
        padding: 0;
        border: none;
        border-radius: 0;
        background: none;
    }

.light-theme .html-real-opc-page #OnePageCheckoutSubmitButton,
.html-real-opc-page #OnePageCheckoutSubmitButton {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 20px;
    border: none;
    border-radius: var(--ap-radius);
    background-color: var(--ap-blue) !important;
    background-image: none !important;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white) !important;
    cursor: pointer;
}

    .html-real-opc-page #OnePageCheckoutSubmitButton:hover {
        background-color: var(--ap-navy) !important;
    }

.html-real-opc-page .complete-button {
    margin: 0;
    padding: 0 !important;
    border: none;
}

/* --- discount and gift card boxes ---------------------------------------- */
.html-real-opc-page .coupon-box .section-title,
.html-real-opc-page .giftcard-box .section-title {
    margin-bottom: 14px;
}

.html-real-opc-page .coupon-box .coupon-code,
.html-real-opc-page .giftcard-box .giftcard-code {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.light-theme .html-real-opc-page .coupon-box input[type="text"],
.html-real-opc-page .coupon-box input[type="text"],
.light-theme .html-real-opc-page .giftcard-box input[type="text"],
.html-real-opc-page .giftcard-box input[type="text"] {
    flex: 1 1 auto;
    width: auto !important;
    height: var(--ap-control-height) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: none !important;
    border-radius: var(--ap-radius) 0 0 var(--ap-radius) !important;
    background-color: var(--ap-page-bg) !important;
    font-family: var(--ap-font-body) !important;
    font-size: var(--ap-text-body) !important;
    color: var(--ap-blue) !important;
}

.light-theme .html-real-opc-page .coupon-box button,
.html-real-opc-page .coupon-box button,
.light-theme .html-real-opc-page .giftcard-box button,
.html-real-opc-page .giftcard-box button {
    flex: 0 0 89px;
    width: 89px;
    height: var(--ap-control-height);
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0 var(--ap-radius) var(--ap-radius) 0;
    background-color: var(--ap-header) !important;
    background-image: none !important;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white) !important;
    cursor: pointer;
}

/* --- the plugin draws its own bordered well inside every section; the card is the border now - */
.html-real-opc-page .section-body,
.html-real-opc-page .form-fields,
.html-real-opc-page .section .method-list,
.html-real-opc-page .attributes,
.html-real-opc-page .payment-methods {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* --- Order Summary: the frame prints a row per line rather than the plugin wide table ------ */
.html-real-opc-page .order-summary-content .table-wrapper,
.html-real-opc-page .order-summary-content .cart-wrapper {
    overflow: visible;
}

.html-real-opc-page .order-summary-content table.cart,
.html-real-opc-page .order-summary-content table {
    display: block;
    width: 100%;
    border: none;
    border-collapse: collapse;
}

    .html-real-opc-page .order-summary-content table thead {
        display: none;
    }

    .html-real-opc-page .order-summary-content table tbody {
        display: block;
        width: 100%;
    }

    .html-real-opc-page .order-summary-content table tbody tr {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr) auto;
        grid-template-areas:
            "picture product total"
            "picture sku     total"
            "picture qty     total";
        align-items: start;
        column-gap: 12px;
        width: 100%;
        padding: 14px 0;
        border: none;
        border-bottom: 1px solid var(--ap-border);
        background: none;
    }

    .html-real-opc-page .order-summary-content table tbody td {
        display: block;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        text-align: left;
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        color: var(--ap-blue);
    }

    .html-real-opc-page .order-summary-content td.product-picture {
        grid-area: picture;
    }

        .html-real-opc-page .order-summary-content td.product-picture img {
            width: 62px;
            height: auto;
            border-radius: var(--ap-radius);
        }

    .html-real-opc-page .order-summary-content td.product {
        grid-area: product;
        font-family: var(--ap-font-heading);
        font-weight: 600;
        line-height: 20px;
        text-transform: uppercase;
    }

    .html-real-opc-page .order-summary-content td.sku {
        grid-area: sku;
    }

    .html-real-opc-page .order-summary-content td.quantity {
        grid-area: qty;
    }

        .html-real-opc-page .order-summary-content td.quantity:before {
            content: "QTY: ";
        }

    .html-real-opc-page .order-summary-content td.subtotal,
    .html-real-opc-page .order-summary-content td.total {
        grid-area: total;
        align-self: center;
        font-family: var(--ap-font-heading);
        font-weight: 600;
        text-align: right;
        white-space: nowrap;
    }

    /* the frame has no per-line remove control in the summary; the cart owns that */
    .html-real-opc-page .order-summary-content td.remove-from-cart,
    .html-real-opc-page .order-summary-content td.vendor,
    .html-real-opc-page .order-summary-content td.unit-price {
        display: none;
    }

/* --- totals --------------------------------------------------------------- */
.html-real-opc-page .order-totals-panel .total-info,
.html-real-opc-page .order-totals-panel table {
    width: 100%;
}

.html-real-opc-page .order-totals-panel table td {
    padding: 6px 0;
    border: none;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

.html-real-opc-page .order-totals-panel table td.cart-total-right {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    text-align: right;
}

.html-real-opc-page .order-totals-panel {
    padding-top: 14px;
}

/* the rule the frame draws above Complete Order */
.html-real-opc-page .complete-order-panel {
    margin-top: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--ap-border);
}

.html-real-opc-page #AcceptTermsAndConditions {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: none !important;
    font-family: var(--ap-font-body) !important;
    font-size: var(--ap-text-fine) !important;
    line-height: var(--ap-leading-fine) !important;
    text-align: center;
    color: var(--ap-blue) !important;
}

/* --- payment method: the frame runs the three choices across one row ------- */
.html-real-opc-page .section.payment-method .method-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
}

.html-real-opc-page .section.payment-method .method-list > li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

    /* the plugin ships a small artwork per method; the frame has none */
    .html-real-opc-page .section.payment-method .method-list > li .payment-logo {
        display: none;
    }

    .html-real-opc-page .section.payment-method .method-list > li .payment-description {
        display: none;
    }

.html-real-opc-page .section.payment-method .payment-name,
.html-real-opc-page .section.payment-method .method-name label {
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: 19px;
    color: var(--ap-blue);
}

/* the card fields the processor renders under the choice */
.html-real-opc-page .section.payment-method .payment-info,
.html-real-opc-page #PayTraceNewCardEntry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 16px;
    margin-top: 18px;
}

.light-theme .html-real-opc-page .section.payment-method input[type="text"],
.html-real-opc-page .section.payment-method input[type="text"],
.light-theme .html-real-opc-page .section.payment-method select,
.html-real-opc-page .section.payment-method select {
    width: 100% !important;
    height: var(--ap-control-height) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius) !important;
    background-color: var(--ap-page-bg) !important;
    box-shadow: none !important;
    font-family: var(--ap-font-body) !important;
    font-size: var(--ap-text-body) !important;
    color: var(--ap-blue) !important;
}

/* --- shipping method rows ------------------------------------------------- */
.html-real-opc-page .section.shipping-method .method-list > li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ap-border);
}

    .html-real-opc-page .section.shipping-method .method-list > li:last-child {
        border-bottom: none;
    }

.html-real-opc-page .section.shipping-method .method-name {
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: 19px;
    color: var(--ap-blue);
}

.html-real-opc-page .section.shipping-method .method-description {
    margin-top: 4px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-fine);
    line-height: var(--ap-leading-fine);
    color: var(--ap-blue);
}

/* --- Additional Options (checkout attributes) ----------------------------- */
/* not a card in the frame - the cart collects these - but it is live functionality here, so it
   keeps the same card treatment as its neighbours rather than being dropped */
.html-real-opc-page .section.checkout-attributes .attributes ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.html-real-opc-page .section.checkout-attributes label,
.html-real-opc-page .section.checkout-attributes .attribute-label {
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

.light-theme .html-real-opc-page .section.checkout-attributes textarea,
.html-real-opc-page .section.checkout-attributes textarea {
    width: 100% !important;
    min-height: 110px;
    padding: 12px 14px !important;
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius) !important;
    background-color: var(--ap-page-bg) !important;
    font-family: var(--ap-font-body) !important;
    font-size: var(--ap-text-body) !important;
    color: var(--ap-blue) !important;
}

/* the plugin stylesheet also boxes the panel that wraps each section, which doubled every
   card border; the section is the card, the panel is only a wrapper */
.html-real-opc-page .panel {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* --- shipping method: the radio takes the first column, the name and its description share
       the second. Without this the description auto-places into a new row under the radio. --- */
.html-real-opc-page .section.shipping-method .method-list > li > * {
    grid-column: 2;
}

.html-real-opc-page .section.shipping-method .method-list > li > input[type="radio"],
.html-real-opc-page .section.shipping-method .method-list > li > .radio,
.html-real-opc-page .section.shipping-method .method-list > li > label > input[type="radio"] {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin: 3px 0 0;
}

/* --- payment method: the frame has no method artwork --- */
.html-real-opc-page .section.payment-method .method-list > li img {
    display: none !important;
}

/* --- order summary: the quantity box sits on the line, not under it --- */
.html-real-opc-page .order-summary-content td.quantity {
    display: flex;
    align-items: center;
    gap: 6px;
}

.light-theme .html-real-opc-page .order-summary-content td.quantity input,
.html-real-opc-page .order-summary-content td.quantity input {
    width: 46px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius) !important;
    background-color: var(--ap-page-bg) !important;
    font-family: var(--ap-font-body) !important;
    font-size: var(--ap-text-fine) !important;
    text-align: center;
    color: var(--ap-blue) !important;
}

/* the picture cell is fixed, so a long name can never ride over it */
.html-real-opc-page .order-summary-content td.product-picture {
    width: 62px;
    overflow: hidden;
}

.html-real-opc-page .order-summary-content td.product a,
.html-real-opc-page .order-summary-content td.product {
    color: var(--ap-blue);
    text-decoration: none;
}

/* the two billing groups are cards in their own right, so they need the gap the section uses */
.html-real-opc-page .section.billing-address .form-fields {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
}

/* --- payment method ------------------------------------------------------
   The processor renders its own label/input pairs here. Laying the container out as a grid
   put each label and each input in its own cell and ran them together, so the pairs keep their
   own flow and only the controls are restyled. */
.html-real-opc-page .section.payment-method .payment-info,
.html-real-opc-page #PayTraceNewCardEntry {
    display: block;
    margin-top: 18px;
}

    .html-real-opc-page #PayTraceNewCardEntry .inputs,
    .html-real-opc-page .section.payment-method .payment-info .inputs {
        margin-bottom: 14px;
    }

/* these labels name fields the script never reaches, so they stay visible and sit above */
.html-real-opc-page .section.payment-method label {
    display: block;
    margin: 0 0 4px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-fine);
    line-height: var(--ap-leading-fine);
    color: var(--ap-blue);
}

.html-real-opc-page .section.payment-method .method-list > li label {
    display: inline;
    margin: 0;
    font-size: var(--ap-text-body);
}

.light-theme .html-real-opc-page .section.payment-method input[type="text"],
.html-real-opc-page .section.payment-method input[type="text"],
.light-theme .html-real-opc-page .section.payment-method input[type="password"],
.html-real-opc-page .section.payment-method input[type="password"] {
    max-width: 405px;
}

.light-theme .html-real-opc-page .section.payment-method select,
.html-real-opc-page .section.payment-method select {
    width: auto !important;
    min-width: 150px;
}

/* the payment artwork the frame does not draw */
.html-real-opc-page .section.payment-method .method-list img,
.html-real-opc-page .section.payment-method .payment-logo,
.html-real-opc-page .section.payment-method li > img {
    display: none !important;
}

/* the three choices read across one row, each radio next to its name */
.html-real-opc-page .section.payment-method .method-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    margin: 0;
    padding: 0;
}

    .html-real-opc-page .section.payment-method .method-list > li {
        display: flex;
        align-items: baseline;
        gap: 8px;
        width: auto;
        margin: 0;
        padding: 0;
        float: none;
    }

/* ============================================================================
   Checkout corrections
   ============================================================================ */

/* the two step buttons belong to the phone frames only */
.html-real-opc-page .revamp-opc-next,
.html-real-opc-page .revamp-opc-back {
    display: none;
}

/* --- field grids ----------------------------------------------------------
   The frame runs Country / State / City across the top of the address card and the rest
   two-up. A six column track carries both: the top row takes two columns each, everything
   under it three. */
.html-real-opc-page .revamp-opc-group-address,
.html-real-opc-page .section.shipping-address .form-fields > .row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 20px;
    margin: 0;
}

    .html-real-opc-page .section.shipping-address .form-fields > .row > [class*="col-"],
    .html-real-opc-page .revamp-opc-group-address > [class*="col-"] {
        grid-column: span 3;
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 0;
        padding: 0;
        flex: none;
    }

        /* country, state and city, in source order, share the first row */
        .html-real-opc-page .section.shipping-address .form-fields > .row > [class*="col-"]:nth-child(5),
        .html-real-opc-page .section.shipping-address .form-fields > .row > [class*="col-"]:nth-child(6),
        .html-real-opc-page .section.shipping-address .form-fields > .row > [class*="col-"]:nth-child(7),
        .html-real-opc-page .revamp-opc-group-address > [class*="col-"]:nth-child(1),
        .html-real-opc-page .revamp-opc-group-address > [class*="col-"]:nth-child(2),
        .html-real-opc-page .revamp-opc-group-address > [class*="col-"]:nth-child(3) {
            grid-column: span 2;
        }

/* the heading sits above the whole grid */
.html-real-opc-page .revamp-opc-group-address:before,
.html-real-opc-page .revamp-opc-group-contact:before {
    grid-column: 1 / -1;
}

.html-real-opc-page .revamp-opc-group-contact {
    column-gap: 16px;
    row-gap: 20px;
}

/* --- the required marker: centred on its field, in the gap beside it -------
   The label sits above the control inside .inputs, so a plain 50% centres on label plus
   control and rides too high. Skip the label block, then take half the control.
   The marker hangs in the 16px column gap, which belongs to neither field, so it is kept
   near its own control rather than centred in the gap where it reads as the next one's. */
.html-real-opc-page .inputs > .required {
    top: calc(1.4 * var(--ap-text-micro) + 6px + var(--ap-control-height) / 2);
    right: -7px;
    transform: translateY(-50%);
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: 1;
    color: var(--ap-danger);
}

/* --- payment method -------------------------------------------------------
   The plugin lays this out as bootstrap columns of .method-name, each holding a logo and a
   .payment-details block; the frame shows three choices on one row, radio and name only. */
.html-real-opc-page .section.payment-method .method-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}

    .html-real-opc-page .section.payment-method .method-list > [class*="col-"] {
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 0;
        padding: 0;
        flex: none;
    }

.html-real-opc-page .section.payment-method .payment-logo,
.html-real-opc-page .section.payment-method .payment-description {
    display: none !important;
}

.html-real-opc-page .section.payment-method .payment-details {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .html-real-opc-page .section.payment-method .payment-details > input[type="radio"] {
        flex: 0 0 auto;
        margin: 0;
    }

    .html-real-opc-page .section.payment-method .payment-details > label {
        display: inline;
        margin: 0;
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
        line-height: 19px;
        color: var(--ap-blue);
    }

/* --- discount and gift card: both boxes use .coupon-code, so both are sized here --- */
.html-real-opc-page .coupon-box .coupon-code,
.html-real-opc-page .giftcard-box .coupon-code {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.light-theme .html-real-opc-page .coupon-box .coupon-code input[type="text"],
.html-real-opc-page .coupon-box .coupon-code input[type="text"],
.light-theme .html-real-opc-page .giftcard-box .coupon-code input[type="text"],
.html-real-opc-page .giftcard-box .coupon-code input[type="text"] {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: var(--ap-control-height) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--ap-border) !important;
    border-right: none !important;
    border-radius: var(--ap-radius) 0 0 var(--ap-radius) !important;
    background-color: var(--ap-page-bg) !important;
    box-shadow: none !important;
    min-height: var(--ap-control-height);
    align-self: stretch;
    box-sizing: border-box !important;
    font-family: var(--ap-font-body) !important;
    font-size: var(--ap-text-body) !important;
    color: var(--ap-blue) !important;
}

.light-theme .html-real-opc-page .coupon-box .coupon-code button,
.html-real-opc-page .coupon-box .coupon-code button,
.light-theme .html-real-opc-page .giftcard-box .coupon-code button,
.html-real-opc-page .giftcard-box .coupon-code button {
    flex: 0 0 89px;
    width: 89px !important;
    height: var(--ap-control-height) !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 var(--ap-radius) var(--ap-radius) 0 !important;
    background-color: var(--ap-header) !important;
    background-image: none !important;
    font-family: var(--ap-font-heading) !important;
    font-weight: 600 !important;
    font-size: var(--ap-text-button) !important;
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    color: var(--ap-white) !important;
    cursor: pointer;
}

.html-real-opc-page .coupon-box .hint,
.html-real-opc-page .giftcard-box .hint {
    margin: 0 0 10px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

/* --- one type family across the sections the theme still owns -------------- */
.html-real-opc-page .section.shipping-method,
.html-real-opc-page .section.shipping-method label,
.html-real-opc-page .section.shipping-method span,
.html-real-opc-page .section.shipping-method div,
.html-real-opc-page .section.checkout-attributes,
.html-real-opc-page .section.checkout-attributes label,
.html-real-opc-page .section.checkout-attributes span,
.html-real-opc-page .section.checkout-attributes div,
.html-real-opc-page .section.payment-method label,
.html-real-opc-page .section.payment-method span {
    font-family: var(--ap-font-body);
    color: var(--ap-blue);
}

.html-real-opc-page .section.shipping-method .method-name,
.html-real-opc-page .section.shipping-method .method-name label {
    font-size: var(--ap-text-body);
    font-weight: 500;
    line-height: 19px;
}

.html-real-opc-page .section.shipping-method .method-description {
    font-size: var(--ap-text-fine);
    line-height: var(--ap-leading-fine);
}

/* --- order summary rows ---------------------------------------------------
   Named areas on a table row do not hold, so the cells are placed on explicit lines. */
/* the plugin takes these cells out of flow for its own responsive table - absolute on the
   quantity and the price, a float on the picture - so they contributed nothing to the grid
   tracks and landed on top of one another */
.html-real-opc-page .order-summary-content table tbody td {
    position: static !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

.html-real-opc-page .order-summary-content table tbody tr {
    grid-template-areas: none;
    grid-template-columns: 62px minmax(0, 1fr) max-content;
    grid-template-rows: auto auto auto;
    align-items: start;
}

.html-real-opc-page .order-summary-content td.product-picture {
    grid-column: 1;
    grid-row: 1 / 4;
}

.html-real-opc-page .order-summary-content td.product {
    grid-column: 2;
    grid-row: 1;
}

.html-real-opc-page .order-summary-content td.sku {
    grid-column: 2;
    grid-row: 2;
}

.html-real-opc-page .order-summary-content td.quantity {
    grid-column: 2;
    grid-row: 3;
}

.html-real-opc-page .order-summary-content td.subtotal {
    grid-column: 3;
    grid-row: 1 / 4;
}

/* The theme positions the catalog card's buttons absolutely against the card - the same well
   the 153px bottom padding used to reserve. Left absolute, `width: 100%` resolved against the
   card instead of the action slot, so the button came out 301 wide inside a 241 slot and hung
   past both edges. */
.revamp-product-card .revamp-product-actions .ajax-cart-button-wrapper,
.revamp-product-card .revamp-product-actions .product-box-add-to-cart-button,
.revamp-product-card .revamp-product-actions .revamp-btn-outline-small,
.revamp-product-card .revamp-btn-outline-small,
.item-box .revamp-product-card .revamp-product-actions .ajax-cart-button-wrapper,
.item-box .revamp-product-card .revamp-product-actions .product-box-add-to-cart-button,
.item-box .revamp-product-card .revamp-btn-outline-small {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
}

/* --- checkout: the plugin leaves the text fields at their content height, so they came out 31
       against the 40 of every select beside them. min-height settles it whatever the plugin
       sheet asks for. --- */
.light-theme .html-real-opc-page .inputs input[type="text"],
.light-theme .html-real-opc-page .inputs input[type="email"],
.light-theme .html-real-opc-page .inputs input[type="tel"],
.html-real-opc-page .inputs input[type="text"],
.html-real-opc-page .inputs input[type="email"],
.html-real-opc-page .inputs input[type="tel"],
.html-real-opc-page .section.payment-method input[type="text"],
.html-real-opc-page .section.payment-method input[type="password"] {
    min-height: var(--ap-control-height);
    box-sizing: border-box !important;
}

.html-real-opc-page .inputs select,
.html-real-opc-page .choose-address select,
.html-real-opc-page .section.payment-method select {
    min-height: var(--ap-control-height);
    box-sizing: border-box !important;
}

/* --- the card entry the payment processor renders sits in a bootstrap column of its own,
       which put it in the right half of the card --- */
.html-real-opc-page .section.payment-method .payment-info .row,
.html-real-opc-page .section.payment-method .info .row {
    display: block !important;
    margin: 0 !important;
}

.html-real-opc-page .section.payment-method .payment-info [class*="col-"],
.html-real-opc-page .section.payment-method .info [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.html-real-opc-page #PayTraceNewCardEntry {
    width: 100%;
    margin: 18px 0 0 !important;
}

    /* the processor sets these to its own widths */
    .light-theme .html-real-opc-page #PayTraceNewCardEntry input[type="text"],
    .html-real-opc-page #PayTraceNewCardEntry input[type="text"] {
        width: 405px !important;
        max-width: 100% !important;
    }

    .light-theme .html-real-opc-page #PayTraceNewCardEntry select,
    .html-real-opc-page #PayTraceNewCardEntry select {
        width: 198px !important;
    }

/* ============================================================================
   Order details - the stock nop view, which never had a theme override and so kept the old
   skin. The content is unchanged; this carries it into the revamp language the rest of the
   account pages use: white cards on the page grey, navy headings, Archivo and Inter.
   ============================================================================ */

.html-order-details-page .page.order-details-page {
    max-width: 1201px;
    margin: 33px auto 80px;
    text-align: left;
}

/* --- title row: the heading with Print and PDF beside it --- */
.html-order-details-page .order-details-page > .page-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 24px;
    padding: 0;
    border: none;
    background: none;
}

.html-order-details-page .order-details-page > .page-title h1 {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border: none;
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-title);
    line-height: var(--ap-leading-heading);
    text-align: left;
    text-transform: none;
    color: var(--ap-blue);
}

    .html-order-details-page .order-details-page > .page-title h1:before,
    .html-order-details-page .order-details-page > .page-title h1:after {
        content: none !important;
    }

/* --- cards --- */
.html-order-details-page .order-overview,
.html-order-details-page .billing-info,
.html-order-details-page .shipping-info,
.html-order-details-page .order-details-area .section {
    padding: 24px 28px;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    background-color: var(--ap-white);
}

.html-order-details-page .order-overview {
    margin: 0 0 24px;
}

.html-order-details-page .order-number strong {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-card);
    line-height: 28px;
    color: var(--ap-blue);
}

.html-order-details-page .order-overview-content {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 36px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

    .html-order-details-page .order-overview-content li {
        margin: 0;
        padding: 0;
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        color: var(--ap-blue);
    }

        .html-order-details-page .order-overview-content li strong {
            font-family: var(--ap-font-heading);
            font-weight: 600;
        }

/* --- the two address blocks sit side by side --- */
/* the theme floats this wrap at a fixed width, which squeezed both address cards */
.html-order-details-page .billing-info-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 24px;
    padding: 0 !important;
    float: none !important;
}

    .html-order-details-page .billing-info-wrap > div,
    .html-order-details-page .billing-info,
    .html-order-details-page .shipping-info {
        width: 100% !important;
        max-width: none !important;
        float: none !important;
        margin: 0;
    }

/* the theme centres these and sizes them in a narrow well of its own */
.html-order-details-page .order-details-area,
.html-order-details-page .page-body > .section,
.html-order-details-page .actions {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    text-align: left;
}

.html-order-details-page .actions {
    justify-content: flex-start;
}

    .html-order-details-page .billing-info-wrap > div {
        float: none;
        width: auto;
        margin: 0;
    }

.html-order-details-page .billing-info .title strong,
.html-order-details-page .shipping-info .title strong,
.html-order-details-page .order-details-area .title strong,
.html-order-details-page .section .title strong {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-card);
    line-height: 28px;
    text-transform: none;
    color: var(--ap-blue);
}

.html-order-details-page .title {
    margin: 0 0 14px;
    padding: 0;
    border: none;
    background: none;
}

.html-order-details-page .info-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.html-order-details-page .info-list li,
.html-order-details-page .payment-method-info,
.html-order-details-page .shipping-method-info {
    margin: 0 0 4px;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

.html-order-details-page .info-list .name {
    font-family: var(--ap-font-heading);
    font-weight: 600;
}

/* --- tables: the navy head and bordered rows the portal uses --- */
.html-order-details-page .data-table,
.html-order-details-page table.cart {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border: var(--ap-border-width) solid var(--ap-border);
    border-radius: var(--ap-radius);
    overflow: hidden;
    background-color: var(--ap-white);
}

    .html-order-details-page .data-table thead th,
    .html-order-details-page table.cart thead th {
        padding: 14px 16px;
        border: none;
        background-color: var(--ap-navy);
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        text-align: left;
        text-transform: none;
        color: var(--ap-white);
    }

    .html-order-details-page .data-table tbody td,
    .html-order-details-page table.cart tbody td {
        padding: 14px 16px;
        border: none;
        border-top: 1px solid var(--ap-border);
        background: none;
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        text-align: left;
        color: var(--ap-blue);
    }

    .html-order-details-page .data-table a,
    .html-order-details-page table.cart a {
        color: var(--ap-blue);
        text-decoration: none;
    }

        .html-order-details-page .data-table a:hover,
        .html-order-details-page table.cart a:hover {
            text-decoration: underline;
        }

    .html-order-details-page .product-name,
    .html-order-details-page td.product .product-name {
        font-family: var(--ap-font-heading);
        font-weight: 600;
        text-transform: uppercase;
    }

/* --- totals --- */
.html-order-details-page .cart-total {
    width: 100%;
    margin: 20px 0 0;
    border: none;
}

.html-order-details-page .cart-total td,
.html-order-details-page .cart-total-left,
.html-order-details-page .cart-total-right {
    padding: 6px 0;
    border: none;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

.html-order-details-page .cart-total-right {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    text-align: right;
}

.html-order-details-page .order-total strong,
.html-order-details-page .cart-total .order-total {
    font-family: var(--ap-font-heading);
    font-weight: 600;
    font-size: var(--ap-text-link);
    color: var(--ap-blue);
}

/* --- buttons --- */
.light-theme .html-order-details-page .button-1,
.html-order-details-page .button-1,
.light-theme .html-order-details-page .button-2,
.html-order-details-page .button-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ap-control-height);
    margin: 0;
    padding: 0 20px;
    border-radius: var(--ap-radius);
    font-family: var(--ap-font-heading);
    font-weight: 700;
    font-size: var(--ap-text-button);
    letter-spacing: var(--ap-tracking-button);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.light-theme .html-order-details-page .button-1,
.html-order-details-page .button-1 {
    border: none;
    background-color: var(--ap-blue) !important;
    background-image: none !important;
    color: var(--ap-white) !important;
}

    .html-order-details-page .button-1:hover {
        background-color: var(--ap-navy) !important;
    }

.light-theme .html-order-details-page .button-2,
.html-order-details-page .button-2 {
    border: var(--ap-border-width) solid var(--ap-blue);
    background-color: var(--ap-white) !important;
    background-image: none !important;
    color: var(--ap-blue) !important;
}

    .html-order-details-page .button-2:hover {
        background-color: var(--ap-blue) !important;
        color: var(--ap-white) !important;
    }

.html-order-details-page .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    border: none;
}

/* --- sections between the cards --- */
.html-order-details-page .section {
    margin: 0 0 24px;
}

.html-order-details-page .page-body {
    padding: 0;
}

/* --- Order details corrections ------------------------------------------- */

/* the theme positions Print and PDF Invoice absolutely, which dropped them out of the title
   row and on top of the order card */
.html-order-details-page .order-details-page > .page-title .button-2 {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 auto;
}

/* The theme lays the four info blocks out as a table of two cells, so the two columns kept
   their own heights and the cards inside them never lined up. Flattening the two wrappers
   makes Billing, Payment, Pickup and Shipping siblings in one grid, so every card starts on
   the same line. */
.html-order-details-page .order-details-area {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    width: 100% !important;
    margin: 0 0 16px;
}

    .html-order-details-page .billing-info-wrap,
    .html-order-details-page .shipping-info-wrap {
        display: contents !important;
    }

    .html-order-details-page .order-details-area .billing-info-wrap > *,
    .html-order-details-page .order-details-area .shipping-info-wrap > * {
        width: auto !important;
        max-width: none !important;
        min-width: 0;
        margin: 0 !important;
        padding: 20px 24px;
        float: none !important;
        border: var(--ap-border-width) solid var(--ap-border);
        border-radius: var(--ap-radius);
        background-color: var(--ap-white);
    }

/* --- the sections below are plain blocks, not cards --- */
.html-order-details-page .page-body > .section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px;
    padding: 0 !important;
    border: none;
    background: none;
    text-align: left;
}

.html-order-details-page .page-body > .section > .title {
    margin: 0 0 12px;
}

/* the tax note and the checkout attributes read as one block under the table, not a panel
   of its own floating in the middle of the page */
.html-order-details-page .tax-shipping-info,
.html-order-details-page .selected-checkout-attributes {
    width: 100% !important;
    max-width: none !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-align: left;
    font-family: var(--ap-font-body);
    font-size: var(--ap-text-body);
    line-height: var(--ap-leading-body);
    color: var(--ap-blue);
}

.html-order-details-page .section.options {
    margin-top: -16px;
}

/* --- totals and the buttons under them --- */
.html-order-details-page .section.totals {
    padding: 0 !important;
}

.html-order-details-page .total-info {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.html-order-details-page .total-info .cart-total {
    width: auto;
    min-width: 320px;
    margin: 0 0 0 auto;
}

/* the theme clips this row, so a button that did not fit simply vanished instead of wrapping */
.html-order-details-page .actions {
    width: 100% !important;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    overflow: visible !important;
    margin: 16px 0 0 !important;
}

    /* the stock re-order button stretches the width of its row */
    .light-theme .html-order-details-page .actions .button-1,
    .html-order-details-page .actions .button-1,
    .light-theme .html-order-details-page .actions .button-2,
    .html-order-details-page .actions .button-2 {
        width: auto !important;
        min-width: 0;
        flex: 0 1 auto;
        padding: 0 24px;
    }

/* --- tighter overall --- */
.html-order-details-page .order-overview {
    margin: 0 0 16px;
    padding: 20px 24px;
}

.html-order-details-page .order-overview-content {
    margin-top: 8px;
}

/* the theme centres these headings and hangs a skewed accent bar off them */
.html-order-details-page .page-title:before,
.html-order-details-page .page-title:after,
.html-order-details-page .page-body > .section > .title:before,
.html-order-details-page .page-body > .section > .title:after,
.html-order-details-page .order-overview .title:before,
.html-order-details-page .order-overview .title:after {
    content: none !important;
    display: none !important;
}

.html-order-details-page .order-overview,
.html-order-details-page .order-number,
.html-order-details-page .order-overview-content,
.html-order-details-page .page-body > .section > .title,
.html-order-details-page .billing-info,
.html-order-details-page .shipping-info {
    text-align: left !important;
}

.html-order-details-page .page-body > .section > .title {
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

    .html-order-details-page .page-body > .section > .title strong {
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-card);
        line-height: 28px;
        text-transform: none;
        color: var(--ap-blue);
    }

/* the totals sat in an empty bordered panel that ran the width of the page */
.html-order-details-page .section.totals,
.html-order-details-page .total-info,
.html-order-details-page .section.totals > * {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}


/* --- Tablet header, 768-1200px ---
   Erika's frames cover desktop (1201px and up) and mobile (767px and down), so this range
   was left on the old theme's #1488cc - see the note on the mobile header rule below. The
   theme's responsive header appears from 1200px down, so without this a tablet showed a
   lighter blue than both neighbouring widths. Scoped to exactly the undesigned range so the
   designed mobile rules are untouched.

   Both selectors carry body. for specificity, the same reason as the mobile rule: they have to
   beat _Root.Head.cshtml's inline .light-theme .responsive-nav-wrapper (0,2,0) and mobile.css's
   .light-theme .header-menu .close-menu (0,3,0), both #1488cc, regardless of source order. */
@media (min-width: 768px) and (max-width: 1200px) {
    body.light-theme .responsive-nav-wrapper {
        background-color: var(--ap-header);
        box-shadow: none;
    }

    /* the slide-out menu's top bar, so opening the menu doesn't show a second blue */
    body.light-theme .header-menu .close-menu {
        background-color: var(--ap-header);
    }
}

@media (max-width: 767px) {

    /* --- Sticky call CTA ---
       The frame opens every page with a navy bar carrying the phone number. The
       element already exists in the header and is only hidden below 1435px, so this
       repositions it rather than adding markup. Its ancestors are zero-height but
       not display:none, so a fixed child still paints. */
    .revamp-header-expert {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        /* 36 not 34: the nav bar sits on top at top:34px and covers the extra 2px, so a
           fractional device-pixel ratio cannot round the two edges apart and leave a
           hairline between them. Visible height stays 34. */
        height: 36px;
        padding: 0 var(--ap-gutter-mobile-tight);
        box-sizing: border-box;
        background-color: var(--ap-navy);
        font-family: var(--ap-font-heading);
        font-size: var(--ap-text-fine);
        line-height: 1;
        color: var(--ap-white);
        text-decoration: none;
    }

    /* room for the fixed bar. Set on top rather than margin-top: the theme makes this
       element position:fixed itself, and a margin on a fixed box is easy for theme JS
       to reset, which opens a gap the page content shows through. */
    .responsive-nav-wrapper-parent {
        top: 34px;
        margin-top: 0;
    }

    /* the offsets below are built on a 35 strip, so it stays one line here whatever the message
       says - the impersonation notice wraps to three at this width otherwise */
    .admin-header-links,
    .light-theme .admin-header-links {
        height: 35px;
        min-height: 0;
        padding: 0 var(--ap-gutter-mobile-tight);
        gap: 0 12px;
        flex-wrap: nowrap;
        /* centred while it fits, pinned left once it overflows - a plain `center` puts the start
           of a long message out of reach of the scroll */
        justify-content: safe center;
        white-space: nowrap;
        overflow-x: auto;
        font-size: var(--ap-text-badge-lg);
    }

        /* the notice names the customer, so its length is whatever that email happens to be -
           long enough that the link ending the session sat past the right edge, reachable only
           by swiping a 35 tall bar sideways. the message truncates instead, so the way out is
           always on screen. */
        .admin-header-links:has(.impersonate) {
            justify-content: flex-start;
            overflow-x: hidden;
        }

        .admin-header-links .impersonate {
            flex-wrap: nowrap;
            gap: 0 8px;
            width: 100%;
            min-width: 0;
        }

            .admin-header-links .impersonate > span {
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .admin-header-links .impersonate > .finish-impersonation {
                flex: 0 0 auto;
            }

    /* an admin session carries the staff strip above everything, so the expert bar, the nav and
       the page each start 35 lower. mobile.css already shifts the nav this way; the other two it
       knows nothing about. */
    .admin-header-links ~ .header .revamp-header-expert {
        top: 35px;
    }

    .admin-header-links ~ .responsive-nav-wrapper-parent {
        top: 69px;
    }

    .master-wrapper-page:has(> .admin-header-links) {
        padding-top: 69px;
    }

    /* the theme reserves room for its own nav but knows nothing about the bar above it,
       so the page started under the header and clipped the first heading */
    .master-wrapper-page {
        padding-top: 34px;
    }

    /* and the reservation itself is hard-coded to the theme's own bar height, so it has
       to follow the taller one */
    .header {
        margin-top: 65px;
    }

    /* mobile.css raises this to 95 for the strip, but the page padding above already carries
       both the strip and the expert bar - this only has to clear the nav */
    .admin-header-links ~ .header {
        margin-top: 65px;
    }

    /* the frame's header blue. _Root.Head.cshtml carries an inline
       .light-theme .responsive-nav-wrapper { background-color: #1488cc } inside its own
       max-width:1200px block - inline styles come after the bundle, so an equal
       selector loses. body. takes it to (0,2,1) rather than reaching for !important,
       and leaves 768-1200px on the theme's colour since that width is not designed. */
    body.light-theme .responsive-nav-wrapper {
        background-color: var(--ap-header);
        /* the theme's shadow is 0 0 14px with no offset, so it bleeds upward and tints
           the bottom of the navy bar into a visible seam. The frame has no shadow on
           this bar, and any blur larger than its offset still bleeds, so it comes off. */
        box-shadow: none;
    }

    /* The bar lays its four children out with floats, and two float:right, so DOM order
       puts search furthest right. The frame has search then cart, so the row becomes a
       flex line and orders them explicitly - floats are ignored on flex items. */
    body.light-theme .responsive-nav-wrapper {
        display: flex;
        align-items: center;
        /* every mobile frame draws this bar the same height; the theme's own is shorter */
        min-height: 65px;
    }

        body.light-theme .responsive-nav-wrapper > .menu-title {
            order: 1;
        }

        body.light-theme .responsive-nav-wrapper > .mobile-logo {
            order: 2;
            margin-right: auto;
        }

        body.light-theme .responsive-nav-wrapper > .search-wrap {
            order: 3;
        }

        body.light-theme .responsive-nav-wrapper > .shopping-cart-link {
            order: 4;
        }

    /* --- Mobile menu drawer ---
       The theme slides a 320px white panel in from the left. The design covers the whole screen
       in navy, with the close control alone at the top right and the items set large. */
    body.light-theme .header-menu {
        width: 100%;
        background-color: var(--ap-navy);
        transform: translate(-100%);
        overflow-y: auto;
    }

        body.light-theme .header-menu.open {
            transform: translate(0);
        }

    /* the header bar in the drawer becomes just the close control */
    body.light-theme .header-menu .close-menu {
        height: 104px;
        padding: 0;
        background-color: transparent;
    }

        /* the logo is in the bar behind the drawer already */
        body.light-theme .header-menu .close-menu .mobile-logo {
            display: none;
        }

        /* the theme draws its own glyph on :before and labels the span "Close" */
        body.light-theme .header-menu .close-menu:before {
            display: none;
        }

        body.light-theme .header-menu .close-menu > span {
            top: 40px;
            right: var(--ap-gutter-mobile);
            left: auto;
            width: 28px;
            height: 28px;
            font-size: 0;
            color: var(--ap-blue-light);
        }

            /* the theme already draws a cross here in its icon font - it only needed sizing.
               A second one on :after put two crosses on top of each other. */
            body.light-theme .header-menu .close-menu > span:before {
                font-size: 22px;
                line-height: 28px;
                color: var(--ap-blue-light);
            }

    /* --- Drawer items --- */
    body.light-theme .header-menu > ul li {
        background: transparent;
    }

    body.light-theme .header-menu > ul li > a,
    body.light-theme .header-menu > ul li > span {
        /* 20px keeps the longest item, "Pilot Supplies & Education", on one line the way the
           design has it - at 24 it wrapped and pushed the rows apart */
        padding: 11px var(--ap-gutter-mobile) !important;
        font-family: var(--ap-font-heading);
        font-weight: 400;
        font-size: 20px;
        line-height: 24px;
        text-transform: uppercase;
        color: var(--ap-white);
    }

    /* The label and its arrow share the row. The arrow column already supplies the right gutter,
       so the label does not need its own - without this "Pilot Supplies & Education" is 9px too
       wide and wraps, where the design keeps it on one line. */
    body.light-theme .header-menu > ul li > .with-subcategories {
        width: calc(100% - 50px);
        padding-right: 0 !important;
    }

    /* the arrow shares the row with the label, so it centres against it rather than floating in
       a 50px square of its own */
    body.light-theme .header-menu .plus-button {
        display: flex;
        align-items: center;
        justify-content: center;
        /* the label beside it is calc(100% - 50px), so this has to stay exactly 50 or the two
           stop fitting on one line and the arrow drops below its own row */
        width: 50px;
        /* matches the row the label makes, so the arrow lands on its centre line */
        height: 46px;
    }

        /* The theme's own glyph is a media-style skip icon and the heading face's arrow sits low
           in its em box, so neither lines up. This is the design's arrow drawn instead. */
        body.light-theme .header-menu .plus-button:before {
            content: "";
            position: static;
            display: block;
            width: 22px;
            height: 14px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 7h16' stroke='%231588cd' stroke-width='2'/%3E%3Cpath d='M14 1.5l8 5.5-8 5.5z' fill='%231588cd'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
        }

    .revamp-drawer-foot {
        display: block;
        margin-top: 32px;
        padding: 0 var(--ap-gutter-mobile) 32px;
    }

        .revamp-drawer-cta {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            margin-bottom: 12px;
            border-radius: var(--ap-radius);
            background-color: var(--ap-white);
            font-family: var(--ap-font-heading);
            font-weight: 600;
            font-size: var(--ap-text-button);
            letter-spacing: var(--ap-tracking-button);
            text-transform: uppercase;
            color: var(--ap-blue);
            text-decoration: none;
        }

        /* same treatment as the footer row: drop the theme's sprite button and let the icon
           font carry the mark */
        .revamp-drawer-auth {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            margin-bottom: 24px;
            border: var(--ap-border-width) solid var(--ap-white);
            border-radius: var(--ap-radius);
            background-color: transparent;
            font-family: var(--ap-font-heading);
            font-weight: 600;
            font-size: var(--ap-text-button);
            letter-spacing: var(--ap-tracking-button);
            text-transform: uppercase;
            color: var(--ap-white);
            text-decoration: none;
        }

        .revamp-drawer-foot .social-sharing {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 28px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

            .revamp-drawer-foot .social-sharing:before,
            .revamp-drawer-foot .social-sharing:after {
                display: none;
            }

            .revamp-drawer-foot .social-sharing li {
                margin: 0;
            }

        .revamp-drawer-foot .social-sharing a,
        .light-theme .revamp-drawer-foot .social-sharing a,
        .revamp-drawer-foot .social-sharing a:hover,
        .light-theme .revamp-drawer-foot .social-sharing a:hover {
            width: 28px;
            height: 28px;
            background: transparent;
            border: none;
        }

            .revamp-drawer-foot .social-sharing a:before {
                width: 28px;
                height: 28px;
                line-height: 28px;
                font-size: 24px;
                color: var(--ap-white);
            }

    /* --- Drill-down panels ---
       Tapping an arrow slides a submenu over the drawer. The theme draws that panel as a 320px
       white sheet, so it needs the same full-screen navy treatment; the items inside already pick
       up the list styling above. */
    body.light-theme .header-menu .sublist-wrap {
        /* the theme's script writes the drawer's old 313px width onto this inline, so the
           stylesheet cannot reach it without !important */
        width: 100% !important;
        /* The drawer reserves this much for the close control, so its list starts there. Without
           the same reserve here the panel began at the top of the screen and the whole list
           jumped up as you drilled in. Matches .close-menu's height. */
        padding-top: 104px;
        background: var(--ap-navy) !important;
        box-shadow: none;
        transform: translate(-100%);
        overflow-y: auto;
    }

        body.light-theme .header-menu .sublist-wrap.active {
            transform: translate(0);
        }

    /* the row back to the parent menu, with the forward arrow reversed */
    body.light-theme .header-menu ul li.back-button {
        background: transparent;
    }

    body.light-theme .header-menu .back-button span {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px var(--ap-gutter-mobile) !important;
        font-family: var(--ap-font-heading);
        font-weight: 400;
        font-size: 20px;
        line-height: 24px;
        text-align: left;
        text-transform: uppercase;
        color: var(--ap-blue-light);
    }

        body.light-theme .header-menu .back-button span:before {
            content: "";
            display: block;
            flex: 0 0 auto;
            width: 22px;
            height: 14px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M22 7H6' stroke='%231588cd' stroke-width='2'/%3E%3Cpath d='M8 1.5L0 7l8 5.5z' fill='%231588cd'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
        }

    /* Saved keeps its place in the list; the account actions move to the foot as buttons, so the
       list's own copies of them go. */
    body.light-theme .header-menu .mobile-menu-items .revamp-header-link:not([href*="wishlist"]) {
        display: none;
    }

        /* the design shows "Saved" alone - the span stays for AjaxCart, which writes the count
           into it by selector */
        body.light-theme .header-menu .mobile-menu-items .wishlist-qty {
            display: none;
        }

    body.light-theme .header-menu .mobile-menu-items .revamp-header-link {
        padding: 11px var(--ap-gutter-mobile);
        border: none;
        font-family: var(--ap-font-heading);
        font-weight: 400;
        font-size: 20px;
        line-height: 24px;
        text-transform: uppercase;
        color: var(--ap-white);
    }




    /* --- Best Sellers ---
       The frame runs a 474px row of 232x390 cards inside the 402 frame, so it scrolls
       sideways rather than wrapping to one card per row. */
    .revamp-bestsellers-grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

        .revamp-bestsellers-grid > * {
            flex: 0 0 232px;
            max-width: 232px;
            scroll-snap-align: start;
        }

    /* --- Benefits ---
       The frame shows one card at a time on a scroll-snap row with dots underneath,
       rather than the three stacked cards a narrow column produces. */
    .revamp-benefits {
        border-radius: 9px 9px 0 0;
    }

    /* the frame runs title, copy, then button. Desktop pairs the title and button in
       one block beside the copy, so that block is dissolved and the three ordered. */
    .revamp-benefits-header {
        flex-direction: column;
        gap: 0;
    }

        .revamp-benefits-header > div {
            display: contents;
        }

    .theme-v2 .revamp-benefits h2.revamp-benefits-title {
        order: 1;
        margin: 0 0 12px;
    }

    .revamp-benefits-intro {
        order: 2;
        margin: 0 0 20px;
    }

    .revamp-benefits-header .revamp-btn-outline-white {
        order: 3;
        align-self: center;
    }

    .revamp-benefits-cards {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .revamp-benefits-cards::-webkit-scrollbar {
            display: none;
        }

    .revamp-benefit-card {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: start;
        box-sizing: border-box;
        background-color: var(--ap-page-bg);
        border-radius: var(--ap-radius);
    }

    .revamp-benefits-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 13px;
        margin-top: 20px;
    }

    .revamp-benefits-dot {
        width: 12px;
        height: 12px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background-color: var(--ap-white);
        opacity: 0.45;
        cursor: pointer;
    }

        .revamp-benefits-dot.is-active {
            width: 15px;
            height: 15px;
            opacity: 1;
        }

    /* --- Title band (Engines, and the other banded topics) ---
       The frame puts the page name first and the supporting line under it; desktop has
       them the other way round. The frame's six sections leave 98px to share between the
       four gaps, so every gap on this page is the same 24. */
    .revamp-title-band {
        height: auto;
        padding: 24px var(--ap-gutter-mobile-tight) 24px;
        margin-bottom: 24px;
    }

    .revamp-title-band-copy {
        display: flex;
        flex-direction: column;
    }

    /* The supporting line sits above the name, as the markup already has it, and the name drops
       to the frame's size - it was wearing the desktop one, which put half a line of empty space
       above the cap. */
    .revamp-title-band-eyebrow {
        margin: 0 0 15px;
        line-height: 21px;
    }

    .theme-v2 .revamp-title-band h1.revamp-band-title,
    .theme-v2.revamp-title-band h1.revamp-band-title {
        font-size: 36px !important;
        line-height: 36px !important;
    }

    /* Engines is the one frame that reverses this: the page name first, its supporting line
       under it, and a size down. */
    .html-revamp-engines-page .revamp-title-band-eyebrow {
        order: 2;
        margin: 15px 0 0;
    }

    .html-revamp-engines-page.theme-v2 .revamp-title-band h1.revamp-band-title,
    .html-revamp-engines-page .theme-v2 .revamp-title-band h1.revamp-band-title,
    .html-revamp-engines-page .theme-v2.revamp-title-band h1.revamp-band-title {
        order: 1;
        font-size: 32px !important;
        line-height: 36px !important;
    }

    /* --- Header search overlay ---
       The theme drops a fixed white band over the header, pads it 40 left / 50 right and parks
       its legacy submit at right:-36px, outside that padding, with a second magnifier on the
       form's :before. The revamp already replaced that control with .revamp-search-field, so the
       band just needs the field laid out on the page gutter and the theme's leftovers hidden. */
    .store-search-box {
        padding: 12px var(--ap-gutter-mobile);
        box-shadow: 0 8px 24px rgba(0, 26, 44, 0.18);
    }

        /* the theme's duplicate glyph and its legacy submit, both superseded by the field below */
        .store-search-box form:before,
        .store-search-box .search-box-button {
            display: none;
            content: none;
        }

        #small-search-box-form .revamp-search-field {
            display: flex;
            align-items: stretch;
            width: 100%;
            margin: 0;
        }

        #small-search-box-form .revamp-search-field input#small-searchterms {
            flex: 1 1 auto;
            width: auto;
            height: 48px;
            margin: 0;
            padding: 0 14px;
            border: var(--ap-border-width) solid var(--ap-border);
            border-right: none;
            border-radius: var(--ap-radius) 0 0 var(--ap-radius);
            background-color: var(--ap-white);
            font-size: 16px;
            text-align: left;
        }

        /* the same white field and blue key the page's own search bar uses */
        #small-search-box-form .revamp-search-submit {
            flex: 0 0 auto;
            width: 48px;
            height: 48px;
            margin: 0;
            border: none;
            border-radius: 0 var(--ap-radius) var(--ap-radius) 0;
            background-color: var(--ap-header);
            color: var(--ap-white);
        }

        #small-search-box-form .revamp-search-multiline {
            display: block;
            margin-top: 10px;
            text-align: left;
        }

        /* The suggestion and recent-search list is appended into this box and the script gives it
           position:relative with top:-15px, which lifted it over the multi-line link. On a
           relatively positioned element left is an offset from where it already sits, not an
           anchor, so it has to stay 0 or the list slides right of the field. */
        .store-search-box .ui-autocomplete {
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            box-sizing: border-box;
            text-align: left;
        }

            /* the band centres its text, which left each row indented by its own length */
            .store-search-box .ui-autocomplete .ui-menu-item a {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 12px 14px;
                text-align: left;
            }

    /* --- Search results ---
       The frame gives this page a 156 band with the heading and the search field alone, then the
       same 368x237 card the multi-line results use, then the pager. */
    .revamp-search-hero {
        padding: 24px var(--ap-gutter-mobile);
    }

    .theme-v2 .revamp-search-hero h1.revamp-search-heading,
    .revamp-search-hero h1.revamp-search-heading {
        /* the desktop rule sets every one of these with !important */
        margin: 0 0 20px !important;
        font-size: 36px !important;
        line-height: 36px !important;
    }

    /* the frame's band carries the field alone - the call bar at the top of every page already
       offers the phone number */
    .revamp-search-hero .revamp-search-expert {
        display: none;
    }

    /* the frame goes straight from the band to the results; the category suggestions are not on
       it, and for a broad term they run longer than the results themselves */
    .revamp-search-suggestions {
        display: none;
    }

    /* the search table's own card rule is more specific than the shared one, so the phone card
       has to be restated here */
    .revamp-search-table .revamp-product-card {
        min-height: 237px;
        padding: 16px;
    }

    /* Pager - DataTables draws its own list; the frame wants the same row as the catalog pager,
       numbers with the previous and next as squares at the ends. */
    .dataTables_wrapper ul.pagination {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        /* the row has to hold both arrows, five numbers, the ellipsis and the last page inside
           the phone's width, so the spacing comes in from the desktop figure */
        gap: 14px;
        margin: 24px 0 0;
    }

        /* the frame reduces previous and next to squares carrying just the arrow. The list item
           carries its own box as well as the link, so both have to come down or the square sits
           inside a second, wider outline. */
        .dataTables_wrapper ul.pagination li.paginate_button.previous,
        .dataTables_wrapper ul.pagination li.paginate_button.next {
            width: 32px;
            min-width: 32px;
            border: none;
            background: none;
        }

        .dataTables_wrapper ul.pagination li.paginate_button.previous a.page-link,
        .dataTables_wrapper ul.pagination li.paginate_button.next a.page-link {
            width: 32px;
            min-width: 32px;
            height: 32px;
            padding: 0;
            border: var(--ap-border-width) solid var(--ap-blue);
            border-radius: var(--ap-radius);
        }

            .dataTables_wrapper ul.pagination .revamp-pg-label {
                display: none;
            }

    /* --- Multi-line search ---
       The frame gives this band the name alone, no call button, and runs the panels wider than
       the page gutter. */
    .html-revamp-multiline-page .revamp-band-cta {
        display: none;
    }

    .revamp-mls {
        margin-left: calc(var(--ap-gutter-mobile-tight) - var(--ap-gutter));
        margin-right: calc(var(--ap-gutter-mobile-tight) - var(--ap-gutter));
    }

    .theme-v2.revamp-mls h2.revamp-mls-panel-title {
        font-size: 26px;
        line-height: 36px;
    }

    .theme-v2.revamp-mls h2.revamp-mls-results-title {
        font-size: 32px;
        line-height: 36px;
    }

    .theme-v2 button.revamp-mls-add {
        min-width: 138px;
        height: 44px;
    }

    /* --- Results ---
       The frame draws a result at 368x237: the logo in a narrow column on the left, everything
       else beside it, and the button on the card's bottom edge. Desktop parks the logo absolutely
       in a 229px inset and pins the button to the card corner; here the card becomes two columns
       and the copy a flex stack, so the button can sit at the foot whether or not the product
       carries a core charge - without that it rode up under the price and left the logo looking
       high against a short column. */
    .revamp-mls-card {
        display: grid;
        grid-template-columns: 109px minmax(0, 1fr);
        column-gap: 14px;
        align-items: stretch;
        min-height: 237px;
        padding: 16px;
    }

        .revamp-mls-card-image {
            position: static;
            grid-column: 1;
            align-self: center;
            width: 109px;
            height: auto;
            max-height: 109px;
        }

        .revamp-mls-card-body {
            grid-column: 2;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

            /* the price rides beside the badge on desktop; the frame puts it under the part
               number, so the row dissolves and the pieces order themselves down the stack */
            .revamp-mls-card-head {
                display: contents;
            }

            .revamp-mls-card .revamp-product-badge {
                order: 1;
                align-self: flex-start;
                display: inline-flex;
                align-items: center;
                min-width: 51px;
                height: 20px;
                padding: 0 8px;
                margin: 0;
            }

    .theme-v2.revamp-mls h3.revamp-mls-card-title {
        order: 2;
        margin: 8px 0 0;
        font-size: 16px;
        line-height: 18px;
    }

    .revamp-mls-card-sku {
        order: 3;
        max-width: 143px;
        font-size: 16px;
        line-height: 18px;
    }

    .revamp-mls-card-price {
        order: 4;
        margin-top: 6px;
        font-size: 16px;
        line-height: 24px;
    }

    .revamp-mls-card-core {
        order: 5;
        /* the button below is pushed down by auto margin, which collapses to nothing once the
           copy fills the card - this keeps a gap there either way */
        margin: 4px 0 12px;
        font-size: 16px;
        line-height: 17px;
    }

    .theme-v2 .revamp-mls-card-cta {
        order: 6;
        position: static;
        align-self: flex-start;
        /* holds the button on the card's bottom edge however tall the copy above it runs */
        margin-top: auto;
        width: 143px;
        min-width: 143px;
        height: 35px;
    }

    .revamp-mls-card + .revamp-mls-card {
        margin-top: 23px;
    }

    /* the shared card caps itself at 305 for the homepage rows; here it fills the column the way
       it does in a catalog grid */
    /* Two frames sit the page on a dark ground rather than the usual page grey. Desktop
       never shows it because the sections are full bleed; on mobile they are inset, so
       it shows between them and above the first one. */
    .html-revamp-engines-page body,
    .html-revamp-engines-page .master-wrapper-page {
        background-color: var(--ap-navy-deep);
    }

    .html-revamp-financing-page body,
    .html-revamp-financing-page .master-wrapper-page {
        background-color: var(--ap-navy);
    }

    /* --- Engines ---
       Separate rounded cards inset from the edge, rather than the full-bleed bands the
       desktop layout uses. Inside each: name, then Browse, then the copy at the foot. */
    .revamp-engines {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 0 var(--ap-gutter-mobile-tight);
    }

    .revamp-engine-panel,
    .revamp-engine-panel-lycoming {
        min-height: 437px;
        padding: 24px;
        border-radius: var(--ap-radius);
        overflow: hidden;
    }

        .revamp-engine-panel:before {
            border-radius: var(--ap-radius);
        }

    .revamp-engine-panel-head {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
    }

    /* The card is portrait and the photo is nearly square, so cover shows the full
       height but crops a slice off each side, and centring cuts the aeroplane in half.
       The frame carries no crop for this fill, so anchor left, which is as far as
       cover can go before the wing clips. */
    .revamp-engine-panel-lycoming {
        background-position: left center;
    }

    /* the copy sits at the foot of the card */
    .revamp-engine-panel-intro {
        margin-top: auto;
        margin-bottom: 0;
    }

    /* the frame carries no "browse our selection" line on mobile */
    .revamp-engine-panel-range {
        display: none;
    }

    /* --- Ready-to-Ship engines ---
       Desktop sets the two maker panels side by side. The frame stacks them, each running edge
       to edge in white with its cards two-up inside. The desktop margin is a negative pull at
       desktop gutters but turns positive on mobile, which indented the panels instead. */
    /* the intro block sets smaller than desktop's, and ranges left rather than centred */
    .revamp-rts-intro {
        text-align: left;
    }

    .theme-v2 .revamp-rts-intro h2.revamp-rts-intro-title {
        font-size: 32px;
        line-height: 36px;
        font-weight: 600;
        text-align: left;
    }

    .revamp-rts-intro-text {
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
    }

    .revamp-rts-intro-cta {
        min-width: 187px;
    }

    .revamp-rts-brands {
        grid-template-columns: 1fr;
        gap: 0;
        margin-right: calc(-1 * var(--ap-gutter));
        margin-bottom: 0;
        margin-left: calc(-1 * var(--ap-gutter));
    }

    .revamp-rts-brand {
        padding: 24px 21px 28px;
        border: none;
        border-radius: 3px;
    }

    .revamp-rts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 9px;
    }

    /* the panel behind them is white here, so the card drops its grey fill and leans on the
       same outline every other card on the site uses */
    .revamp-rts-card {
        background-color: var(--ap-white);
        /* the frame sets the card's copy from the left edge, not centred */
        text-align: left;
        align-items: flex-start;
        padding: 16px 12px;
    }

        .revamp-rts-card-logo {
            align-self: stretch;
            justify-content: flex-start;
        }

    .theme-v2 .revamp-rts-brand h2.revamp-rts-brand-title {
        text-align: left;
    }

    .revamp-rts-empty {
        text-align: left;
    }

    /* --- Category pages (Continental, Lycoming) ---
       The frame keeps the photo hero but shortens it and drops the call button; the
       sticky call bar at the top of every mobile page already carries that action. */
    .revamp-cat-hero {
        height: 303px;
        margin-bottom: 24px;
    }

        .revamp-cat-hero .revamp-hero-cta {
            display: none;
        }

    .theme-v2 .revamp-cat-hero h1.revamp-cat-hero-title,
    .theme-v2.revamp-cat-hero h1.revamp-cat-hero-title {
        font-size: 36px !important;
        line-height: 36px !important;
    }

    /* --- The shared aircraft banner, wherever a hero uses it ---
       It is nearly four times as wide as it is tall, so cover fills a phone hero by showing only a
       third of its width, which cuts the aircraft off at both edges. Zooming out to fit them in
       leaves the photo short of the full height; the sky layer behind it carries the rest, and
       because the photo is almost entirely sky the join does not show. */
    .revamp-cat-hero-wide {
        /* both layers take the same size and position, so the gradient's ramp lines up with the
           photo's own edge colours - size them differently and the join reappears */
        background-size: 160% auto;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* the frame's financing title is the heading alone - desktop keeps its supporting line */
    .html-revamp-financing-page .revamp-cat-hero-sub {
        display: none;
    }

    /* The series chips are one scrolling row here, not three wrapped ones - the frame
       lays them out 827px wide inside a 402px page, so they are meant to run off. */
    .revamp-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        /* full bleed so the row scrolls edge to edge, with the first chip on the gutter */
        margin: 0 calc(-1 * var(--ap-gutter)) 24px;
        padding: 0 var(--ap-gutter-mobile-tight);
        scrollbar-width: none;
    }

        .revamp-chips::-webkit-scrollbar {
            display: none;
        }

    .theme-v2 .revamp-chip {
        flex: 0 0 auto;
    }

    /* the frame has no sort control */
    .product-selectors {
        display: none;
    }

    /* --- Catalog cards ---
       Desktop stacks photo over text down a tall card. The frame turns it on its side:
       a narrow image column on the left, everything else beside it, in a card a fifth
       the height. */
    /* nop nests two gutters here, the theme's .center-2 and .page-body's own, which
       leaves the cards well inside the frame's. Keep one, then pull the grid out to the
       narrower gutter the cards are drawn on. */
    .html-category-page .page-body,
    .html-manufacturer-page .page-body {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .revamp-catalog-grid {
        margin-left: calc(var(--ap-gutter-mobile-tight) - var(--ap-gutter));
        margin-right: calc(var(--ap-gutter-mobile-tight) - var(--ap-gutter));
    }

    .revamp-catalog-grid .revamp-product-card,
    .revamp-product-card,
    .item-box > .revamp-product-card {
        display: grid;
        grid-template-columns: 109px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
        align-content: start;
        min-height: 237px;
        padding: 16px;
        /* the theme centres catalog text; beside the image it reads as a column */
        text-align: left;
    }

        /* the image spans the whole card and centres against the copy beside it */
        .revamp-product-card > .revamp-product-image {
            grid-column: 1;
            grid-row: 1 / span 3;
            align-self: center;
            width: 109px;
            height: auto;
        }

        .revamp-product-card img {
            width: 100%;
            height: auto;
            max-height: 109px;
            object-fit: contain;
        }

        .revamp-product-card > .revamp-product-badgerow {
            grid-column: 2;
            grid-row: 1;
            height: 20px;
            margin-bottom: 8px;
        }

        .revamp-product-card > .revamp-product-title {
            grid-column: 2;
            grid-row: 2;
        }

        .revamp-product-card > .revamp-product-footer {
            grid-column: 2;
            grid-row: 3;
        }

    /* Best Sellers scrolls sideways through 232x390 cards, so those stay upright: the
       horizontal card above would leave 71px for the copy beside a 109 picture, which is
       what was truncating the part numbers and leaving the rows ragged. */
    .revamp-bestsellers-grid .revamp-product-card {
        display: flex;
        flex-direction: column;
        min-height: 390px;
        padding: 20px;
    }

        .revamp-bestsellers-grid .revamp-product-card > .revamp-product-image {
            align-self: auto;
            width: auto;
            height: 164px;
        }

            .revamp-bestsellers-grid .revamp-product-card .revamp-product-image img {
                width: auto;
                max-width: 100%;
                max-height: 164px;
            }

    .revamp-product-card .revamp-product-badge {
        min-width: 51px;
        height: 20px;
        padding: 0 8px;
        border-radius: 3px;
    }

    .revamp-product-card .revamp-product-title {
        height: auto;
        margin-bottom: 8px;
        font-size: 16px;
        line-height: 18px;
    }

    /* The frame draws this 143 wide, but that was measured off a short sample part
       number and the shared rule truncates with an ellipsis - a part number is the one
       string on the card that must never be cut - so it takes the column instead. */
    .revamp-product-card .revamp-product-sku {
        height: auto;
        font-size: 16px;
        line-height: 18px;
    }

    .revamp-product-card .revamp-product-price {
        font-size: 16px;
        line-height: 24px;
    }

    /* desktop holds this to one line because wrapping pushed the button through the
       card border; there is room to wrap beside the image, and the frame wraps it */
    .revamp-product-card .revamp-product-core {
        height: auto;
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 17px;
        white-space: normal;
    }

    /* the chips sit closer to the grid than the theme's own spacing allows */
    .category-page-title {
        margin-bottom: 24px;
    }

    /* The frame ends a listing at the pager. On a phone the theme's side column drops
       to the bottom of the page, where none of it is on any mobile frame - the filter
       block, category, manufacturer and vendor navigation, the poll. The chips cover
       filtering and the drawer covers navigation, so the whole block goes. Hiding the
       block rather than .side-2 leaves pages that put real content in that column,
       like the account navigation, alone. */
    .blocks-wrapper {
        display: none;
    }

    /* Page navigation: numbers on the gutter with previous and next as square buttons at
       the ends, rather than the wide labelled ones desktop uses. */
    .revamp-pager ul {
        justify-content: flex-start;
        gap: 25px;
        margin-top: 24px;
    }

    .revamp-pager li.previous-page {
        margin-right: 0;
    }

    .revamp-pager li.next-page {
        margin-left: auto;
    }

    .revamp-pager li.previous-page a,
    .revamp-pager li.next-page a,
    .revamp-pager li.first-page a,
    .revamp-pager li.last-page a {
        width: 32px;
        min-width: 32px;
        height: 32px;
        padding: 0;
        font-size: 0;
    }

        /* The theme draws the arrow from its icon font here, but parks it absolutely and
           hides it on phones in favour of the word. The word is what goes, so the glyph
           comes back as a normal centred child of the square. */
        .revamp-pager li.previous-page a:before,
        .revamp-pager li.next-page a:before,
        .revamp-pager li.first-page a:before,
        .revamp-pager li.last-page a:before {
            display: block;
            position: static;
            margin: 0;
            font-size: 14px;
            line-height: 1;
            color: inherit;
        }

        /* the theme's own glyph is a media-style skip icon; the frame draws a plain
           arrow, which the heading face already carries */
        .revamp-pager li.previous-page a:before,
        .revamp-pager li.first-page a:before {
            content: "\2190";
            font-family: var(--ap-font-heading);
        }

        .revamp-pager li.next-page a:before,
        .revamp-pager li.last-page a:before {
            content: "\2192";
            font-family: var(--ap-font-heading);
        }

    /* --- FAQ band ---
       Desktop sets the copy in a column beside the cards. The frame stacks them, and the
       closing call to action moves below the cards rather than above them, so the copy
       block dissolves and its children order themselves against the list. */
    .revamp-faq {
        border-radius: 14px 14px 0 0;
    }

    /* the loyalty band is drawn the same way, in the header blue */
    .revamp-lyc-loyalty {
        border-radius: 14px 14px 0 0;
    }

        /* Where the FAQ follows it the two bands meet, and the FAQ's rounded corners would cut
           through to the page behind, leaving a white nick at each end of the seam. Pulling it up
           by its own radius puts those corners over the blue instead. */
        .revamp-lyc-loyalty + .revamp-faq {
            margin-top: -14px;
        }

    .revamp-faq-inner {
        display: flex;
        flex-direction: column;
        padding: 40px 26px;
    }

    .revamp-faq-copy {
        display: contents;
    }

    /* The lead block sits outside that inner wrapper and still carried the desktop two-column
       padding, which left its copy and its video narrow and pushed to the right. The video needs
       nothing of its own - it already tracks the column width. */
    .revamp-faq-lead {
        order: 0;
        padding: 40px 26px 0;
    }

    .revamp-faq-title {
        order: 1;
        margin-bottom: 16px;
    }

    .theme-v2 .revamp-faq h2.revamp-faq-title,
    .theme-v2.revamp-faq h2.revamp-faq-title {
        font-size: 32px;
        line-height: 36px;
    }

    .revamp-faq-intro {
        order: 2;
        font-size: 18px;
        line-height: 21px;
    }

    .revamp-faq-list {
        order: 3;
        margin-bottom: 24px;
    }

    .revamp-faq-cta-title {
        order: 4;
    }

    .theme-v2 .revamp-faq h3.revamp-faq-cta-title,
    .theme-v2.revamp-faq h3.revamp-faq-cta-title {
        font-size: 32px;
        line-height: 36px;
        /* The band lays its children out with a 40px row gap, and the frame's closing block is
           133 tall - a two-line heading, 21, then the 40 button - so trim back to that. */
        margin-bottom: -19px;
    }

    .revamp-faq .revamp-hero-cta {
        order: 5;
        align-self: flex-start;
        width: 178px;
        min-width: 178px;
    }

    /* the shared rule pins the button to the full card width at 32px; the frame draws a
       fixed 143 wide button instead, so the action slot grows with it */
    .revamp-product-card .revamp-product-actions {
        height: 35px;
    }

    .revamp-product-card .revamp-btn-outline-small,
    .item-box .revamp-product-card .revamp-btn-outline-small,
    .revamp-product-card .revamp-product-actions .ajax-cart-button-wrapper,
    .revamp-product-card .revamp-product-actions .product-box-add-to-cart-button,
    .item-box .revamp-product-card .revamp-product-actions .product-box-add-to-cart-button {
        width: 143px !important;
        height: 35px !important;
        min-height: 35px;
        border-radius: 3px;
    }

    /* --- Homepage hero ---
       The frame puts white copy over the photo. Below 1201px the desktop rule
       does not apply and the title was rendering in --ap-blue straight onto the
       image, which is unreadable. */
    .revamp-hero {
        height: 622px;
        border-radius: 0;
    }

        .revamp-hero:after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 26, 44, 0.78) 0%, rgba(0, 26, 44, 0.45) 45%, rgba(0, 26, 44, 0.1) 100%);
            pointer-events: none;
        }

    .revamp-hero-content {
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 var(--ap-gutter) 34px;
        box-sizing: border-box;
    }

    .theme-v2 .revamp-hero h1.revamp-hero-title,
    .theme-v2 .revamp-hero-title {
        font-size: 28px !important;
        line-height: 32px !important;
        color: var(--ap-white) !important;
    }

    .revamp-hero-text {
        margin: 12px 0 0;
        font-size: 15px;
        line-height: 19px;
        color: var(--ap-white);
    }

    /* the frame stacks them full width rather than sitting them side by side */
    .revamp-hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
    }

        /* white outline on the scrim, per the frame - the blue they inherit is the
           light-background treatment and is unreadable here */
        .revamp-hero-buttons .revamp-btn-outline {
            width: 100%;
            min-width: 0;
            height: var(--ap-control-height);
            box-sizing: border-box;
            border-color: var(--ap-white);
            color: var(--ap-white);
            background-color: transparent;
        }

    /* ---------------------------------------------------------------------------
       Product page - Figma mobile "Product" 392x745 + "Customers Who Bought this
       item also bought" 368x1059.
       The frame is one column: photo card, title, stock pill, specs, price, the
       price-valid note, quantity, add to cart. Two of those live outside .overview
       - the note is AnywhereSliders content sitting next to .product-essential -
       so those wrappers drop to display:contents and the whole block is ordered as
       one grid. It is two columns rather than one because the frame sets the
       quantity stepper beside the price; everything else spans both.
       --------------------------------------------------------------------------- */

    /* the frame's gutter is 17, and .page adds a second 27 on top of the column wrapper's */
    .html-revamp-product-page .master-column-wrapper {
        padding-left: var(--ap-gutter-mobile-tight);
        padding-right: var(--ap-gutter-mobile-tight);
    }

    .html-revamp-product-page .page.product-details-page {
        padding-left: 0;
        padding-right: 0;
    }

    /* the theme floats the breadcrumb absolutely and clears it with 121px of padding on the
       product block. In one column that reads as a gap, so the crumb takes its own space here. */
    .html-revamp-product-page .breadcrumb {
        position: static;
        left: auto;
        width: auto;
        margin: 0;
        transform: none;
    }

    .html-revamp-product-page .product-essential-wrapper {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 108px;
        column-gap: 12px;
        align-items: start;
        padding: 16px 0 0;
    }

    .html-revamp-product-page .product-essential,
    .html-revamp-product-page .overview,
    .html-revamp-product-page .overview-buttons {
        display: contents;
    }

    /* the picture starts level with the bottom of the heart, as the frame has it */
    .html-revamp-product-page .gallery {
        order: 1;
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        min-height: 333px;
        margin: 0;
        padding: 60px 33px 24px;
    }

        .html-revamp-product-page .gallery .picture img {
            max-height: 249px;
        }

    /* the heart sits in the card's top right corner. It is markup inside .overview-buttons, so it
       is lifted out against the wrapper: 12 in from the card edge, which is itself 17 in. */
    .html-revamp-product-page .wishlist-button-wrapper {
        position: absolute;
        top: 36px;
        right: 12px;
        z-index: 2;
        /* the theme spaces the button row as inline blocks: `margin: 0 3px 10px` */
        margin: 0;
    }

    .html-revamp-product-page .overview .product-name {
        order: 2;
        grid-column: 1 / -1;
        position: static;
        margin: 16px 0 0;
        line-height: 24px;
        overflow: visible;
    }

    .theme-v2 .html-revamp-product-page .product-name h1,
    .html-revamp-product-page .product-name h1 {
        margin: 0 !important;
        font-size: 24px !important;
        line-height: 24px !important;
        letter-spacing: -0.72px !important;
        text-align: left !important;
    }

    .html-revamp-product-page .availability-attributes-wrapper {
        order: 3;
        grid-column: 1 / -1;
        margin: 12px 0 0;
    }

        .html-revamp-product-page .availability {
            margin: 0;
        }

    .html-revamp-product-page .manufacturers {
        order: 4;
        grid-column: 1 / -1;
        margin: 12px 0 0;
    }

    .html-revamp-product-page .additional-details {
        order: 5;
        grid-column: 1 / -1;
    }

    .html-revamp-product-page .manufacturers,
    .html-revamp-product-page .additional-details > div,
    .html-revamp-product-page .product-condition {
        font-size: var(--ap-text-body);
        line-height: 26px;
        text-align: left;
    }

    .html-revamp-product-page .overview .short-description {
        order: 6;
        grid-column: 1 / -1;
        margin: 12px 0 0;
        line-height: 26px;
        text-align: left;
    }

    /* the frame sets the stepper beside the price, but the core-charge rows under it are too
       long for the 251 that leaves. So the price block flattens too: only its headline row
       shares the line, the core rows drop below at full width. The 37 is 16 of gap plus the
       21 the "Quantity" caption hangs above the stepper. */
    .html-revamp-product-page .prices {
        display: contents;
    }

        .html-revamp-product-page .prices > * {
            order: 9;
            grid-column: 1 / -1;
        }

        .html-revamp-product-page .prices > .product-price {
            order: 7;
            grid-column: 1;
            margin-top: 37px;
        }

            /* the frame prints the headline price on its own. The label is what pushes it into
               the stepper, and the two core rows below still carry theirs. */
            .html-revamp-product-page .prices > .product-price label {
                display: none;
            }

    /* "Quantity" is a caption above the stepper in the frame; the theme's own label reads "Qty:"
       and stays hidden. */
    .html-revamp-product-page .add-to-cart-qty-wrapper {
        order: 8;
        grid-column: 2;
        position: relative;
        align-self: start;
        flex: 0 0 auto;
        margin: 37px 0 0;
    }

        .html-revamp-product-page .add-to-cart-qty-wrapper:before {
            content: "Quantity";
            position: absolute;
            top: -21px;
            left: 0;
            right: 0;
            font-family: var(--ap-font-body);
            font-weight: 400;
            font-size: var(--ap-text-fine);
            line-height: 21px;
            text-align: center;
            color: var(--ap-navy-deep);
        }

    .html-revamp-product-page .product-essential-wrapper > .slider-wrapper {
        order: 10;
        grid-column: 1 / -1;
        width: auto;
        margin: 4px 0 0;
    }

    /* the button is wrapped by nopAjaxCart on desktop and bare under a phone user agent, and both
       are capped at 55% of the column - ajaxCart.css on the wrapper, styles.css on the button */
    .html-revamp-product-page .product-essential .ajax-cart-button-wrapper,
    .html-revamp-product-page .overview-buttons .ajax-cart-button-wrapper,
    .html-revamp-product-page .overview-buttons .add-to-cart-button {
        order: 11;
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 20px 0 0;
    }

    .html-revamp-product-page .overview-buttons .ajax-cart-button-wrapper .add-to-cart-button {
        margin: 0;
    }

    .html-revamp-product-page .overview-footer {
        order: 12;
        grid-column: 1 / -1;
    }

    .html-revamp-product-page .product-page-bottom {
        max-width: none;
        margin-top: 0;
        padding-top: 48px;
    }

        /* QuickTabs pulls the empty tab strip up 30, which was eating the gap under add to cart.
           It sets that through the id, so the id has to be named here too. */
        .html-revamp-product-page .product-page-bottom #quickTabs,
        .html-revamp-product-page .product-page-bottom > .productTabs {
            margin-top: 0;
        }

    /* the cross-sell cards are 368 in the frame, 5 wider either side than the product block */
    .html-revamp-product-page .revamp-pdp-crosssell {
        margin-left: -5px;
        margin-right: -5px;
    }

        .html-revamp-product-page .revamp-pdp-crosssell .revamp-product-card,
        .html-shopping-cart-page .revamp-pdp-crosssell .revamp-product-card {
            max-width: none;
        }

    .html-revamp-product-page .revamp-pdp-crosssell .title,
    .html-shopping-cart-page .revamp-pdp-crosssell .title {
        margin-bottom: 21px;
    }

        .theme-v2 .html-revamp-product-page .revamp-pdp-crosssell .title strong,
        .theme-v2 .html-shopping-cart-page .revamp-pdp-crosssell .title strong,
        .html-revamp-product-page .revamp-pdp-crosssell .title strong,
        .html-shopping-cart-page .revamp-pdp-crosssell .title strong {
            font-size: var(--ap-text-subtitle);
            line-height: 27px;
        }

    .html-revamp-product-page .revamp-pdp-crosssell .item-grid,
    .html-shopping-cart-page .revamp-pdp-crosssell .item-grid {
        gap: 12px;
    }

    /* ---------------------------------------------------------------------------
       "Item added to cart" on a phone. SevenSpikes pins every one of these
       windows at `left: 50% !important; width: 630px !important` with a -315
       margin, which is why it sat off both edges of the screen; that part is put
       right for all of them. The frame then makes this one a sheet across the
       bottom.
       --------------------------------------------------------------------------- */

    .ajaxCart {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0;
        width: 100% !important;
        max-width: 100%;
        /* the attribute picker is a whole product form and runs past the top of the screen */
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 !important;
    }

    .ajaxCart:has(.productAddedToCartWindow) {
        border-radius: 0;
        box-shadow: none;
    }

        .ajaxCart:has(.productAddedToCartWindow) .k-window-titlebar {
            height: 52px;
        }

            .ajaxCart:has(.productAddedToCartWindow) .k-window-titlebar:after {
                left: var(--ap-gutter-mobile-tight);
                right: var(--ap-gutter-mobile-tight);
            }

            .ajaxCart:has(.productAddedToCartWindow) .k-window-titlebar .k-window-actions {
                top: 14px;
                right: var(--ap-gutter-mobile-tight);
            }

                .ajaxCart:has(.productAddedToCartWindow) .k-window-titlebar .k-window-actions a:before {
                    width: 20px;
                    height: 20px;
                    font-size: 20px;
                }

    .productAddedToCartWindowTitle {
        padding: 14px 44px;
        font-size: var(--ap-text-link);
    }

    .productAddedToCartWindow {
        padding: 16px var(--ap-gutter-mobile-tight);
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .productAddedToCartItem {
        gap: 18px;
    }

    .productAddedToCartWindowImage {
        flex: 0 0 137px;
        width: 137px;
        height: 137px;
    }

    .productAddedToCartWindowSummary {
        margin-top: 20px;
    }

    /* ---------------------------------------------------------------------------
       Footer - Figma mobile 402x651. The frame folds the three link groups into
       341x44 pills and runs them logo, socials, Find Us, My Account, Information,
       newsletter, copyright.
       --------------------------------------------------------------------------- */

    .revamp-footer {
        padding: 32px var(--ap-gutter-mobile) 20px;
    }

    .revamp-footer-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .revamp-footer-brand {
        order: 1;
    }

    .revamp-footer-col-account {
        order: 2;
    }

    .revamp-footer-col-information {
        order: 3;
    }

    .revamp-footer-newsletter {
        order: 4;
        margin-top: 20px;
    }

    .revamp-footer-logo img {
        max-width: 190px;
    }

    .revamp-footer-socials {
        margin: 14px 0 24px;
    }

    /* only a heading that actually heads a list becomes a pill, which leaves the
       newsletter's "Don't Miss a Single Part" as running copy */
    .revamp-footer .revamp-footer-heading:has(+ ul),
    .revamp-footer .revamp-footer-heading-findus {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 44px;
        margin: 0;
        padding: 0 14px 0 16px;
        box-sizing: border-box;
        border: var(--ap-border-width) solid var(--ap-white);
        border-radius: var(--ap-radius);
        font-size: var(--ap-text-body);
        cursor: pointer;
    }

        .revamp-footer .revamp-footer-heading:has(+ ul):after {
            content: "";
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 8px solid var(--ap-white);
        }

        .revamp-footer .revamp-footer-heading.revamp-footer-open:after {
            transform: rotate(180deg);
        }

    .revamp-footer .revamp-footer-heading + ul {
        display: none;
        margin: 0;
        padding: 14px 16px 2px;
    }

        .revamp-footer .revamp-footer-heading.revamp-footer-open + ul {
            display: block;
        }

    .revamp-footer-col-account,
    .revamp-footer-col-information {
        margin: 0;
    }

    .revamp-footer .revamp-footer-heading-findus {
        margin-bottom: 0;
    }

    .revamp-footer-contact li:last-child {
        margin-bottom: 0;
    }

    .revamp-footer-copyright {
        margin-top: 20px;
    }

    /* ---------------------------------------------------------------------------
       Customer portal - Figma mobile "Customer Portal" 402x1784. Desktop runs the
       menu as a navy sticky column beside the form; the frame turns each group into
       a white card on the navy ground - a 45 header row over 45 link rows, with the
       row rules held 21 in from the card edge.
       --------------------------------------------------------------------------- */

    .side-2:has(.revamp-portal-nav) {
        padding-bottom: 32px;
        background-color: var(--ap-navy-deep);
    }

    .revamp-portal-nav {
        position: static;
        max-height: none;
        padding: 24px 22px 0;
        background: none;
    }

    .revamp-portal-user {
        gap: 12px;
        margin: 0 0 20px;
    }

    .revamp-portal-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        border: var(--ap-border-width) solid var(--ap-white);
        background-color: var(--ap-header);
        font-family: var(--ap-font-heading);
        font-weight: 500;
        font-size: 22px;
        line-height: 1;
        color: var(--ap-white);
    }

    .revamp-portal-group {
        margin: 0 0 12px;
        border: var(--ap-border-width) solid var(--ap-border);
        border-radius: var(--ap-radius);
        background-color: var(--ap-white);
        overflow: hidden;
    }

    .theme-v2.revamp-portal-nav h2.revamp-portal-group-title {
        display: flex;
        align-items: center;
        height: 45px;
        margin: 0;
        padding: 0 21px;
        border-bottom: var(--ap-border-width) solid var(--ap-border);
        font-size: 15px;
        color: var(--ap-placeholder);
    }

    /* the rules between rows stop 21 short of the card edge, so they sit on the row
       rather than on the link, which carries no padding of its own here */
    .revamp-portal-list li {
        margin: 0 21px;
    }

        .revamp-portal-list li + li {
            border-top: 1.5px solid var(--ap-border);
        }

    .revamp-portal-list a {
        display: flex;
        align-items: center;
        height: 45px;
        padding: 0;
        font-weight: 500;
        line-height: var(--ap-leading-body);
        color: var(--ap-blue);
    }

    .revamp-portal-signout {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        /* 22 of page gutter plus 7 - the frame insets this button past the cards */
        margin: 20px 7px 0;
        padding: 0;
        box-sizing: border-box;
        border: var(--ap-border-width) solid var(--ap-white);
        border-radius: var(--ap-radius);
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
    }

    /* ---------------------------------------------------------------------------
       Sign in - Figma mobile "Sign in or Register" 402x1442. Desktop holds a 441
       card against the right of a 711 photo hero; the frame drops the photo, sets
       the card across the screen on the navy ground and keeps everything else.
       --------------------------------------------------------------------------- */

    .revamp-login-band {
        display: block;
        min-height: 0;
        padding: 22px var(--ap-gutter-mobile-tight) 40px;
        background-color: var(--ap-navy-deep);
        background-image: none;
    }

    .revamp-login-card {
        width: 100%;
        padding: 18px;
    }

    .theme-v2 .revamp-login-card h1.revamp-login-title {
        letter-spacing: normal;
    }

    .revamp-login-sub {
        margin: 5px 0 24px;
    }

    .revamp-login-form .revamp-field {
        margin: 0 0 12px;
    }

    .revamp-login-row {
        margin: 8px 0 20px;
    }

    /* the frame opens a clear break before the register half of the card */
    .revamp-login-register {
        margin-top: 44px;
    }

    .theme-v2 .revamp-login-card h2.revamp-login-register-title {
        margin: 0 0 8px;
    }

    .revamp-login-register-text {
        margin: 0 0 24px;
    }

    .revamp-login-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* ---------------------------------------------------------------------------
       Register - Figma mobile "Register" 402x3070. Desktop is one 880 card on a
       photo band; the frame drops the photo, lifts the title onto the navy ground
       in white, and draws each section as its own 370 card.
       --------------------------------------------------------------------------- */

    .revamp-register-band {
        padding: 0 var(--ap-gutter-mobile-tight) 40px;
        background-color: var(--ap-navy-deep);
        background-image: none;
    }

    .revamp-register-card {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: none;
    }

    /* the title band the frame draws above the cards */
    .theme-v2 .revamp-register-card h1.revamp-register-title {
        margin: 0 0 16px;
        padding: 36px 0 0;
        font-weight: 400;
        font-size: 36px;
        line-height: 36px;
        letter-spacing: normal;
        color: var(--ap-white);
    }

    .revamp-register-section {
        margin: 0 0 12px;
        padding: 0 20px 20px;
        border: var(--ap-border-width) solid var(--ap-border);
        border-radius: var(--ap-radius);
        background-color: var(--ap-white);
    }

        .revamp-register-section:last-of-type {
            margin-bottom: 0;
        }

    /* the frame gives the manufacturer copy the page gutter; desktop indents it 103 to clear
       the column beside it */
    .revamp-mfr-info-inner {
        padding: 0 var(--ap-gutter-mobile);
    }

    /* ---------------------------------------------------------------------------
       Customer portal: the frame makes the menu a page of its own, and the account
       pages carry no menu at all (see the Saved Parts frame). So the landing shows
       the menu, every other account page shows its content, and Account Information
       - which is the same route as the landing - is told apart by the flag the nav
       puts on itself.
       --------------------------------------------------------------------------- */

    html.html-account-page:not(.html-customer-info-page) .revamp-portal-nav,
    .master-column-wrapper:has(.revamp-portal-nav--detail) .revamp-portal-nav {
        display: none;
    }

    /* with the menu gone the column collapses, so the arrow can sit on the title's own line
       rather than on a row of its own above it */
    html.html-account-page:not(.html-customer-info-page) .side-2,
    .master-column-wrapper:has(.revamp-portal-nav--detail) .side-2 {
        position: relative;
        height: 0;
        margin: 0;
        padding: 0;
        overflow: visible;
        background: none;
    }

    html.html-account-page:not(.html-customer-info-page) .revamp-portal-back,
    .master-column-wrapper:has(.revamp-portal-nav--detail) .revamp-portal-back {
        display: inline-flex;
    }

    html.html-customer-info-page .center-2 {
        display: none;
    }

    .master-column-wrapper:has(.revamp-portal-nav--detail) .center-2 {
        display: block;
    }

    /* styles.css:315 gives both columns `margin: 0 0 50px`. Neither wrapper above them has a
       bottom padding or border, so that margin collapses straight out of the page and shows as a
       strip of page grey between the content and the footer. */
    .html-account-page .center-2,
    .html-account-page .side-2 {
        margin-bottom: 0;
    }

    /* 65 of side padding is the desktop column inset; the frame runs the fields to a 16 gutter */
    .html-account-page .center-2 {
        padding: 24px var(--ap-gutter-mobile-tight) 48px;
    }

    /* desktop paints this column white behind the form; every portal frame sets the cards on the
       page's own grey instead */
    .html-account-page .master-column-wrapper {
        background-color: transparent;
    }

    .revamp-portal-back {
        align-items: center;
        justify-content: center;
        position: absolute;
        /* .center-2's 24 of padding plus half the difference between the 40 title line and the
           30 arrow, so the two sit on the same baseline */
        top: 29px;
        left: var(--ap-gutter-mobile-tight);
        z-index: 2;
        width: 30px;
        height: 30px;
        margin: 0;
    }

    /* room for the arrow beside the heading */
    .theme-v2.revamp-portal h1.revamp-portal-title {
        padding-left: 40px;
    }

        /* 22 box for an 18 arrow: a mask clips at its own edge, so the viewBox carries the
           margin the 3px stroke needs */
        .revamp-portal-back:before {
            content: "";
            width: 22px;
            height: 22px;
            background-color: var(--ap-blue);
            -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-2%20-2%2022%2022%27%3E%3Cpath%20d=%27M16%209H2M8%203L2%209l6%206%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%273%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-2%20-2%2022%2022%27%3E%3Cpath%20d=%27M16%209H2M8%203L2%209l6%206%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%273%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
        }

    /* --- Customer portal: Addresses (Figma mobile "Customer Portal Addresses" 402x2041) ---
       The frame draws every saved address as an editable block closed by one "Save your
       changes". Nop posts one address at a time through CustomerAddressEdit and has no
       save-many endpoint, and the frame drops First name, Last name and Company which this
       store marks required - the same reason the desktop page kept its list. So the cards keep
       Edit / Delete / Add New and take the frame's metrics: one per row at the 16 gutter. */

    .revamp-address-list {
        gap: 14px;
        margin-top: 14px;
        counter-reset: revamp-address;
    }

    .revamp-address-card {
        flex: 1 1 100%;
        padding: 20px;
        counter-increment: revamp-address;
    }

        /* the frame heads each block "Address 1", "Address 2". A counter keeps that out of the
           markup, which desktop shares. */
        .revamp-address-card:before {
            content: "Address " counter(revamp-address);
            display: block;
            margin: 0 0 12px;
            font-family: var(--ap-font-heading);
            font-weight: 600;
            font-size: 21px;
            line-height: 21px;
            color: var(--ap-blue);
        }

    /* the name is one of the address's details here, not the block's heading */
    .theme-v2 .revamp-address-card h2.revamp-address-name {
        margin: 0 0 4px;
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
    }

    /* the frame closes the page with one full-width action */
    .html-account-page .revamp-portal-save {
        width: 100%;
    }

    .revamp-address-actions {
        gap: 12px;
    }

    .html-account-page .revamp-address-edit,
    .html-account-page .revamp-address-delete {
        flex: 1 1 0;
        min-width: 0;
    }

    /* ---------------------------------------------------------------------------
       Customer portal tables - Figma mobile "Customer Portal Orders" 402x2027.
       Orders, Back Orders and Open Cores are all wide tables that cannot hold their
       columns on a phone, so each row becomes a card: a navy band carrying the two
       fields that identify the row, then the rest in two labelled columns. Every
       cell names its column in data-label - Orders sets it in the view's createdRow
       because its rows arrive over ajax, the other two carry it in the markup.
       --------------------------------------------------------------------------- */

    .revamp-orders-filters {
        border-radius: var(--ap-radius);
    }

    /* the frame stacks the two, search first; the markup has clear first */
    .revamp-orders-actions {
        flex-direction: column-reverse;
        gap: 12px;
    }

        .html-revamp-orders-page .revamp-orders-clear,
        .html-revamp-orders-page .revamp-orders-search {
            width: 100%;
        }

    /* the frame sets a count between the filters and the list */
    .revamp-orders-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 12px;
        padding: 12px;
        box-sizing: border-box;
        border: 1px solid var(--ap-border);
        border-radius: var(--ap-radius);
        background-color: var(--ap-white);
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        color: var(--ap-placeholder);
    }

        .revamp-orders-count strong {
            font-weight: 700;
            color: var(--ap-navy-deep);
        }

        .html-revamp-orders-page .revamp-orders-filter-toggle {
            width: auto;
            min-width: 0;
            height: auto;
            padding: 0;
            border: none;
            background: none !important;
            font-family: var(--ap-font-body);
            font-weight: 600;
            font-size: var(--ap-text-body);
            line-height: var(--ap-leading-body);
            text-transform: none;
            color: var(--ap-blue) !important;
            cursor: pointer;
        }

    /* Filter folds the panel away, leaving its own heading row */
    .revamp-orders-filters.revamp-orders-filters-collapsed {
        display: none;
    }

    .revamp-portal-table-wrap {
        overflow: visible;
    }

    #CustomerOrdersTable,
    #CustomerOrdersTable tbody,
    #CustomerBackOrdersTable,
    #CustomerBackOrdersTable tbody,
    #CustomerOpenCoresTable,
    #CustomerOpenCoresTable tbody,
    #CustomerInvoicesTable,
    #CustomerInvoicesTable tbody,
    #CustomerShippingAccountsTable,
    #CustomerShippingAccountsTable tbody {
        display: block;
        width: 100%;
    }

    #CustomerOrdersTable thead,
    #CustomerBackOrdersTable thead,
    #CustomerOpenCoresTable thead,
    #CustomerInvoicesTable thead,
    #CustomerShippingAccountsTable thead {
        display: none;
    }

    #CustomerOrdersTable tbody tr,
    #CustomerBackOrdersTable tbody tr,
    #CustomerOpenCoresTable tbody tr,
    #CustomerInvoicesTable tbody tr,
    #CustomerShippingAccountsTable tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0 0 12px;
        border: 1px solid var(--ap-border);
        border-radius: var(--ap-radius);
        background-color: var(--ap-white);
        overflow: hidden;
    }

    #CustomerOrdersTable tbody td,
    #CustomerBackOrdersTable tbody td,
    #CustomerOpenCoresTable tbody td,
    #CustomerInvoicesTable tbody td,
    #CustomerShippingAccountsTable tbody td {
        display: block;
        /* the desktop row is a fixed 78 tall; a card row is whatever it holds */
        height: auto;
        padding: 16px 16px 0;
        border: none;
        font-family: var(--ap-font-body);
        font-weight: 500;
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        color: var(--ap-blue);
        text-align: left;
    }

        #CustomerOrdersTable tbody td:before,
        #CustomerBackOrdersTable tbody td:before,
        #CustomerOpenCoresTable tbody td:before,
        #CustomerInvoicesTable tbody td:before,
        #CustomerShippingAccountsTable tbody td:before {
            content: attr(data-label);
            display: block;
            margin-bottom: 4px;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--ap-placeholder);
        }

        /* the empty-table row is a single cell and is not a card */
        #CustomerOrdersTable tbody td.dataTables_empty,
        #CustomerBackOrdersTable tbody td.dataTables_empty,
        #CustomerOpenCoresTable tbody td.dataTables_empty,
        #CustomerInvoicesTable tbody td.dataTables_empty {
            grid-column: 1 / -1;
            padding: 16px;
            text-align: center;
        }

            #CustomerOrdersTable tbody td.dataTables_empty:before,
            #CustomerBackOrdersTable tbody td.dataTables_empty:before,
            #CustomerOpenCoresTable tbody td.dataTables_empty:before,
            #CustomerInvoicesTable tbody td.dataTables_empty:before {
                content: none;
            }

    /* --- the navy band: the two fields that identify the row --- */

    #CustomerOrdersTable tbody td:nth-child(1),
    #CustomerOrdersTable tbody td:nth-child(7),
    #CustomerBackOrdersTable tbody td:nth-child(1),
    #CustomerBackOrdersTable tbody td:nth-child(2),
    #CustomerOpenCoresTable tbody td:nth-child(1),
    #CustomerOpenCoresTable tbody td:nth-child(4) {
        grid-row: 1;
        padding: 12px 16px;
        background-color: var(--ap-navy-deep);
        font-weight: 700;
        color: var(--ap-white);
    }

        #CustomerOrdersTable tbody td:nth-child(1):before,
        #CustomerOrdersTable tbody td:nth-child(7):before,
        #CustomerBackOrdersTable tbody td:nth-child(1):before,
        #CustomerBackOrdersTable tbody td:nth-child(2):before,
        #CustomerOpenCoresTable tbody td:nth-child(1):before,
        #CustomerOpenCoresTable tbody td:nth-child(4):before {
            content: none;
        }

        #CustomerOrdersTable tbody td:nth-child(1) a {
            color: var(--ap-white);
            text-decoration: none;
        }

    #CustomerOrdersTable tbody td:nth-child(7),
    #CustomerBackOrdersTable tbody td:nth-child(2),
    #CustomerOpenCoresTable tbody td:nth-child(4) {
        text-align: right;
    }

    /* --- the body, and the rule that separates each pair of rows --- */

    #CustomerOrdersTable tbody td:nth-child(2) { grid-area: 2 / 1; }
    #CustomerOrdersTable tbody td:nth-child(3) { grid-area: 2 / 2; }
    #CustomerOrdersTable tbody td:nth-child(4) { grid-area: 3 / 1; }
    #CustomerOrdersTable tbody td:nth-child(5) { grid-area: 3 / 2; }

    #CustomerBackOrdersTable tbody td:nth-child(3) { grid-area: 2 / 1; }
    #CustomerBackOrdersTable tbody td:nth-child(4) { grid-area: 2 / 2; }

    #CustomerOpenCoresTable tbody td:nth-child(2) { grid-area: 2 / 1; }
    #CustomerOpenCoresTable tbody td:nth-child(3) { grid-area: 2 / 2; }

    #CustomerOrdersTable tbody td:nth-child(4),
    #CustomerOrdersTable tbody td:nth-child(5) {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--ap-border);
    }

    /* the last field runs the width of the card and closes it */
    #CustomerOrdersTable tbody td:nth-child(6),
    #CustomerBackOrdersTable tbody td:nth-child(5) {
        grid-column: 1 / -1;
        margin-top: 12px;
        padding-top: 12px;
        padding-bottom: 16px;
        border-top: 1px solid var(--ap-border);
    }

    #CustomerOpenCoresTable tbody td:nth-child(2),
    #CustomerOpenCoresTable tbody td:nth-child(3) {
        padding-bottom: 16px;
    }

    /* --- Account Statement: the same card, with the outstanding balance above the list --- */

    .revamp-statement-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 16px;
        padding: 16px;
        box-sizing: border-box;
        border-radius: var(--ap-radius);
        background-color: var(--ap-navy-deep);
        font-family: var(--ap-font-body);
        color: var(--ap-white);
    }

        .revamp-statement-summary-label {
            font-weight: 600;
            font-size: var(--ap-text-body);
        }

        .revamp-statement-summary-value {
            font-weight: 700;
            font-size: var(--ap-text-link);
        }

    /* this frame heads its cards in --ap-navy rather than the deeper navy the orders card uses */
    #CustomerInvoicesTable tbody td:nth-child(1),
    #CustomerInvoicesTable tbody td:nth-child(4) {
        grid-row: 1;
        padding: 12px 16px;
        background-color: var(--ap-navy);
        font-weight: 700;
        color: var(--ap-white);
    }

        #CustomerInvoicesTable tbody td:nth-child(1):before,
        #CustomerInvoicesTable tbody td:nth-child(4):before {
            content: none;
        }

    #CustomerInvoicesTable tbody td:nth-child(4) {
        text-align: right;
    }

    #CustomerInvoicesTable tbody td:nth-child(2) { grid-area: 2 / 1; }
    #CustomerInvoicesTable tbody td:nth-child(3) { grid-area: 2 / 2; }
    #CustomerInvoicesTable tbody td:nth-child(5) { grid-area: 3 / 1; }
    #CustomerInvoicesTable tbody td:nth-child(6) { grid-area: 3 / 2; }

    #CustomerInvoicesTable tbody td:nth-child(5),
    #CustomerInvoicesTable tbody td:nth-child(6) {
        margin-top: 12px;
        padding-top: 12px;
        padding-bottom: 16px;
        border-top: 1px solid var(--ap-border);
    }

    #CustomerInvoicesTable tbody td:nth-child(5) {
        font-weight: 700;
    }

    /* the frame closes the row with a badge; the live page carries a payment link, so the link
       takes the badge's shape */
    #CustomerInvoicesTable tbody td:nth-child(6) {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
    }

        /* the frame leaves the badge unlabelled */
        #CustomerInvoicesTable tbody td:nth-child(6):before {
            content: none;
        }

        .html-revamp-orders-page #CustomerInvoicesTable .revamp-statement-pay {
            display: inline-block;
            width: auto;
            padding: 6px 16px;
            border: none;
            border-radius: var(--ap-radius);
            background-color: rgba(21, 136, 205, 0.3);
            font-family: var(--ap-font-body);
            font-weight: 700;
            font-size: var(--ap-text-body);
            text-decoration: none;
            color: var(--ap-blue);
        }

        #CustomerOrdersTable tbody td:nth-child(6) .revamp-order-status {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 6px;
            background-color: rgba(21, 136, 205, 0.3);
            font-weight: 600;
            color: var(--ap-blue);
        }

    /* --- Change Password - Figma mobile "Customer Portal Change Password" 402x1393 ---
       The frame puts the form in a card, heads it, and shows a label over each field where
       desktop leaves the placeholder to do that work. */

    .revamp-changepassword-card {
        padding: 16px;
        box-sizing: border-box;
        border: 1px solid var(--ap-border);
        border-radius: var(--ap-radius);
        background-color: var(--ap-white);
    }

    .theme-v2 .revamp-changepassword-heading {
        display: block;
        margin: 0 0 18px;
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: 21px;
        line-height: 21px;
        text-transform: none !important;
        color: var(--ap-blue);
    }

    .revamp-changepassword-fields .revamp-field {
        margin-bottom: 18px;
    }

        /* the frame names each field above it; desktop hides these for the placeholder */
        .revamp-changepassword-fields .revamp-field label.revamp-visually-hidden {
            position: static !important;
            display: block;
            width: auto;
            height: auto;
            margin: 0 0 6px;
            overflow: visible;
            clip: auto;
            white-space: normal;
            font-family: var(--ap-font-heading);
            font-weight: 600;
            font-size: var(--ap-text-body);
            line-height: var(--ap-leading-body);
            color: var(--ap-blue);
        }

    .html-change-password-page .revamp-portal-actions {
        margin: 0;
    }

    .html-change-password-page .revamp-portal-save {
        width: 100%;
        height: 42px;
    }

    /* --- Shipping Account - Figma mobile "Customer Portal Shipping Account" 402x1393 ---
       Same card as Change Password: the add form in a bordered white box with its heading, the
       two fields stacked full width, and the action closing it. The list of accounts already
       saved is not in the frame but is kept, as one card per account. */

    .revamp-ship-card {
        padding: 16px;
        box-sizing: border-box;
        border: 1px solid var(--ap-border);
        border-radius: var(--ap-radius);
        background-color: var(--ap-white);
    }

        .theme-v2 .revamp-ship-card h2.revamp-portal-heading {
            margin: 0 0 18px;
            font-size: 21px;
            line-height: 21px;
        }

    .revamp-ship-row {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

        .revamp-ship-row .revamp-field {
            flex: 1 1 100%;
            width: 100%;
        }

    .html-revamp-form-page .revamp-ship-add {
        /* the row is a column here, so the button's own flex would stretch it down the page */
        flex: 0 0 42px;
        width: 100%;
        min-height: 42px;
        height: 42px;
        margin: 0;
    }

    /* one card per saved account: the number heads it, the carrier sits under */
    #CustomerShippingAccountsTable tbody td:nth-child(1) {
        grid-column: 1 / -1;
        padding: 12px 16px;
        background-color: var(--ap-navy);
        font-weight: 700;
        color: var(--ap-white);
    }

        #CustomerShippingAccountsTable tbody td:nth-child(1):before {
            content: none;
        }

    #CustomerShippingAccountsTable tbody td:nth-child(2) {
        grid-column: 1 / -1;
        padding-bottom: 16px;
    }

    /* --- Saved Parts (Figma mobile "Saved Parts" 402x1847) ---------------------
       Every row becomes its own card: a navy strip carrying the name and the remove cross,
       the picture beside a column of part number, unit price, quantity and subtotal, and
       Add to Cart across the foot. The 991 block above already drops the column header and
       stacks the row; this re-cuts it to the frame. This page is drawn on the 17 gutter,
       not the 27 the wrapper gives every other page. */

    .html-wishlist-page .master-column-wrapper {
        padding: 0 var(--ap-gutter-mobile-tight);
    }

    .revamp-saved-page {
        margin: 0 0 48px;
    }

    /* the frame runs the page name full width in a navy band, so it breaks back out of the gutter */
    .theme-v2.revamp-saved-page h1.revamp-saved-title {
        margin: 0 calc(-1 * var(--ap-gutter-mobile-tight)) 24px !important;
        padding: 35px var(--ap-gutter-mobile-tight) !important;
        background-color: var(--ap-navy-deep) !important;
        font-weight: 400 !important;
        font-size: var(--ap-text-section) !important;
        line-height: var(--ap-text-section) !important;
        color: var(--ap-white) !important;
    }

    .revamp-saved {
        display: flex;
        flex-direction: column;
        gap: var(--ap-gap-horizontal);
    }

    .revamp-saved-row {
        grid-template-columns: 160px minmax(0, 1fr);
        grid-template-areas:
            "name  name"
            "image sku"
            "image price"
            "image qty"
            "image total"
            "cart  cart";
        align-items: start;
        gap: 0 20px;
        padding: 0 17px 20px;
        overflow: hidden;
        border-radius: var(--ap-radius);
    }

        /* cards stand apart now, so they stop sharing a border */
        .revamp-saved-row + .revamp-saved-row {
            margin-top: 0;
        }

    /* flattened so the name can take the strip and the part number the column beside the picture */
    .revamp-saved-row .revamp-saved-item {
        display: contents;
    }

    .theme-v2 .revamp-saved-row .revamp-saved-name {
        grid-area: name;
        margin: 0 -17px 16px;
        padding: 10px 52px 10px 17px;
        background-color: var(--ap-navy);
        font-size: var(--ap-text-body);
        line-height: 19px;
        color: var(--ap-white);
    }

    .theme-v2 .revamp-saved-row .revamp-saved-remove {
        top: 6px;
        right: 12px;
        color: var(--ap-white);
    }

        .theme-v2 .revamp-saved-row .revamp-saved-remove:hover {
            color: var(--ap-border);
        }

    .revamp-saved-row .revamp-saved-image {
        grid-area: image;
        width: 160px;
        height: 143px;
    }

    .revamp-saved-row .revamp-saved-sku {
        grid-area: sku;
    }

    /* both cards print the part number the way the product cards do. The cart marks its vendor
       line with the same class, so that one is kept out of it. */
    .revamp-saved-sku {
        margin: 0;
        font-size: var(--ap-text-body);
        line-height: 18px;
        text-transform: none;
    }

        .revamp-saved-sku:not(.revamp-cart-vendor):before {
            content: "Part #: ";
        }

    .revamp-saved-row .revamp-saved-price {
        grid-area: price;
    }

    .revamp-saved-price {
        margin-top: 6px;
        font-size: var(--ap-text-body);
        line-height: 18px;
    }

    .revamp-saved-row .revamp-saved-qty {
        grid-area: qty;
    }

    .revamp-saved-qty {
        margin-top: 10px;
    }

        /* the frame labels the stepper */
        .revamp-saved-qty:before {
            content: "QTY";
            display: block;
            font-family: var(--ap-font-heading);
            font-weight: 600;
            font-size: var(--ap-text-micro);
            line-height: 24px;
            letter-spacing: var(--ap-tracking-tight);
            color: var(--ap-blue);
        }

    .revamp-qty,
    .theme-v2 .revamp-saved-select {
        display: flex;
        width: 100%;
    }

    .theme-v2 .revamp-qty input.revamp-qty-input {
        font-size: var(--ap-text-link) !important;
    }

    .revamp-saved-row .revamp-saved-subtotal {
        grid-area: total;
    }

    .revamp-saved-subtotal {
        margin-top: 10px;
        padding-top: 6px;
        border-top: 1px solid var(--ap-border);
        font-size: var(--ap-text-body);
        line-height: 24px;
    }

    .revamp-saved-cart {
        grid-area: cart;
        margin-top: 16px;
    }

    /* warnings and the edit link aren't in the frame - they keep their own full-width rows
       under the button rather than landing in a cell that has no room for them */
    .revamp-saved-row .revamp-saved-item > .attributes,
    .revamp-saved-row .revamp-saved-item > .recurring-info,
    .revamp-saved-row .revamp-saved-item > .rental-info,
    .revamp-saved-row .revamp-saved-item > .message-error,
    .theme-v2 .revamp-saved-row .revamp-saved-edit {
        grid-column: 1 / -1;
    }

    /* --- Shopping Cart (Figma mobile "Shopping Cart" 402x3277) -----------------
       The desktop page centres itself in whatever room the 1251 layout leaves, which on a
       phone resolves to the 65 gutter and squeezed the whole page into 263px. It drops to
       the same 17 gutter Saved Parts uses, the two columns stack, and the frame's order
       puts Discount Code between the two upload cards - the opposite side of the desktop
       layout - so the cards are flattened onto one flex column and ordered there. */

    .html-shopping-cart-page .master-column-wrapper {
        padding: 0 var(--ap-gutter-mobile-tight);
    }

    .revamp-cart-page {
        margin: 0 0 48px;
    }

    .theme-v2.revamp-cart-page h1.revamp-cart-title {
        margin: 0 calc(-1 * var(--ap-gutter-mobile-tight)) 24px !important;
        padding: 35px var(--ap-gutter-mobile-tight) !important;
        background-color: var(--ap-navy-deep) !important;
        font-weight: 400 !important;
        font-size: var(--ap-text-section) !important;
        line-height: var(--ap-text-section) !important;
        color: var(--ap-white) !important;
    }

    .revamp-cart {
        display: flex;
        flex-direction: column;
        gap: var(--ap-gap-horizontal);
    }

    /* flattened so the frame's order can be set on the cards themselves */
    .revamp-cart-main,
    .revamp-cart-side,
    .revamp-cart-tools {
        display: contents;
    }

    .revamp-cart-table {
        display: flex;
        flex-direction: column;
        gap: var(--ap-gap-horizontal);
        order: 1;
    }

    .revamp-cart-upload {
        order: 2;
    }

    .revamp-cart-discount {
        order: 3;
    }

    .revamp-cart-notes {
        order: 4;
    }

    .revamp-cart-order {
        order: 5;
    }

    .revamp-cart-crosssells {
        order: 6;
    }

    /* --- the item card --- */

    .revamp-cart-row {
        grid-template-columns: 122px minmax(0, 1fr);
        grid-template-areas:
            "image item"
            "image price"
            "image qty"
            "image total";
        align-items: start;
        gap: 0 20px;
        padding: 20px 17px;
        border-radius: var(--ap-radius);
    }

        /* cards stand apart now, so they stop sharing a border */
        .revamp-cart-row + .revamp-cart-row {
            margin-top: 0;
        }

        .revamp-cart-row .revamp-saved-image {
            width: 122px;
            height: 109px;
            margin-left: 0;
        }

        /* keeps the name clear of the remove cross */
        .revamp-cart-row .revamp-saved-item {
            padding-right: 32px;
        }

        .theme-v2 .revamp-cart-row .revamp-saved-name {
            font-size: var(--ap-text-body);
            line-height: 19px;
        }

        .revamp-cart-row .revamp-qty,
        .theme-v2 .revamp-cart-row .revamp-saved-select {
            max-width: 143px;
        }

        .revamp-cart-row .revamp-saved-subtotal {
            font-size: var(--ap-text-link);
        }

            /* the column is headed Total on desktop; the frame names it on the card */
            .revamp-cart-row .revamp-saved-subtotal:before {
                content: "Subtotal: ";
            }

    /* --- the cards under it --- */

    .theme-v2 .revamp-cart-card h2.revamp-cart-card-title {
        margin: 0 0 12px;
        line-height: 32px;
    }

    /* --- Checkout on a phone (Figma "Shipping" 402x3451 and "Checkout" 402x2296) -------------
       One page in the markup, two screens in the frames. The first carries Contact Information,
       Billing, Shipping Address and Shipping Method; the second Payment, the two code boxes and
       the Order Summary. Both halves stay in the same form, so the step is only a class on the
       page. This frame is drawn on a 16 gutter. */

    .html-real-opc-page .master-wrapper-content {
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .html-real-opc-page .master-column-wrapper {
        padding: 0 16px;
    }

    .html-real-opc-page .page.checkout-page {
        max-width: none;
        margin: 0 0 48px;
    }

    /* the frame runs the screen name full width in a navy band and renames it per step */
    .html-real-opc-page .checkout-page > .page-title {
        margin: 0 -16px 20px;
        padding: 35px 16px;
        background-color: var(--ap-navy-deep) !important;
    }

    .html-real-opc-page .checkout-page > .page-title h1 {
        font-size: 0;
        line-height: 0;
        color: var(--ap-white);
    }

        .html-real-opc-page .checkout-page > .page-title h1:before {
            content: "Shipping" !important;
            font-size: var(--ap-text-section);
            line-height: var(--ap-text-section);
            font-weight: 400;
            color: var(--ap-white);
        }

    .html-real-opc-page .checkout-page.revamp-opc-step2 > .page-title h1:before {
        content: "Checkout" !important;
    }

    /* --- one column --- */
    .html-real-opc-page .page-body > .row {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

        .html-real-opc-page .page-body > .row > .col-md-8,
        .html-real-opc-page .page-body > .row > .col-md-4 {
            gap: 16px;
        }

    /* the plugin pins the right column open on desktop; on a phone it is just the second screen */
    .html-real-opc-page .page-body > .row > .col-md-4 > div {
        position: static !important;
        gap: 16px;
    }

    /* --- the step. Screen one is everything up to the button, screen two the rest. --- */
    .html-real-opc-page .checkout-page:not(.revamp-opc-step2) .payment-method-panel,
    .html-real-opc-page .checkout-page:not(.revamp-opc-step2) .page-body > .row > .col-md-4 {
        display: none;
    }

    .html-real-opc-page .checkout-page.revamp-opc-step2 .billing-address-panel,
    .html-real-opc-page .checkout-page.revamp-opc-step2 .shipping-address-panel,
    .html-real-opc-page .checkout-page.revamp-opc-step2 .estimate-shipping-panel,
    .html-real-opc-page .checkout-page.revamp-opc-step2 .shipping-method-panel,
    .html-real-opc-page .checkout-page.revamp-opc-step2 .attributes-panel,
    .html-real-opc-page .checkout-page.revamp-opc-step2 .revamp-opc-next {
        display: none;
    }

    /* --- cards --- */
    .html-real-opc-page .section,
    .html-real-opc-page .revamp-opc-group {
        padding: 20px;
    }

    .html-real-opc-page .section.billing-address,
    .html-real-opc-page .section.billing-address > .section-body,
    .html-real-opc-page .section.billing-address .form-fields {
        gap: 16px;
    }

    .html-real-opc-page .section-title,
    .html-real-opc-page .section-title.title {
        margin-bottom: 16px;
    }

        .html-real-opc-page .section-title strong,
        .html-real-opc-page .section-title.title strong {
            font-size: var(--ap-text-card);
            line-height: 32px;
        }

    /* every field is full width on a phone */
    .html-real-opc-page .revamp-opc-group-contact,
    .html-real-opc-page .revamp-opc-group-address {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
    }

        .html-real-opc-page .revamp-opc-group:before {
            line-height: 32px;
        }

    /* the plugin lays the address fields out with bootstrap columns of its own */
    .html-real-opc-page .section.shipping-address .form-fields > .row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
        margin: 0;
    }

    .html-real-opc-page .section.shipping-address .form-fields > .row > [class*="col-"] {
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 0;
        padding: 0;
        flex: none;
    }

    /* --- the checkbox pair the frame stacks under Billing --- */
    .html-real-opc-page .section.billing-address .form-fields > .row:last-child {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
    }

        .html-real-opc-page .section.billing-address .form-fields > .row:last-child > [class*="col-"] {
            width: auto;
            max-width: none;
            margin: 0;
            padding: 0;
            flex: none;
        }

    .html-real-opc-page .options label,
    .html-real-opc-page .pickup-in-store label {
        color: var(--ap-placeholder);
    }

    /* --- shipping method rows: a 20 circle, then the name over its description --- */
    .html-real-opc-page .section.shipping-method .method-list > li {
        grid-template-columns: 20px minmax(0, 1fr);
        column-gap: 12px;
        padding: 14px 0;
    }

    .html-real-opc-page .section.shipping-method .method-name {
        font-weight: 500;
    }

    .html-real-opc-page .section.shipping-method .method-description {
        font-size: var(--ap-text-fine);
        line-height: 20px;
    }

    /* --- the step button: the frame gives it the page width, not the card width --- */
    .html-real-opc-page .revamp-opc-next {
        display: block;
        width: 100%;
        height: 42px;
        margin: 0;
        padding: 0 20px;
        border: none;
        border-radius: var(--ap-radius);
        background-color: var(--ap-blue);
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-button);
        letter-spacing: var(--ap-tracking-button);
        text-transform: uppercase;
        color: var(--ap-white);
        cursor: pointer;
    }

    /* --- screen two --- */
    .html-real-opc-page .revamp-opc-summary {
        padding: 20px;
    }

    .html-real-opc-page .order-summary-content table tbody tr {
        grid-template-columns: 54px minmax(0, 1fr) max-content;
        grid-template-rows: auto auto auto;
        column-gap: 10px;
    }

    .html-real-opc-page .order-summary-content td.product-picture {
        width: 54px;
    }

        .html-real-opc-page .order-summary-content td.product-picture img {
            width: 54px;
        }

    .html-real-opc-page .section.payment-method .method-list {
        flex-direction: column;
        gap: 12px;
    }

    .light-theme .html-real-opc-page .section.payment-method input[type="text"],
    .html-real-opc-page .section.payment-method input[type="text"] {
        max-width: none;
    }

    .light-theme .html-real-opc-page .section.payment-method select,
    .html-real-opc-page .section.payment-method select {
        width: 100% !important;
    }

    /* a way back to the first screen, which the frame leaves to the browser */
    .html-real-opc-page .revamp-opc-back {
        display: none;
    }

    .html-real-opc-page .checkout-page.revamp-opc-step2 .revamp-opc-back {
        display: block;
        margin: 0 0 16px;
        padding: 0;
        border: none;
        background: none;
        font-family: var(--ap-font-body);
        font-size: var(--ap-text-body);
        line-height: var(--ap-leading-body);
        text-decoration: underline;
        color: var(--ap-blue);
        cursor: pointer;
    }

    /* --- phone: one field per row, and the step buttons come back --------------- */
    .html-real-opc-page .revamp-opc-group-address,
    .html-real-opc-page .revamp-opc-group-contact,
    .html-real-opc-page .section.shipping-address .form-fields > .row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
    }

        .html-real-opc-page .revamp-opc-group-address > [class*="col-"],
        .html-real-opc-page .revamp-opc-group-contact > [class*="col-"],
        .html-real-opc-page .section.shipping-address .form-fields > .row > [class*="col-"],
        .html-real-opc-page .revamp-opc-group-address > [class*="col-"]:nth-child(1),
        .html-real-opc-page .revamp-opc-group-address > [class*="col-"]:nth-child(2),
        .html-real-opc-page .revamp-opc-group-address > [class*="col-"]:nth-child(3),
        .html-real-opc-page .section.shipping-address .form-fields > .row > [class*="col-"]:nth-child(5),
        .html-real-opc-page .section.shipping-address .form-fields > .row > [class*="col-"]:nth-child(6),
        .html-real-opc-page .section.shipping-address .form-fields > .row > [class*="col-"]:nth-child(7) {
            grid-column: 1;
        }

    .html-real-opc-page .section.payment-method .method-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .html-real-opc-page .checkout-page:not(.revamp-opc-step2) .revamp-opc-next {
        display: block;
    }

    .html-real-opc-page .checkout-page.revamp-opc-step2 .revamp-opc-back {
        display: block;
    }

    /* the marker sits inside the card on a phone, where there is no column gap to hang in */
    .html-real-opc-page .inputs > .required {
        right: -12px;
    }

    /* the theme pads this wrapper 80 down on the checkout pages, which showed as a white band
       between the header and the navy title. The frame butts the title straight onto the nav. */
    .html-real-opc-page .master-wrapper-content {
        padding-top: 0;
    }

    /* the plugin marks its collapsible sections with a + on a phone; the frame has none */
    .html-real-opc-page .section-title:before,
    .html-real-opc-page .section-title:after,
    .html-real-opc-page .section-title.title:before,
    .html-real-opc-page .section-title.title:after {
        content: none !important;
        display: none !important;
    }

    /* --- Order Summary, Figma mobile "Checkout" 402x2296 -------------------------
       Card 370 holding a 330 column: a 84x75 picture, the name over its part number and
       quantity, and the line total at the top right. A rule closes each product. */
    .html-real-opc-page .revamp-opc-summary {
        padding: 18px;
    }

    .html-real-opc-page .order-summary-content table tbody tr {
        grid-template-columns: 82px minmax(0, 1fr) max-content;
        grid-template-rows: auto auto auto;
        column-gap: 10px;
        row-gap: 0;
        padding: 6px 0;
    }

    /* the theme indents the name cell, which put the part number 20 to its left */
    .html-real-opc-page .order-summary-content table tbody td {
        padding: 0 !important;
        text-indent: 0 !important;
    }

    /* the discount lines are not in the frame and were making this cell three lines tall,
       which dropped the total below the quantity instead of beside it */
    .html-real-opc-page .order-summary-content td.subtotal > div {
        display: none !important;
    }

    .html-real-opc-page .order-summary-content td.product-picture {
        width: 82px;
    }

        .html-real-opc-page .order-summary-content td.product-picture img {
            width: 82px;
            height: 73px;
            object-fit: contain;
            border-radius: var(--ap-radius);
        }

    /* the plugin names each cell in a label for its own stacked view; the frame does not
       print "Total:" or "Quantity:" */
    .html-real-opc-page .order-summary-content .td-title {
        display: none !important;
    }

    /* the frame runs the name and the part number the full width beside the picture, then
       closes the row with the quantity on the left and the line total on the right */
    .html-real-opc-page .order-summary-content td.product {
        grid-column: 2 / -1;
        grid-row: 1;
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: 15px;
        line-height: 19px;
        text-transform: uppercase;
    }

        /* the theme indents this link, which left the name off the part number below it */
        .html-real-opc-page .order-summary-content td.product .product-name {
            display: block;
            margin: 0;
            padding: 0;
            text-indent: 0;
            font: inherit;
            text-transform: inherit;
            color: var(--ap-blue);
            text-decoration: none;
        }

    .html-real-opc-page .order-summary-content td.sku {
        grid-column: 2 / -1;
        grid-row: 2;
        font-family: var(--ap-font-body);
        font-weight: 400;
        font-size: 15px;
        line-height: 19px;
    }

    .html-real-opc-page .order-summary-content td.quantity {
        grid-column: 2;
        grid-row: 3;
        align-self: center;
        align-items: center;
        gap: 4px;
        min-height: 0;
        font-family: var(--ap-font-body);
        font-weight: 400;
        font-size: 15px;
        line-height: 19px;
    }

        /* angular wraps the control in a div of its own */
        .html-real-opc-page .order-summary-content td.quantity > div {
            display: flex;
            align-items: center;
            margin: 0;
            padding: 0;
            line-height: 19px;
        }

        /* kept editable, but drawn as the plain "QTY: 2" the frame shows */
        .light-theme .html-real-opc-page .order-summary-content td.quantity input,
        .html-real-opc-page .order-summary-content td.quantity input,
        .light-theme .html-real-opc-page .order-summary-content td.quantity select,
        .html-real-opc-page .order-summary-content td.quantity select {
            width: 42px !important;
            min-width: 0;
            height: 20px !important;
            min-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            border-bottom: 1px solid var(--ap-border) !important;
            border-radius: 0 !important;
            background: none !important;
            box-shadow: none !important;
            font-family: var(--ap-font-body) !important;
            font-size: 15px !important;
            line-height: 19px !important;
            text-align: left;
            vertical-align: top;
            display: block;
            color: var(--ap-blue) !important;
        }

    .html-real-opc-page .order-summary-content td.subtotal {
        grid-column: 3;
        grid-row: 3;
        align-self: center;
        font-family: var(--ap-font-heading);
        font-weight: 600;
        font-size: var(--ap-text-link);
        line-height: 19px;
        text-align: right;
        white-space: nowrap;
        color: var(--ap-blue);
    }

    /* --- totals: the frame sets the label light and the figure heavy ------------- */
    .html-real-opc-page .order-totals-panel table td {
        font-size: var(--ap-text-body);
        line-height: 24px;
    }

    .html-real-opc-page .order-totals-panel table td.cart-total-right {
        font-size: var(--ap-text-link);
        font-weight: 600;
    }

    /* --- About Us (Figma mobile "About Us" 402x9446) ---------------------------
       The desktop page is built on the 65 narrow gutter; the phone frame draws every section
       on 16. Each section already reads the token, so the page redefines it rather than
       restating a padding per section. The page itself goes full bleed so the sections that
       break out on desktop stay put. */

    .revamp-about {
        --ap-gutter-narrow: 16px;
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }

    /* --- hero ---
       `cover` on a hero this tall blew the photograph up until one aircraft filled the band.
       The frame draws it at 515 across a 402 page - a shade wider than the screen, both planes
       whole - so the width is set and the height follows the picture. */
    .revamp-about-hero {
        padding: 40px 0 56px;
        background-size: 100% auto, 100% 900px;
        background-position: 50% 310px, 0% 560px;
        background-repeat: no-repeat, no-repeat;
    }

    .theme-v2.revamp-about h1.revamp-about-hero-title {
        font-size: 21px !important;
        line-height: 26px !important;
    }

    .revamp-about-hero-sub {
        font-size: var(--ap-text-body);
        line-height: 22px;
    }

    /* --- intro ---
       The desktop rule pushes this down a viewport-derived distance so it lands on the faded
       part of the photo. At phone width that resolves into the bright fuselage and the copy
       became unreadable, so the frame's own gradient is carried on this block instead and it
       starts just under the photo band. */
    .revamp-about-intro {
        margin-top: 372px;
        padding-top: 40px;
        padding-bottom: 40px;
        background: none;
    }

    .theme-v2.revamp-about h2.revamp-about-intro-title {
        font-size: 24px !important;
        line-height: 28px !important;
    }

    .revamp-about-intro-copy,
    .revamp-about-intro-copy p {
        font-size: var(--ap-text-body);
        line-height: 22px;
    }

    .revamp-about-intro-copy p {
        margin: 0 0 16px;
    }

    /* the frame gives this the width of the column, not its own content */
    .theme-v2 a.revamp-about-expert,
    .revamp-about-expert {
        display: flex;
        width: 100%;
        height: auto;
        padding: 12px 24px;
        border-radius: 6px;
    }

    /* --- testimonials ---
       the frame pages this with the dots under the card; the desktop arrows sat on top of the
       heading once it wrapped */
    .revamp-about-voices-nav {
        display: none;
    }

    .revamp-about-voices-head {
        font-size: 26px;
        line-height: 30px;
    }

    /* the frame shows the three reviews stacked, not one card of a side-scroller */
    .revamp-about-voices-track {
        flex-direction: column;
        gap: 16px;
        overflow-x: visible;
    }

    /* one card fills the screen, so the dots below it read as the pager the frame draws */
    .revamp-about-voice {
        flex: 0 0 auto;
        width: auto;
        min-height: 0;
        padding: 20px;
        border-radius: 8px;
    }

    /* --- meet the team --- */
    /* the frame grounds this section in the page grey, with the top corners rounded */
    .revamp-about-team {
        padding: 40px 0 56px;
        border-radius: var(--ap-radius) var(--ap-radius) 0 0;
        background-color: var(--ap-page-bg);
    }

    .revamp-about-team-title {
        font-size: var(--ap-text-title);
        line-height: 32px;
        color: var(--ap-header);
    }

    /* the desktop grid squares every row to the tallest member card, which left 169 of empty
       ground under the contact form - the last cell in the grid - before the footer */
    .revamp-about-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        gap: 16px;
    }

    .revamp-about-member {
        width: auto;
        border-radius: var(--ap-radius);
    }

    .revamp-about-member-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 326 / 380;
        border-radius: 6px;
    }

    .revamp-about-member-name {
        font-size: var(--ap-text-body);
        line-height: 22px;
    }

    .revamp-about-member-role {
        font-size: var(--ap-text-body);
        line-height: 22px;
    }

    .revamp-about-member-bio {
        font-size: var(--ap-text-body);
        line-height: 22px;
    }

    /* --- contact --- */
    .revamp-about-contact {
        width: auto;
        margin-bottom: 0;
        padding: 28px 12px;
        border-radius: var(--ap-radius);
    }

    /* the desktop run-out left 225 of empty ground between the form and the footer */
    .revamp-about-team {
        padding-bottom: 40px;
    }

        .revamp-about-team > *:last-child,
        .revamp-about-grid + * {
            margin-bottom: 0;
        }

    .revamp-about-contact-title {
        font-size: var(--ap-text-title);
        line-height: 32px;
    }

    .revamp-about-form {
        width: 100%;
    }

    .light-theme .revamp-about-form input[type="text"],
    .light-theme .revamp-about-form input[type="email"],
    .light-theme .revamp-about-form select,
    .revamp-about-form input[type="text"],
    .revamp-about-form input[type="email"],
    .revamp-about-form select {
        width: 100% !important;
        height: var(--ap-control-height) !important;
        min-height: var(--ap-control-height);
        padding: 0 14px !important;
        border: 1px solid var(--ap-border) !important;
        border-radius: var(--ap-radius) !important;
        background-color: var(--ap-page-bg) !important;
        box-sizing: border-box !important;
        font-family: var(--ap-font-body) !important;
        font-size: var(--ap-text-fine) !important;
        color: var(--ap-blue) !important;
    }

    .light-theme .revamp-about-form textarea,
    .revamp-about-form textarea {
        width: 100% !important;
        height: 140px !important;
        padding: 12px 14px !important;
        border: 1px solid var(--ap-border) !important;
        border-radius: var(--ap-radius) !important;
        background-color: var(--ap-page-bg) !important;
        box-sizing: border-box !important;
        font-family: var(--ap-font-body) !important;
        font-size: var(--ap-text-fine) !important;
        color: var(--ap-blue) !important;
    }

        .revamp-about-form input::placeholder,
        .revamp-about-form textarea::placeholder {
            font-size: var(--ap-text-fine);
            color: var(--ap-placeholder);
        }

    .theme-v2 button.revamp-about-send,
    .theme-v2 .revamp-about-send,
    .revamp-about-send {
        width: 100%;
        height: 44px;
        border-radius: var(--ap-radius);
        background-color: var(--ap-blue);
        font-family: var(--ap-font-heading);
        font-weight: 700;
        font-size: var(--ap-text-badge-lg);
        letter-spacing: var(--ap-tracking-button);
        text-transform: uppercase;
        color: var(--ap-white);
    }

    /* --- Order details on a phone: one column, and the tables keep their own scroll rather
           than forcing the page sideways --- */
    /* the theme gives this wrapper a percentage side margin that sat inside the page gutter */
    .html-order-details-page .master-wrapper-content {
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-top: 0;
    }

    .html-order-details-page .master-column-wrapper {
        padding: 0 var(--ap-gutter-mobile-tight);
    }

    .html-order-details-page .page.order-details-page {
        margin: 24px 0 48px;
    }

    .html-order-details-page .order-details-page > .page-title h1 {
        font-size: var(--ap-text-subtitle);
        line-height: 32px;
    }

    .html-order-details-page .order-overview,
    .html-order-details-page .billing-info,
    .html-order-details-page .shipping-info,
    .html-order-details-page .order-details-area .section {
        padding: 20px 17px;
    }

    .html-order-details-page .billing-info-wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-bottom: 16px;
    }

    .html-order-details-page .order-overview {
        margin-bottom: 16px;
    }

    .html-order-details-page .order-overview-content {
        flex-direction: column;
        gap: 6px;
    }

    .html-order-details-page .order-number strong,
    .html-order-details-page .title strong {
        font-size: var(--ap-text-link);
        line-height: 24px;
    }

    /* a table of five columns will not fit 361, so each scrolls inside its own section */
    .html-order-details-page .section,
    .html-order-details-page .order-details-area {
        margin-bottom: 16px;
    }

    .html-order-details-page .data-table,
    .html-order-details-page table.cart {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

        .html-order-details-page .data-table thead th,
        .html-order-details-page table.cart thead th,
        .html-order-details-page .data-table tbody td,
        .html-order-details-page table.cart tbody td {
            padding: 12px 14px;
            font-size: var(--ap-text-fine);
            line-height: 20px;
        }

    .html-order-details-page .cart-total {
        margin-top: 16px;
    }

    .html-order-details-page .actions {
        margin-top: 16px;
    }

        .html-order-details-page .actions > * {
            flex: 1 1 auto;
        }

    /* --- order details on a phone: one column of cards, buttons across the width --- */
    .html-order-details-page .order-details-area {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 12px;
    }

        .html-order-details-page .order-details-area .billing-info-wrap > *,
        .html-order-details-page .order-details-area .shipping-info-wrap > * {
            padding: 16px 17px;
        }

    .html-order-details-page .order-overview {
        padding: 16px 17px;
        margin-bottom: 12px;
    }

    .html-order-details-page .page-body > .section {
        margin-bottom: 12px;
    }

    .html-order-details-page .total-info .cart-total {
        width: 100%;
        min-width: 0;
    }

    .html-order-details-page .actions {
        justify-content: stretch;
        gap: 8px;
    }

        .light-theme .html-order-details-page .actions .button-1,
        .html-order-details-page .actions .button-1,
        .light-theme .html-order-details-page .actions .button-2,
        .html-order-details-page .actions .button-2 {
            flex: 1 1 auto !important;
            padding: 0 12px;
        }

    /* the title row keeps its two links beside the heading rather than wrapping oddly */
    .html-order-details-page .order-details-page > .page-title {
        gap: 8px;
    }

        .html-order-details-page .order-details-page > .page-title h1 {
            flex: 1 1 100%;
        }

        .html-order-details-page .order-details-page > .page-title .button-2 {
            height: 36px;
            padding: 0 14px;
            font-size: var(--ap-text-badge-lg);
        }
}