/*
 * Page: GT Performance Parts
 * Scope: body.gtm-perf-parts — the gt-performance-parts category archive and any
 *        product filed under it. Enqueued from inc/perf-pages.php.
 *
 * This is a SKIN, not a second shop. The markup, the filter shelf, the AJAX
 * facets, the sort and the pagination are the parts shop's own, unchanged; every
 * rule here only restates a surface in the Performance materials so a part opens
 * on a page made of the same stuff as the workshop that made it.
 *
 * Two materials, used consistently and for different jobs:
 *   CARBON  — the page ground and the filter shelf. It recedes.
 *   PLATE   — the machined surface, for things that hold content (cards, panels).
 * Anything that was white or light grey becomes one of those two; anything that
 * was dark ink becomes light. Nothing is a new colour invented for this page.
 */

body.gtm-perf-parts {
    --pp-line: rgba(255, 255, 255, .10);
    --pp-line-strong: rgba(255, 255, 255, .18);
    --pp-ink: #ffffff;
    --pp-ink-soft: rgba(255, 255, 255, .72);
    --pp-ink-muted: rgba(255, 255, 255, .55);
    --pp-accent: #FFC424;
}

/* --- The page ground -------------------------------------------------------
   .gtm-plp shipped an opaque #e2e2e2, which covered the carbon.
   It goes TRANSPARENT and lets the body's weave through — the same thing
   perf-eng.css already does to .gtm-bg-white / .gtm-bg-grey on these pages.
   The body carries the real texture because gtm_is_perf_parts() adds the
   gtm-perf-page class, so there is nothing to re-declare here.

   An earlier pass hand-rolled a 45deg crosshatch instead. That was wrong: the
   real carbon is a 2x2 twill built from six gradients at 27deg/207deg on a 20px
   tile, held in --gtm-carbon-image precisely so every carbon surface paints the
   identical stack. A second, similar-looking texture is exactly the drift that
   variable exists to prevent. */
body.gtm-perf-parts .gtm-plp {
    background: transparent;
    color: var(--pp-ink-soft);
}

body.gtm-perf-parts .gtm-plp__eyebrow {
    color: var(--pp-ink-muted);
}

body.gtm-perf-parts .gtm-plp__title {
    color: var(--pp-ink);
}

body.gtm-perf-parts .gtm-plp__sub {
    color: var(--pp-ink-soft);
}

/* Breadcrumbs run above the shelf on the same ground. */
body.gtm-perf-parts .woocommerce-breadcrumb,
body.gtm-perf-parts .woocommerce-breadcrumb a,
body.gtm-perf-parts .gtm-breadcrumb,
body.gtm-perf-parts .gtm-breadcrumb a {
    color: var(--pp-ink-muted);
}

body.gtm-perf-parts .woocommerce-breadcrumb a:hover,
body.gtm-perf-parts .gtm-breadcrumb a:hover {
    color: var(--pp-ink);
}

/* --- The filter shelf ------------------------------------------------------
   The one panel the brief named: carbon, not white. It is a tool rather than
   content, so it stays quieter than the cards it filters — plate would make it
   compete with them. */
/* A translucent tint over the weave rather than a second texture: the carbon
   still reads through it, so the shelf sits ON the page instead of being a
   different material laid on top of it. */
body.gtm-perf-parts .gtm-filter-shelf,
body.gtm-perf-parts .gtm-plp-filters {
    background: rgba(255, 255, 255, .045);
    backdrop-filter: brightness(.85);
    border: 1px solid var(--pp-line);
    color: var(--pp-ink-soft);
}

/* The head was a yellow band with dark ink. Yellow on carbon is the page's one
   accent and is spent on the ACTIVE state below, so the head is plate with a
   rule under it and the accent is kept for what is switched on. */
body.gtm-perf-parts .gtm-plp-filters__head {
    background: rgba(255, 255, 255, .05);
    border-bottom: 1px solid var(--pp-line);
    color: var(--pp-ink);
}

body.gtm-perf-parts .gtm-plp-filters__title {
    color: var(--pp-ink);
}

body.gtm-perf-parts .gtm-plp-filters__count {
    background: var(--pp-accent);
    color: #111;
}

body.gtm-perf-parts .gtm-reset-btn {
    color: var(--pp-ink-muted);
}

body.gtm-perf-parts .gtm-reset-btn:hover,
body.gtm-perf-parts .gtm-reset-btn:focus-visible {
    color: var(--pp-accent);
}

/* THE FILTER SHELF'S OWN TOKENS.

   parts-shop.css defines a light palette on .gtm-filter-shelf-parts and every
   rule in that file reaches for it. Re-inking the components one at a time left
   the palette itself light underneath, so any rule nobody happened to hover
   kept rendering a light value on carbon -- which is how a hovered option row
   came out #F4F2F0 with white lettering on it.

   Only the surface, line and muted-ink tokens are redefined here. --p-ink is
   deliberately left alone: parts-shop.css uses it as a FILL as well as an ink
   (the checked box, the checked size pill, the filter count badge), so flipping
   it to white would turn those into white on white -- the same bug, moved. The
   rules that use it as ink are overridden individually below. */
body.gtm-perf-parts .gtm-filter-shelf-parts {
    --p-hover: rgba(255, 255, 255, .06);   /* was #F4F2F0 */
    --p-line: var(--pp-line);
    --p-line-2: var(--pp-line-strong);
    --p-muted: var(--pp-ink-muted);
    --p-disabled: rgba(255, 255, 255, .34);
}
body.gtm-perf-parts .gtm-fgroup {
    border-color: var(--pp-line);
}

body.gtm-perf-parts .gtm-fgroup__toggle,
body.gtm-perf-parts .gtm-filter-label {
    color: var(--pp-ink);
}

/* The light shelf lifts a hovered group with a near-white wash (#faf9fa). On the
   dark skin that wash is the same value as the label ink, so the group name
   disappears the moment it is hovered. Same idiom, inverted value. */
body.gtm-perf-parts .gtm-fgroup__toggle:hover,
body.gtm-perf-parts .gtm-fgroup__toggle:focus-visible {
    background: rgba(255, 255, 255, .06);
}

body.gtm-perf-parts .gtm-fgroup__meta,
body.gtm-perf-parts .gtm-fgroup__hint {
    color: var(--pp-ink-muted);
}

body.gtm-perf-parts .gtm-fgroup__chev {
    color: var(--pp-ink-muted);
}

/* Search box */
body.gtm-perf-parts .gtm-parts-search__input {
    background: rgba(0, 0, 0, .35);
    border: 1px solid var(--pp-line);
    color: var(--pp-ink);
}

body.gtm-perf-parts .gtm-parts-search__input::placeholder {
    color: rgba(255, 255, 255, .42);
}

body.gtm-perf-parts .gtm-parts-search__input:focus {
    border-color: var(--pp-accent);
    outline: 2px solid rgba(255, 196, 36, .35);
    outline-offset: -1px;
}

/* Options: the checkbox box has to be visible on carbon, which a light-grey
   border is not. */
body.gtm-perf-parts .gtm-parts-opt__label {
    color: var(--pp-ink-soft);
}

body.gtm-perf-parts .gtm-parts-opt:hover .gtm-parts-opt__label {
    color: var(--pp-ink);
}

body.gtm-perf-parts .gtm-parts-opt__count {
    color: rgba(255, 255, 255, .42);
}
/* The empty values are the point on this shelf: they show a customer that his
   machine is covered on a day when no part for it happens to be listed. So the
   disabled state is the common case here, not a rare edge, and it has to read
   as 'nothing here yet' at a glance while staying legible.

   The light shelf greys the label and fills the box with #f6f5f4. On carbon
   that near-white box reads as a TICKED checkbox, which is the opposite of what
   it means. */
body.gtm-perf-parts .gtm-parts-opt.is-disabled .gtm-parts-opt__label {
    color: rgba(255, 255, 255, .46);
}

body.gtm-perf-parts .gtm-parts-opt.is-disabled .gtm-parts-opt__count {
    color: rgba(255, 255, 255, .30);
}

body.gtm-perf-parts .gtm-parts-opt.is-disabled .gtm-parts-opt__box {
    background: rgba(0, 0, 0, .25);
    border-color: rgba(255, 255, 255, .07);
}

body.gtm-perf-parts .gtm-parts-opt__box {
    background: rgba(0, 0, 0, .35);
    border-color: var(--pp-line-strong);
}

body.gtm-perf-parts .gtm-parts-opt__input:checked + .gtm-parts-opt__box {
    background: var(--pp-accent);
    border-color: var(--pp-accent);
}

body.gtm-perf-parts .gtm-parts-opt__input:focus-visible + .gtm-parts-opt__box {
    outline: 2px solid var(--pp-accent);
    outline-offset: 2px;
}

/* A colour swatch needs a ring on carbon or a black swatch disappears. */
body.gtm-perf-parts .gtm-parts-opt__sw {
    box-shadow: 0 0 0 1px var(--pp-line-strong);
}

/* Price range */
body.gtm-perf-parts .gtm-range-group,
body.gtm-perf-parts .gtm-range-wrapper {
    color: var(--pp-ink-soft);
}

body.gtm-perf-parts .gtm-range-wrapper input[type="range"] {
    accent-color: var(--pp-accent);
}

/* --- Results bar: count, sort, active chips -------------------------------- */
body.gtm-perf-parts .gtm-plp__resultbar,
body.gtm-perf-parts .gtm-plp__count,
body.gtm-perf-parts .gtm-plp__sortlabel {
    color: var(--pp-ink-soft);
}

body.gtm-perf-parts .gtm-plp__body select,
body.gtm-perf-parts .gtm-plp select {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--pp-line);
    color: var(--pp-ink);
}

/* The rule above dresses a select for plate. Two surfaces it does not reach,
   and both render its white ink on white.

   1. The sort control lives in .gtm-plp-resultsbar, which stays an opaque WHITE
      panel on this page: the token overrides further down are scoped to
      .gtm-plp-drawer, so inside .gtm-plp the --plp-panel from shop-plp.css
      (#ffffff) still applies. The bar's own text is styled for that white -- the
      result count resolves to --plp-ink-2 / #5c5c5c and reads correctly -- so the
      select is the outlier here, not the bar. Left to the plate rule it is white
      on white: the chosen value vanishes and only the chevron is left.

   2. A native <option> list is drawn by the OS popup, which never inherits the
      surface the closed control sits on, and a translucent background composites
      over the popup's own white. So ink that is correct on plate becomes white on
      white the moment the list opens. The theme states option colours nowhere
      else, which is why this is spelled out rather than left to inheritance. */
body.gtm-perf-parts .gtm-plp-resultsbar select {
    background: #fff;
    border: 1px solid var(--plp-border, #DFDFDF);
    color: var(--plp-primary, #342E37);
}

body.gtm-perf-parts .gtm-plp select option,
body.gtm-perf-parts .gtm-plp-drawer select option {
    background: #fff;
    color: #342E37;
}

/* Three more places the light shelf's ink was never ported to plate. Each was
   #342E37 or #5F5A61 on #19181E -- 1.34 and 2.62 -- so the first two were not
   dim but genuinely invisible. The price-range figures are the ones that
   matter: a price filter whose numbers cannot be read is not a filter.

   All three take tokens that already exist rather than new colours, so they
   stay on the plate ramp: --pp-ink 17.6:1 for the values that carry meaning,
   --pp-ink-soft 9.5:1 for a secondary affordance, --pp-ink-muted ~6:1 for a
   control that should stay quiet but legible. The disabled option counts are
   deliberately left alone: perf-parts.css already dims them to
   rgba(255,255,255,.3), and a disabled control reading faint is the point. */
body.gtm-perf-parts .gtm-plp-filters .gtm-num-display,
body.gtm-perf-parts .gtm-num-display {
    color: var(--pp-ink);
}

body.gtm-perf-parts .gtm-parts-more__txt {
    color: var(--pp-ink-soft);
}

body.gtm-perf-parts .gtm-parts-chip--clear {
    color: var(--pp-ink-muted);
}

/* Same trap perf-eng.css:1473 already documents once: body.gtm-perf-page h2
   forces white, which is right on carbon and wrong on anything light. The
   mobile filter drawer's head is the brand yellow (#FFC424, shop-plp.css:820)
   and sets color:#342E37 for it; shop-plp deliberately leaves its h2 colourless
   so it inherits that. The blanket rule overrode the inheritance, so the drawer
   title read white on yellow -- 1.59, which is not legible.

   inherit rather than a literal, so it keeps tracking the head's own ink if
   that panel is ever re-themed. */
body.gtm-perf-parts .gtm-plp-drawer__head h2 {
    color: inherit;
}

body.gtm-perf-parts .gtm-chip,
body.gtm-perf-parts .gtm-plp__chip {
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--pp-line);
    color: var(--pp-ink);
}

/* --- The cards -------------------------------------------------------------
   Plate, so they lift off the carbon ground. The product photograph keeps its
   own white field: these are parts shot on white, and dropping them onto a dark
   tile would either need a cut-out for every one or leave a bright rectangle
   floating in a dark card. A framed white field is the honest answer. */
/* Cards hold content, so they are plate too — the same metal as the buy card
   they lead to. The filter shelf stays a carbon tint on purpose: it is a tool,
   it should recede, and making everything plate would flatten the distinction
   the two materials exist to draw. */
body.gtm-perf-parts .gtm-card-parts-v2,
body.gtm-perf-parts .gtm-plp-grid .card {
    background-color: var(--gtm-plate-base, #08080b);
    background-image: var(--gtm-plate-image);
    box-shadow: var(--gtm-plate-shadow);
    border: 1px solid var(--pp-line);
    color: var(--pp-ink);
}

body.gtm-perf-parts .gtm-card-parts-v2:hover,
body.gtm-perf-parts .gtm-plp-grid .card:hover {
    border-color: rgba(255, 196, 36, .48);
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .85);
}

body.gtm-perf-parts .gtm-card-parts-v2 .gtm-card-title,
body.gtm-perf-parts .gtm-plp-grid .gtm-card-title,
body.gtm-perf-parts .parts-card-top a {
    color: var(--pp-ink);
}

body.gtm-perf-parts .parts-card-bottom {
    border-top: 1px solid var(--pp-line);
}

body.gtm-perf-parts .gtm-price,
body.gtm-perf-parts .woocommerce-Price-amount {
    color: var(--pp-ink);
}

body.gtm-perf-parts .gtm-pill {
    background: rgba(255, 255, 255, .10);
    border: 1px solid var(--pp-line-strong);
    color: var(--pp-ink);
}

body.gtm-perf-parts .gtm-cta {
    background: var(--pp-accent);
    border-color: var(--pp-accent);
    color: #111;
}

body.gtm-perf-parts .gtm-cta:hover,
body.gtm-perf-parts .gtm-cta:focus-visible {
    background: #ffd45a;
}

/* --- The single part page --------------------------------------------------
   Same materials, so a part opens on a page made of what the shelf was made of. */
body.gtm-perf-parts.single-product .site-main,
body.gtm-perf-parts.single-product .gtm-pdp,
body.gtm-perf-parts.single-product .gtm-pdp-main {
    background: transparent;   /* the body's weave, same as the shelf */
    color: var(--pp-ink-soft);
}

/* NO blanket ink rule here. An earlier pass set every h1/h2/h3/p on the product
   page to white, which was wrong twice over: it painted text white on panels that
   were still light (white on white, measured 1.0:1), and it reached the light
   EXPLORE cards at the foot of the page, which are meant to be light and carry
   dark ink. Ink is set per surface below, alongside the surface it sits on, so
   the two can never disagree again. */

/* The product title and price sit directly on the carbon. */
body.gtm-perf-parts.single-product .product_title,
body.gtm-perf-parts.single-product .gtm-pdp-title,
body.gtm-perf-parts.single-product .gtm-pdp-price,
body.gtm-perf-parts.single-product .price,
body.gtm-perf-parts.single-product .woocommerce-Price-amount {
    color: var(--pp-ink);
}

/* The USP line keeps a #555 meant for a white page: invisible on carbon. */
body.gtm-perf-parts .gtm-pdp-usp,
body.gtm-perf-parts .gtm-pdp-usp * {
    color: var(--pp-ink-soft);
}

/* --- The PDP's own panels --------------------------------------------------
   Each takes the plate tint AND its ink in the same block, so a panel can never
   be re-grounded without its text coming with it. */
/* PLATE, not a carbon tint. The system says carbon is the ground and plate is
   the machined surface for things that HOLD content, and these panels hold the
   price, the action and the description — the most important content on the
   page. A tinted patch of the ground says "slightly different ground"; the
   plate says "a machined part sitting on it", which is the intent.
   Painted from --gtm-plate-image, so it is the same metal as the bands on the
   Performance pages rather than a fourth thing that resembles them. */
body.gtm-perf-parts .gtm-buycard,
body.gtm-perf-parts .gtm-pdp-desc2 {
    background-color: var(--gtm-plate-base, #08080b);
    background-image: var(--gtm-plate-image);
    box-shadow: var(--gtm-plate-shadow);
    border-color: var(--pp-line);
}

/* The description head is the same plate, so the panel is one piece of metal
   rather than a lid on a box.
   That also means its padding has to be re-cut. The head (18px 48px) and body
   (40px 48px 8px) were tuned as two stacked BANDS with a colour change between
   them; once they became one surface those paddings added into 58px of dead
   space between the heading and its own paragraph, while the foot of the panel
   was left on 9px. Measured: 19 top / 59 middle / 9 bottom.
   Re-cut as one block so the heading sits with the text it introduces and the
   panel is evenly inset: roughly 26 / 14 / 30. */
body.gtm-perf-parts .gtm-pdp-desc2__head {
    background: transparent;
    border: 0;
    padding: 26px 48px 0;
}

body.gtm-perf-parts .gtm-pdp-desc2__body {
    padding: 14px 48px 30px;
}

@media (max-width: 767.98px) {
    body.gtm-perf-parts .gtm-pdp-desc2__head {
        padding: 20px 22px 0;
    }

    body.gtm-perf-parts .gtm-pdp-desc2__body {
        padding: 12px 22px 24px;
    }
}

body.gtm-perf-parts .gtm-pdp-desc2__head {
    border-bottom: 1px solid var(--pp-line);
}

body.gtm-perf-parts .gtm-buycard,
body.gtm-perf-parts .gtm-buycard p,
body.gtm-perf-parts .gtm-buycard li,
body.gtm-perf-parts .gtm-buycard span:not(.gtm-btn):not([class*="icon"]),
body.gtm-perf-parts .gtm-pdp-desc2,
body.gtm-perf-parts .gtm-pdp-desc2 p,
body.gtm-perf-parts .gtm-pdp-desc2 li,
body.gtm-perf-parts .gtm-pdp-desc2 h2,
body.gtm-perf-parts .gtm-pdp-desc2 h3 {
    color: var(--pp-ink-soft);
}

body.gtm-perf-parts .gtm-buycard .gtm-pdp-price,
body.gtm-perf-parts .gtm-pdp-desc2 h2,
body.gtm-perf-parts .gtm-pdp-desc2 h3 {
    color: var(--pp-ink);
}

/* Breadcrumb pills carry the light-page grey. */
body.gtm-perf-parts .gtm-breadcrumbs__link {
    background: rgba(255, 255, 255, .08);
    color: var(--pp-ink-soft);
}

body.gtm-perf-parts .gtm-breadcrumbs__link:hover {
    color: var(--pp-ink);
}

/* The EXPLORE rows at the foot of the page are deliberately light components
   (the yellow Bikes-in-Stock tile, the white Legends card). They are left
   completely alone — nothing above reaches inside them. */

/* The buy column is the one thing that must not recede: plate, ruled, lifted. */
/* The wrapper holds the buy card, which is now the plate. Two nested panels read
   as a box inside a box, so this one drops its own ground and border.
   It KEEPS its 24px left pad: that is the gutter between the gallery and the buy
   column, not decoration, and zeroing it pulled the two columns together and made
   the whole page read tighter than the standard product page. Only the surface
   is removed here; the spacing is the theme's and stays. */
body.gtm-perf-parts.single-product .gtm-pdp-summary-wrapper,
body.gtm-perf-parts.single-product .summary.entry-summary {
    background: transparent;
    border: 0;
}

body.gtm-perf-parts.single-product .woocommerce-tabs .tabs,
body.gtm-perf-parts.single-product .woocommerce-tabs .panel {
    background: transparent;
    border-color: var(--pp-line);
    color: var(--pp-ink-soft);
}

body.gtm-perf-parts.single-product .woocommerce-tabs .tabs li a {
    color: var(--pp-ink-muted);
}

body.gtm-perf-parts.single-product .woocommerce-tabs .tabs li.active a {
    color: var(--pp-ink);
    border-bottom-color: var(--pp-accent);
}

/* Product photography stays on its own white field, framed, for the reason in
   the cards note above. */
body.gtm-perf-parts.single-product .woocommerce-product-gallery__image,
body.gtm-perf-parts.single-product .gtm-pdp-gallery img {
    background: #fff;
    border-radius: 10px;
}

/* --- Enquiry, not checkout -------------------------------------------------
   These parts are made to order, so the buy control is an enquiry and the note
   under it says why. Sized like the buy button it replaces so the buy column
   keeps its rhythm. */
body.gtm-perf-parts .gtm-perf-part-cta {
    margin-top: 18px;
}

body.gtm-perf-parts .gtm-perf-part-cta .gtm-btn {
    width: 100%;
    justify-content: center;
}

body.gtm-perf-parts .gtm-perf-part-cta__note {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pp-ink-muted);
}

/* --- The header fade -------------------------------------------------------
   .hero-secondary__bg::after fades the photograph to WHITE at the bottom, which
   is right where it was designed to sit: above the light shop page. On carbon it
   drew a bright band across the join and cut the hero off from the page instead
   of joining it to one.
   Fade to the carbon instead, and start it higher so the hand-off is a blend
   rather than an edge. The dark overlay underneath is kept — the title still has
   to hold over whatever the photograph is doing. */
body.gtm-perf-parts .hero-secondary__bg::after {
    background:
        linear-gradient(180deg,
            rgba(15, 14, 20, 0) 55%,
            rgba(15, 14, 20, .55) 78%,
            rgba(15, 14, 20, .88) 92%,
            var(--gtm-carbon-base, #0f0e14) 100%),
        linear-gradient(0deg, rgba(0, 0, 0, .48) 0%, rgba(0, 0, 0, .48) 100%);
}

/* The section itself sits on the carbon so there is no seam if the fade and the
   page ever disagree by a pixel. */
body.gtm-perf-parts .hero-secondary {
    background-color: var(--gtm-carbon-base, #0f0e14);
}


/* --- The masthead strip ----------------------------------------------------
   The logo-and-phone bar sits above the hero and is white on every other page,
   because the GT wordmark is full-colour artwork drawn for a light ground. Left
   to the carbon it lost the strip that frames it and the marque read as floating
   on the page. White here, matching the standard product page exactly.
   The sticky nav below it is already white and is untouched. */
body.gtm-perf-parts .mast {
    background: #ffffff;
}

/* ==========================================================================
   THE MOBILE FILTER DRAWER

   Below 992px page-parts-shop.js MOVES the filter form (it does not clone it)
   out of the sidebar and into .gtm-plp-drawer. The form carries its classes
   with it, so every component override above still applies inside the sheet.
   What did NOT come with it was the surface: the drawer's own background comes
   from the light shop, so the skin's white labels landed on an #E2E2E2 sheet at
   about 1.06:1, and the sidebar token block travelled in and painted the
   dividers rgba(255,255,255,.10) on top of that. Most of the list was invisible,
   because most values are legitimately empty and therefore disabled.

   Third time this shape of bug has appeared here: the skin re-inks the
   components but leaves the surface underneath them light. So this claims the
   surface. Plate rather than carbon, because a drawer is a thing that HOLDS
   content, which is the distinction the two materials exist to make.

   --plp-primary is deliberately NOT redefined. shop-plp.css:64 uses it as a
   background as well as an ink, so flipping it to white would move the bug
   rather than fix it -- the same reason --p-ink is left alone above.
   ========================================================================== */
body.gtm-perf-parts .gtm-plp-drawer {
    --plp-page: var(--gtm-plate-base, #08080b);
    --plp-panel: transparent;
    --plp-border: var(--pp-line-strong);
    --plp-text: var(--pp-ink-soft);
    --plp-ink-2: var(--pp-ink-muted);
    --plp-ink-3: rgba(255, 255, 255, .42);

    background-color: var(--gtm-plate-base, #08080b);
    background-image: var(--gtm-plate-image);
    color: var(--pp-ink-soft);
}

/* The base darkens this divider for the grey sheet; on plate it needs the
   opposite treatment. */
body.gtm-perf-parts .gtm-plp-drawer__body .gtm-fgroup {
    border-bottom-color: var(--pp-line);
}

/* The foot is a white bar in the light shop. It holds the two committing
   controls, so it stays distinct from the sheet, just from the other side. */
body.gtm-perf-parts .gtm-plp-drawer__foot {
    background: rgba(0, 0, 0, .35);
    border-top-color: var(--pp-line-strong);
}

body.gtm-perf-parts .gtm-plp-drawer__foot .gtm-plp-btn--ghost {
    background: transparent;
    color: var(--pp-ink-soft);
    border-color: var(--pp-line-strong);
}

body.gtm-perf-parts .gtm-plp-drawer__foot .gtm-plp-btn--ghost:hover,
body.gtm-perf-parts .gtm-plp-drawer__foot .gtm-plp-btn--ghost:focus-visible {
    border-color: var(--pp-accent);
    color: var(--pp-ink);
}

/* Show results, while nothing is staged. #E2E2E2 on #999 is a light blob on
   plate, and it is the control the customer is looking at. */
body.gtm-perf-parts .gtm-plp-drawer__foot .gtm-plp-btn--solid:disabled {
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .38);
    box-shadow: none;
}

/* The yellow head and its close button are the accent the dark skin already
   uses, with dark ink on it. They are correct as they stand. */

/* =============================================================================
 * GTPE VAT-inclusive price note (inc/gtpe-vat.php)
 * ---------------------------------------------------------------------------
 * gtm_gtpe_vat_note_html() prints two spans -- .gtm-gtpe-price-inc (headline:
 * the inc-VAT figure + an "inc. VAT" suffix) and .gtm-gtpe-vat-note (the
 * ex-VAT qualification, in a __full and a __short version, CSS picks one) --
 * raw into whatever wrapper each surface already uses, so with no rules here
 * they inherit that wrapper's own price typography: 30-64px, weight 900,
 * uppercase. Correct for a single price figure, wrong for a sentence.
 *
 * Every real render path for a GTPE part carries body.gtm-perf-parts (both
 * gtm_is_perf_parts() branches -- the shelf/sub-shelf archive and any single
 * product filed under it -- set it), so scoping every rule below to that one
 * class is already the perf-parts-only gate DMCCA needs, on top of the PHP
 * gate (gtm_product_is_perf_part()) the note itself is built on -- neither
 * can leak onto the other 74 parts products without the other agreeing.
 *
 * Three surfaces, traced render paths (see inc/gtpe-vat.php's file header for
 * the PDP/sticky-bar pair; template-parts/components/card-product-parts.php
 * for the card, reused by BOTH the /prodcat/gt-performance-parts/ results
 * grid -- .gtm-plp-grid -- and the "Related products" grid a perf part's own
 * PDP shows for its siblings -- .gtm-related-grid; both are plain descendant
 * selectors below so one set of rules covers both grids):
 *   1. PDP buy card  (.gtm-buycard .gtm-pdp-price-value)     -- long form
 *   2. Mobile sticky recap bar (.gtm-sticky-bar__price)      -- short form
 *   3. Shelf/related card price pill (.gtm-price--gtpe)      -- short form
 * ============================================================================= */

/* --- Base: sane on any surface, including one not named above -----------
   Kills the inherited uppercase/900-weight/tight-tracking regardless of
   which wrapper this lands in, and stacks headline above note. The __short/
   __full toggle defaults to __full visible -- only the two cramped surfaces
   below flip it. */
body.gtm-perf-parts .gtm-gtpe-price-inc,
body.gtm-perf-parts .gtm-gtpe-vat-note {
    display: block;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    overflow-wrap: break-word;
}
body.gtm-perf-parts .gtm-gtpe-price-inc__suffix {
    text-transform: none;
    white-space: nowrap;
    vertical-align: baseline;
}
body.gtm-perf-parts .gtm-gtpe-vat-note__full {
    display: block;
}
body.gtm-perf-parts .gtm-gtpe-vat-note__short {
    display: none;
}

/* --- 1. PDP buy card: long form, full prominence -------------------------
   .gtm-pdp-price-value is a bare <span> shared by every product's buy card
   (single-product.php); forcing it to block only under body.gtm-perf-parts
   keeps every other product's inline price-basis layout untouched. The
   price figure itself is deliberately NOT resized here -- it keeps
   inheriting .gtm-buycard .gtm-pdp-price's own 32px/700/white (this file,
   above), which is what "stays the dominant element" means in practice: one
   declaration, not a duplicate figure tuned to match it. */
body.gtm-perf-parts .gtm-buycard .gtm-pdp-price-value {
    display: block;
}
body.gtm-perf-parts .gtm-buycard .gtm-gtpe-price-inc__suffix {
    font-size: 18px;
    font-weight: 700;
    margin-left: 8px;
}
body.gtm-perf-parts .gtm-buycard .gtm-gtpe-vat-note {
    margin-top: 10px;
    max-width: 46ch;   /* readable measure even on a wide desktop buy column */
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--pp-ink-soft, rgba(255, 255, 255, .72));
}

/* --- 2. Sticky recap bar: short form -------------------------------------
   Only ever mounted <=767.98px (pdp.css) and only once the in-page buy card
   -- long form above -- has already scrolled past, so a shorter recap here
   is repeating a fact the visitor has already been shown at full prominence,
   not the only place they see it. The bar was built nowrap+ellipsis for a
   long BIKE price range; that would silently truncate a legal qualification
   mid-sentence, which is worse than the short form, so it is overridden here
   rather than reused. */
body.gtm-perf-parts.single-product .gtm-sticky-bar__price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
body.gtm-perf-parts.single-product .gtm-sticky-bar__price .gtm-gtpe-price-inc {
    white-space: nowrap;   /* the figure itself still never breaks mid-number */
}
body.gtm-perf-parts.single-product .gtm-sticky-bar__price .gtm-gtpe-price-inc__suffix {
    font-size: 12px;
    font-weight: 700;
    margin-left: 5px;
}
body.gtm-perf-parts.single-product .gtm-sticky-bar__price .gtm-gtpe-vat-note__full {
    display: none;
}
body.gtm-perf-parts.single-product .gtm-sticky-bar__price .gtm-gtpe-vat-note__short {
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    color: rgba(52, 46, 55, .72);   /* gt-black at the same .72 "soft ink" this file uses for --pp-ink-soft, mirrored for a light bar */
}

/* --- 3. Shelf / related card: short form ---------------------------------
   .gtm-price--gtpe / .parts-card-bottom--gtpe only print for a card whose
   OWN product passes gtm_product_is_perf_part() (card-product-parts.php) --
   the other 74 parts products keep the plain circular pill untouched. A
   pill (border-radius:96px, centred, single-line) can hold one short price;
   it cannot hold a wrapped figure + qualification without its rounded ends
   bulging into a lozenge, so this reshapes the badge into a left-aligned
   block instead of fighting the pill for the one card that needs to wrap. */
body.gtm-perf-parts .gtm-card-parts-v2 .parts-card-bottom--gtpe {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
body.gtm-perf-parts .gtm-card-parts-v2 .gtm-price--gtpe {
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 10px;
    padding: 10px 14px;
    line-height: 1.3;
}
body.gtm-perf-parts .gtm-card-parts-v2 .gtm-price--gtpe .gtm-gtpe-price-inc {
    font-size: 14px;    /* the pill's original single-line size, unchanged */
    font-weight: 700;
}
body.gtm-perf-parts .gtm-card-parts-v2 .gtm-price--gtpe .gtm-gtpe-price-inc__suffix {
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
}
body.gtm-perf-parts .gtm-card-parts-v2 .gtm-price--gtpe .gtm-gtpe-vat-note__full {
    display: none;
}
body.gtm-perf-parts .gtm-card-parts-v2 .gtm-price--gtpe .gtm-gtpe-vat-note__short {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
}