:root {
    /*! put your custom css here */
}

/* MAG1-9 feedback — category dropdown hover state, item separators and width.
   Ported from Prime Guard, which gets this treatment from two places MAG1 does
   not load: the `.pg-header-nav-menu` rules inside
   rocketMultilevelNavigationMenu, and the `.pg-header` rules in the rocketTheme
   static resource. The component's own Hover Color / Hover Text Color builder
   properties only write --hoverColor / --hoverTextColor onto the host and no
   rule ever reads them, so the MAG1 menu has no hover feedback at all.
   rocketMultilevelNavigationMenu runs under synthetic shadow DOM, so these
   site-level selectors reach its internals without touching the shared bundle. */

/* Panels size to their longest label instead of the component's fixed 13rem,
   which broke MAG1's long category names over two and three lines. The
   component's own rule is `.navbar .navbar__sub-menu`, which LWC scopes with
   two attributes on top of the two classes, so it outranks anything the site
   can write without !important. Measured on mag1dev: every label fits on one
   line from 1280px up, the widest panel being 454px, and the min() cap keeps
   the second-level panel inside the viewport down to 768px, where the menu
   switches to the mobile layout. */
c-rocket-multilevel-navigation-menu .navbar .navbar__sub-menu {
    width: max-content !important;
    min-width: 13rem;
    max-width: min(30rem, 40vw);
}

/* The component's 13rem label cap and the 70% item width from the top-level
   alignment fix would both hold the text back inside the wider panel. */
c-rocket-multilevel-navigation-menu .navbar__sub-menu c-rocket-multilevel-navigation-menu-item {
    width: 100% !important;
}

/* Dropdown rows, matched to Prime Guard. Measured there: min-height 48px,
   font 400 16px/20.48px in sentence case, label padding-right 8px, row height
   52-53px. The top-level links keep the 14px uppercase treatment from MAG1-9
   and are deliberately left out.
   The one deliberate difference is the right padding, 24px here against Prime
   Guard's 0: its panel is a fixed 13rem, so text wraps long before the drill
   chevron, while a panel sized to its content puts the longest label right
   under it. 24px plus the label's 8px clears the chevron glyph by 6px. */
c-rocket-multilevel-navigation-menu .navbar__sub-menu a.navbar__menu-item {
    padding: 1rem 1.5rem;
    min-height: 3rem;
    align-items: center;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.28;
    text-transform: none;
}

/* The bundle's `a.navbar__menu-item span` carries a scoping attribute on each
   compound selector, which outranks this one on class count, so both
   declarations have to be forced. */
c-rocket-multilevel-navigation-menu .navbar__sub-menu a.navbar__menu-item span {
    max-width: none !important;
    padding-right: 0.5rem !important;
}

/* Line separation between dropdown items. */
c-rocket-multilevel-navigation-menu .desktop-nav .navbar__sub-menu li + li {
    border-top: 1px solid #666666;
}

/* Hover state — one step darker than the #231F20 panel, as on Prime Guard.
   Scoped to the dropdown on purpose: Prime Guard hovers its top-level rows to
   the same colour as the bar sitting behind them, so the highlight only ever
   reads inside the panel. Leaving the top-level row transparent gets the same
   result without pinning the bar's colour down in a second place. */
c-rocket-multilevel-navigation-menu .desktop-nav .navbar__sub-menu li:hover {
    background: #000000;
}
c-rocket-multilevel-navigation-menu .desktop-nav li:hover a {
    color: #F7F7F7 !important;
}
c-rocket-multilevel-navigation-menu .desktop-nav li:hover lightning-icon svg {
    fill: #F7F7F7 !important;
}

/* The top-level chevron flips to point up while its menu is open, as on Prime
   Guard. The child combinator keeps this off the drill arrows inside the panel,
   which are nested deeper and have to keep pointing right. */
c-rocket-multilevel-navigation-menu .desktop-nav ul.navbar__main-menu > li:hover > lightning-icon svg {
    transform: rotate(180deg);
}

/* ==========================================================================
   MAG1-29 — MAG 1 product card design
   ==========================================================================
   The MAG 1 card is not a component. PLP and Search render the SHARED
   hlwResultsLayout + rocketProductCard, which other brands also render, so
   nothing here modifies a component: the design is expressed as tokens plus a
   scoped set of rules.

   To put the MAG 1 card design on a new surface, give its container the
   `mag1-product-cards` CSS class and add the selectors for that surface's own
   card DOM below, reading the same tokens. Never re-type a literal — a value
   that lives in two places is a value that will drift (it already did once:
   cardBorderWeight was 6 on the Category view and 0 on Search).

   Tokens sit on :root, which is safe here because this stylesheet belongs to
   site/Mag11 and no other storefront loads it.
   ========================================================================== */

:root {
    /* Card surface */
    --mag1-card-bg: #313030;
    /* MAG1-81: white, to match the MDM assets, which are all shot on white. Drives the
       image box on the PLP and Search cards, the Lube Advisor cards and both PDP
       carousels. */
    --mag1-card-image-bg: #FFFFFF;
    --mag1-card-text: #FFFFFF;
    --mag1-card-width: 341px;
    --mag1-card-min-height: 490px;
    --mag1-card-image-height: 260px;
    --mag1-card-border-weight: 6px;
    --mag1-card-radius: 0;

    /* Type scale */
    --mag1-card-title-size: 20px;
    --mag1-card-title-line: 30px;
    --mag1-card-title-weight: 600;
    --mag1-card-title-clamp: 2;
    --mag1-card-body-size: 14px;
    --mag1-card-body-line: 20px;
    --mag1-card-body-weight: 400;
    --mag1-card-body-clamp: 3;

    /* Call to action */
    --mag1-cta-bg: #DA322A;
    --mag1-cta-bg-hover: #B82820;
    --mag1-cta-text: #FFFFFF;
    --mag1-cta-width: 172px;
    --mag1-cta-height: 44px;
    --mag1-cta-size: 16px;
    --mag1-cta-line: 24px;
    --mag1-cta-weight: 600;
    /* A surface whose button means something else overrides this token on its
       own scope instead of writing a second content rule. */
    --mag1-cta-label: "View Products";

    /* Grid */
    --mag1-grid-columns: 3;
    --mag1-grid-gap: 16px;

    /* Shown when a product has no list image */
    --mag1-card-fallback-image: url("/Mag1/sfsites/c/resource/MAG1_Logo");
}

/* --------------------------------------------------------------------------
   Grid — belongs to hlwResultsLayout, not to the card. A surface with its own
   layout skips this part and keeps the card rules below.

   Figma is three-up. The component hardcodes slds-large-size_1-of-4 on each
   cell, so the container itself is switched to CSS Grid with a fixed track
   count: deterministic regardless of which slds-*-size class wins.
   -------------------------------------------------------------------------- */
.mag1-product-cards .products-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--mag1-grid-columns), minmax(0, 1fr)) !important;
    gap: var(--mag1-grid-gap) !important;
    align-items: stretch;
    margin: 0 !important;
}

.mag1-product-cards .products-grid > .slds-col,
.mag1-product-cards .products-grid > .mobile-card-view {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    min-width: 0;
}

@media (max-width: 1023px) {
    :root { --mag1-grid-columns: 2; }
}

@media (max-width: 767px) {
    :root { --mag1-grid-columns: 1; }
}

/* --------------------------------------------------------------------------
   Card — rocketProductCard's DOM.
   -------------------------------------------------------------------------- */

/* rocketProductCard writes its builder properties as inline custom properties
   on its own host, so the same design values were configured per view and drifted.
   Re-declaring them here with !important beats the inline style and makes the
   tokens the single source of truth; the view's builder values stop mattering. */
.mag1-product-cards c-rocket-product-card {
    --card-background-color: var(--mag1-card-bg) !important;
    --card-min-height: var(--mag1-card-min-height) !important;
    --card-max-width: var(--mag1-card-width) !important;
    --card-border-color: var(--mag1-card-bg) !important;
    --card-border-weight: var(--mag1-card-border-weight) !important;
    --card-border-radius: var(--mag1-card-radius) !important;
    --image-background-color: var(--mag1-card-image-bg) !important;
    --image-height: var(--mag1-card-image-height) !important;

    /* hlwResultsLayout never passes font-color / font-size down to the card, so
       the fields fall back to the page's dark text on our dark card. */
    --font-color: var(--mag1-card-text);
    --font-size: var(--mag1-card-body-size);
    color: var(--mag1-card-text);

    /* SLDS styling hooks are custom properties, so they reach the button even
       through the base component's own shadow root. */
    --slds-c-button-brand-color-background: var(--mag1-cta-bg);
    --slds-c-button-brand-color-border: var(--mag1-cta-bg);
    --slds-c-button-brand-color-background-hover: var(--mag1-cta-bg-hover);
    --slds-c-button-brand-color-border-hover: var(--mag1-cta-bg-hover);
    --slds-c-button-radius-border: var(--mag1-card-radius);
    --sds-c-button-brand-color-background: var(--mag1-cta-bg);
    --sds-c-button-brand-color-border: var(--mag1-cta-bg);
    --sds-c-button-radius-border: var(--mag1-card-radius);
}

.mag1-product-cards c-rocket-product-card .product-field-card,
.mag1-product-cards c-rocket-product-card .field-value,
.mag1-product-cards c-rocket-product-card .field-label {
    color: var(--mag1-card-text);
}

/* The .field-* classes come from the component's own formatFieldName(), so they
   exist for whatever is listed in cardContentMapping. These two assume the
   mapping is `Name,Description`; a surface mapping other fields needs its own
   selectors reading the same tokens. */
.mag1-product-cards c-rocket-product-card .field-name {
    font-size: var(--mag1-card-title-size);
    line-height: var(--mag1-card-title-line);
    font-weight: var(--mag1-card-title-weight);
    /* Figma caps the title at 2 lines so cards in a row match. */
    display: -webkit-box;
    -webkit-line-clamp: var(--mag1-card-title-clamp);
    line-clamp: var(--mag1-card-title-clamp);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mag1-product-cards c-rocket-product-card .field-description {
    font-size: var(--mag1-card-body-size);
    line-height: var(--mag1-card-body-line);
    font-weight: var(--mag1-card-body-weight);
    /* Without the clamp a long description pushes the card taller and breaks
       the row. */
    display: -webkit-box;
    -webkit-line-clamp: var(--mag1-card-body-clamp);
    line-clamp: var(--mag1-card-body-clamp);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Fallback image. rocketProductCard hardcodes an import of the
   primeGuardDefaultImage static resource; LWR rewrites that import to
   /webruntime/org-asset/<hash>/resource/<StaticResource Id>, so the resource
   NAME never reaches the src — match the path instead. Only the fallback is
   served from org-asset; a real card image is an external Product_Resource__c
   URL, so this rule cannot reach one.

   The URL is spelled out rather than using { basePath }: head markup resolves
   that placeholder, a stylesheet served from the CMS does not. */
.mag1-product-cards c-rocket-product-card img.product-image[src*="/webruntime/org-asset/"] {
    content: var(--mag1-card-fallback-image) !important;
}

/* Button: Figma 172x44, square corners. */
.mag1-product-cards c-rocket-product-card .card-cta button,
.mag1-product-cards c-rocket-product-card lightning-button button {
    width: var(--mag1-cta-width);
    max-width: 100%;
    height: var(--mag1-cta-height);
    background-color: var(--mag1-cta-bg) !important;
    border: none !important;
    border-radius: var(--mag1-card-radius) !important;
    color: var(--mag1-cta-text) !important;
    line-height: var(--mag1-cta-line) !important;
    font-weight: var(--mag1-cta-weight) !important;
    text-transform: uppercase;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
                inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
                inset 0px -2px 0px rgba(10, 13, 18, 0.05) !important;
    /* Hides the real label; the visible one is painted by ::before below. */
    font-size: 0 !important;
}

/* Label swap. hlwResultsLayout hardcodes the shared custom label
   HLW_PG_ProductCardButtonLabel ("Explore") into rocketProductCard and exposes
   no builder property for it, and that label is also read by the HW and Service
   Champ parts finders, so it cannot be retargeted for MAG 1.

   It has to be ::before. The DXP button carries kx-type="ripple", whose styles
   already own ::after (position:absolute, 20x20, opacity:0), so content set
   there computes correctly but never paints. Kinetics reuses ::before too, as
   the hover glow: [kx-scope="button-brand"]:hover::before turns it into an
   absolutely positioned 140x140 radial gradient at z-index:-1, which parked the
   label behind the opaque button until the layout properties below were pinned
   back. None of those kinetics declarations are !important, so re-declaring
   them is enough.

   Trade-off, accepted knowingly: the hidden text node stays in the
   accessibility tree, so the button announces as "VIEW PRODUCTS EXPLORE", and
   the visible label is neither translatable nor findable with Ctrl+F. No CSS
   can drop a text node from the a11y tree — the clean fix is a MAG 1-owned
   results layout carrying its own label. */
.mag1-product-cards c-rocket-product-card .card-cta button::before,
.mag1-product-cards c-rocket-product-card lightning-button button::before {
    content: var(--mag1-cta-label);
    font-size: var(--mag1-cta-size);
    line-height: var(--mag1-cta-line);
    font-weight: var(--mag1-cta-weight);
    position: static !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    opacity: 1 !important;
    background: none !important;
    z-index: auto !important;
}

/* Spacing. The component leans on SLDS utility classes (slds-p-top_small /
   slds-p-bottom_small on .product-details, slds-m-top_medium on .card-cta), so
   these need !important to win. */
.mag1-product-cards c-rocket-product-card .product-details {
    padding-top: 16px !important;
    padding-bottom: 0 !important;
}

.mag1-product-cards c-rocket-product-card .card-cta {
    margin-bottom: 0 !important;
    padding-top: 26px !important;
}

.mag1-product-cards c-rocket-product-card .product-image-container {
    border-radius: var(--mag1-card-radius) !important;
}

/* .product-field-card and .field-* are two classes on the SAME element, so
   these are compound selectors, not descendants. */
.mag1-product-cards c-rocket-product-card .product-field-card.field-name {
    margin-bottom: 0 !important;
}

.mag1-product-cards c-rocket-product-card .product-field-card.field-description {
    margin-bottom: 10px !important;
}

/* ==========================================================================
   MAG1-31 — PLP / search facet panel (hlwFacetPanel)
   --------------------------------------------------------------------------
   hlwFacetPanel is a shared Highline Warren component and must not be edited,
   so the Figma treatment is applied from here. Everything below is scoped to
   `.mag1-product-cards`, the customCssClasses value carried on the
   c:hlwResultsLayout node in the global_search and detail_0ZG views — the
   facet panel renders inside that component, so the class reaches it.

   Two of the component's colours come from CSS custom properties that Mag1
   never defines (`--pg-*`, which Prime Guard supplies through rocketTheme).
   Those fall back to hardcoded values today, so defining them here is enough
   and needs no !important. The other two, `--panel-background-color` and
   `--text-color`, are written inline by the component's panelStyle getter, so
   those elements are overridden on the property instead of the variable.
   ========================================================================== */

/* Prime Guard hooks the component reads but Mag1 leaves undefined. Scoped to
   the panel so nothing else in the site picks them up. */
.mag1-product-cards c-hlw-facet-panel .facet-panel-container {
    --pg-dark-bg: transparent;      /* .facet-header background */
    --pg-grayscale-400: #292929;    /* search input fill + border */
    --pg-grayscale-100: #94979C;    /* search placeholder */
    --pg-deep-bg: #1a1a1a;          /* list scrollbar track */
    --pg-border-color: #5f5e5e;     /* list scrollbar thumb */
}

/* Desktop only. The same container doubles as the mobile slide-in drawer,
   which needs the full viewport width, so the fixed 240px and the injected
   FILTER heading are both held back to the large breakpoint. */
@media (min-width: 64em) {
    .mag1-product-cards c-hlw-facet-panel .facet-panel-container {
        width: 240px;
        max-width: 240px;
    }

    /* Figma opens the panel with a FILTER heading. The component has no
       element for it, and we can't add markup, so it's drawn as a pseudo
       element. ::before is free here — the component only uses ::-webkit
       scrollbar pseudos on .facet-list. */
    .mag1-product-cards c-hlw-facet-panel .facet-panel::before {
        content: "FILTER";
        display: block;
        padding-bottom: 12px;
        margin-bottom: 4px;
        border-bottom: 1px solid #5f5e5e;
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        color: #f7f7f7;
    }
}

/* The panel's own rounded corners and the body fill fight the flat, full-width
   Figma treatment. */
.mag1-product-cards c-hlw-facet-panel .facet-panel {
    border-radius: 0;
    font-size: 14px;
}

/* One rule per facet, separated by a hairline. The last one drops its border
   so the panel doesn't end on a stray line. */
.mag1-product-cards c-hlw-facet-panel .facet-section {
    border-bottom: 1px solid #5f5e5e;
    padding-bottom: 16px;
}

.mag1-product-cards c-hlw-facet-panel .facet-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* CATEGORIES / VISCOSITY. The component ships these at 1.25rem/700 with a
   filled header bar; Figma wants 16px/600 uppercase on a transparent row. */
.mag1-product-cards c-hlw-facet-panel .facet-header {
    padding: 8px 0;
}

.mag1-product-cards c-hlw-facet-panel .facet-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    color: #f7f7f7;
}

/* Toggle chevron. Figma specifies a 20px glyph in #98A2B3; lightning-icon
   paints from a styling hook, with the svg fill as the fallback path. */
.mag1-product-cards c-hlw-facet-panel .accordion_cta {
    --sds-c-icon-color-foreground-default: #98a2b3;
}

.mag1-product-cards c-hlw-facet-panel .accordion_cta svg {
    fill: #98a2b3;
    width: 20px;
    height: 20px;
}

/* The body carries the inline --panel-background-color fill and 1rem of
   padding. Both are dropped so rows align with the headings above them. */
.mag1-product-cards c-hlw-facet-panel .facet-body {
    background: transparent;
    padding: 0;
}

/* Option rows. Figma: 6px of gutter on the row, 8px/10px inside the hit area,
   6px radius on the hover fill. */
.mag1-product-cards c-hlw-facet-panel .facet-list-item {
    padding: 1px 6px;
}

.mag1-product-cards c-hlw-facet-panel .facet-list-item .slds-checkbox__label {
    padding: 8px 10px;
    border-radius: 6px;
}

.mag1-product-cards c-hlw-facet-panel .facet-list-item:hover .slds-checkbox__label {
    background: #292929;
}

.mag1-product-cards c-hlw-facet-panel .facet-list-item .slds-form-element__label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #cecfd2;
}

/* SLDS draws the checkbox light-on-light, which disappears on the dark panel. */
.mag1-product-cards c-hlw-facet-panel .facet-list-item .slds-checkbox_faux {
    background-color: transparent;
    border-color: #5f5e5e;
}

.mag1-product-cards c-hlw-facet-panel .facet-list-item [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux {
    background-color: #da322a;
    border-color: #da322a;
}

/* "See more" sits under the options, same weight as a row label. */
.mag1-product-cards c-hlw-facet-panel .see-more-btn {
    padding: 8px 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #98a2b3;
}

/* --------------------------------------------------------------------------
   MAG1-31 round 2 — feedback against the Figma.
   -------------------------------------------------------------------------- */

/* 1. The category facet ships a search box above its options. Figma has no
      such control, and with six categories it earns nothing. */
.mag1-product-cards c-hlw-facet-panel .facet-search-input {
    display: none;
}

/* 2. Figma lists options as plain text, with no checkbox. SLDS builds the box
      from .slds-checkbox_faux, a sibling of the label span inside
      .slds-checkbox__label, so hiding just that span collapses the control and
      lets the text sit flush left. The base SLDS rules are specific
      (`.slds-checkbox [type=checkbox] + .slds-checkbox__label .slds-checkbox_faux`),
      hence !important. Scoped to c-hlw-facet-panel, so every other checkbox on
      the site is untouched. */
.mag1-product-cards c-hlw-facet-panel .facet-list-item .slds-checkbox_faux {
    display: none !important;
}

/* Removing the box also removes the only indication of what is selected, which
   AC2 depends on. The label carries that state instead: brighter and heavier
   once checked. Drop this rule if the design calls for a different treatment. */
.mag1-product-cards c-hlw-facet-panel .facet-list-item [type="checkbox"]:checked + .slds-checkbox__label .slds-form-element__label {
    color: #f7f7f7;
    font-weight: 700;
}

/* 3. Figma toggles facets with + and −; the component renders a chevron
      through lightning-icon and picks the icon name in JS, which we can't
      touch. lightning-icon does mirror that name onto its host as
      `slds-icon-utility-chevronup` / `-chevrondown`, so the open state is
      readable from CSS alone. Confirmed against the rendered page:
      chevronup is open (−), chevrondown is collapsed (+).
      The glyph is drawn on ::after; ::before is left free in case the shared
      DXP ripple ever needs it. */
.mag1-product-cards c-hlw-facet-panel .accordion_cta svg {
    display: none;
}

.mag1-product-cards c-hlw-facet-panel .accordion_cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.mag1-product-cards c-hlw-facet-panel .accordion_cta::after {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1;
    color: #98a2b3;
}

.mag1-product-cards c-hlw-facet-panel .accordion_cta.slds-icon-utility-chevrondown::after {
    content: "+";
}

/* U+2212 minus sign, not a hyphen — it matches the plus in width and weight. */
.mag1-product-cards c-hlw-facet-panel .accordion_cta.slds-icon-utility-chevronup::after {
    content: "\2212";
}

/* With the checkbox gone the rows read tighter than Figma, which sets 38px per
   option and 58px once a label wraps onto a second line. */
.mag1-product-cards c-hlw-facet-panel .facet-list-item .slds-checkbox__label {
    min-height: 36px;
    align-items: center;
}

/* ==========================================================================
   MAG1-15 — Category PLP header banner
   --------------------------------------------------------------------------
   The header is a standard dxp_content_layout:banner carrying the category
   banner image, with the headline and the subtext placed in its contentRegion
   so they render over the image. The headline is a dxp_base:textBlock bound to the
   search data provider; the subtext is hwcTextField reading the category field
   through the Commerce API. Both paths resolve for guest users — the UI API does
   not, which is why the subtext is not read through it. Everything the component exposes as a builder
   property is set on the view — contentPosition, contentWidth, height,
   imageFit — so this stylesheet only covers what it does not expose:

     1. the left-to-right darkening ramp (the component's overlayColor is a
        flat tint and cannot express a gradient), and
     2. the text colour over it.

   Scoped to `.mag1-category-header`, the customCssClasses value on the banner
   node in detail_0ZG — the same hook MAG1-29 uses with `.mag1-product-cards`.
   Deliberately NOT `.category-banner`: that class is another ticket's and its
   rules target hlwBanner's DOM.
   ========================================================================== */

:root {
    /* Same ramp the MAG1-27 and home hero banners use, so the brand treatment
       stays consistent across the three. */
    --mag1-banner-scrim: linear-gradient(90deg, #1A1919 0%, rgba(26, 25, 25, 0.5) 65%, rgba(26, 25, 25, 0) 90%);
    --mag1-banner-text: #FFFFFF;

    /* Tipografía del banner. El componente aplica heading-large / body al
       textBlock y nada al hwcTextField, así que ambas se fijan aquí. */
    --mag1-banner-title-size: 48px;
    --mag1-banner-title-weight: 600;
    --mag1-banner-subtext-size: 18px;
    --mag1-banner-subtext-weight: 400;
    --mag1-banner-subtext-line: 28px;

    /* Ancho util para el texto dentro del banner. */
    --mag1-banner-content-width: 720px;
}

.mag1-category-header {
    position: relative;
}

/* The scrim is painted by the wrapper rather than by the component so it stays
   independent of the banner's internal DOM, which we do not control. */
.mag1-category-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--mag1-banner-scrim);
    pointer-events: none;
    z-index: 1;
}

/* Usable width for the banner text.

   The banner does not size .main-content with `width`: it exposes the width as
   per-breakpoint custom properties (--dxp-c-{l,m,s}-content-width) written
   inline on .bannerWrapper, which is what consumes them. Setting width on
   .main-content therefore did nothing. Overriding the variables is the
   component's own mechanism.

   !important is required, not defensive: the variables arrive in the element's
   style attribute, and an inline declaration beats any stylesheet.

   Consequence: the builder's "Content Width" property stops having any effect
   at L and M. If someone changes it there and nothing happens, the answer is
   here. S is left at 100% because 720px would overflow on mobile. */
.mag1-category-header .bannerWrapper {
    --dxp-c-l-content-width: var(--mag1-banner-content-width) !important;
    --dxp-c-m-content-width: var(--mag1-banner-content-width) !important;
    --dxp-c-s-content-width: 100% !important;
}

/* --------------------------------------------------------------------------
   Empty state — "The component will not show if there is no content set up for
   the category".

   The banner does not collapse on its own: it paints its 450px band whether or
   not an image resolves, and the scrim above made it darker still. There is no
   way to condition it from the builder either — LWR views have no component
   visibility rules.

   The component leaves the discriminator in the DOM: when
   {!Search.Category.Details.bannerImage} does not resolve, the image block's
   data-img-url attribute ends literally in "/undefined" instead of the CMS
   media path. Verified by diffing the rendered DOM of a category with an image
   against one without.

   :has() is supported across the target browsers (Chrome 105+, Safari 15.4+,
   Firefox 121+). If an older one had to be supported, the alternative is a
   component that resolves the banner itself.

   Note the mixed case: a category with text but no image is hidden too. None
   exists today; if one is needed, this is the rule to revisit. */
.mag1-category-header:has(.dxp-block-image-host[data-img-url$="/undefined"]) {
    display: none;
}

/* Lifted above the scrim. The banner positions these two through its own
   contentPosition / contentWidth properties; only colour and stacking are set
   here. */
.mag1-category-header-title,
.mag1-category-header-subtext {
    position: relative;
    z-index: 2;
    color: var(--mag1-banner-text);
}

/* The container and all three heading tags are listed because dxp_base:textBlock
   picks its element from textDisplayInfo.headingTag, so the rule survives if
   someone changes the level in the builder.

   font-size and font-weight are forced because the component applies the theme's
   heading-large preset on the same element. MAG1-35 does the same without
   !important, but its block lives in headMarkup: the <link> to styles.css loads
   BEFORE the inline <style> blocks, so at equal specificity a rule in this file
   loses. color and margin need no forcing — the theme does not set them on this
   element. */
.mag1-category-header-title,
.mag1-category-header-title h1,
.mag1-category-header-title h2,
.mag1-category-header-title h3 {
    color: var(--mag1-banner-text);
    margin: 0;
    font-size: var(--mag1-banner-title-size) !important;
    font-weight: var(--mag1-banner-title-weight) !important;
}

/* The subtext is rendered by hwcTextField, which puts the value inside
   <span class="hwc-text-field__text"> and sets no font-size of its own. Both the
   host and the span are listed: the host so the value inherits, the span because
   the component applies its own clamp class there.

   Forced for the same reason as the headline: the <link> to styles.css loads
   before the inline <style> blocks in headMarkup, so at equal specificity this
   file loses.

   white-space because Global_Category_Description__c is a Long Text Area — line
   breaks an editor types would otherwise collapse into a single run. */
.mag1-category-header-subtext,
.mag1-category-header-subtext .hwc-text-field,
.mag1-category-header-subtext .hwc-text-field__text {
    color: var(--mag1-banner-text);
    font-size: var(--mag1-banner-subtext-size) !important;
    font-weight: var(--mag1-banner-subtext-weight) !important;
    line-height: var(--mag1-banner-subtext-line) !important;
}

.mag1-category-header-subtext .hwc-text-field__text {
    white-space: pre-line;
}

/* Below the banner's own breakpoint the 40% content column is too narrow to
   read, so the text takes the full width and the ramp becomes vertical to keep
   contrast under it. */
@media (max-width: 767px) {
    :root {
        --mag1-banner-scrim: linear-gradient(0deg, #1A1919 25%, rgba(26, 25, 25, 0.45) 75%, rgba(26, 25, 25, 0) 100%);
    }
}

/* ==========================================================================
   MAG1-30 — PDP: name, description and features from MDM
   --------------------------------------------------------------------------
   The Figma is the source of truth: title Barlow 600 36/44 (-0.02em),
   description and features in Inter 400 18/28 white, 24px between blocks.

   `.mag1-pdp-title` and `.mag1-pdp-description` are standard components
   (dxp_base:textBlock and community_builder:richTextEditor) and render in the
   light DOM, so these selectors reach all of their markup.

   `.mag1-pdp-features` is c:rocketRichTextEditor. Mag11 runs LWC under
   synthetic shadow DOM, so this sheet reaches its internals too — including
   the list that lightning-formatted-rich-text paints for each feature.
   `document.querySelector` proves nothing either way there: LWC patches it
   under synthetic shadow and it returns 0 for those nodes. Inject the rule and
   measure instead.

   Sizes are forced because the <link> to styles.css loads before the inline
   <style> blocks in headMarkup, so on equal specificity this sheet loses. */
:root {
    --mag1-pdp-title-size: 36px;
    --mag1-pdp-title-line: 44px;
    --mag1-pdp-title-weight: 600;
    --mag1-pdp-title-tracking: -0.02em;
    --mag1-pdp-body-size: 18px;
    --mag1-pdp-body-line: 28px;
    --mag1-pdp-text: #ffffff;
    --mag1-pdp-gap: 24px;
    --mag1-pdp-bullet-indent: 24px;
}

.mag1-pdp-title h1,
.mag1-pdp-title h2,
.mag1-pdp-title h3 {
    font-family: 'Barlow', sans-serif;
    font-size: var(--mag1-pdp-title-size) !important;
    line-height: var(--mag1-pdp-title-line) !important;
    font-weight: var(--mag1-pdp-title-weight) !important;
    letter-spacing: var(--mag1-pdp-title-tracking) !important;
    color: var(--mag1-pdp-text);
    margin: 0;
}

.mag1-pdp-description {
    margin-top: var(--mag1-pdp-gap);
}

.mag1-pdp-description,
.mag1-pdp-description .cb-outputRichText-container,
.mag1-pdp-description p,
.mag1-pdp-description li,
.mag1-pdp-description span {
    font-family: 'Inter', sans-serif;
    font-size: var(--mag1-pdp-body-size) !important;
    line-height: var(--mag1-pdp-body-line) !important;
    color: var(--mag1-pdp-text);
}

.mag1-pdp-description p {
    margin: 0;
}

/* MAG1-97 — "Part Number: <ProductCode>" sits between the title and the
   description.

   The row is `c:mag1PartNumber`, which until MAG1-97 was a <p> inside
   mag1ShopNowButton — that is why it used to render at the foot of the column
   in the LWR default type. It is a component rather than a text block because
   it has to stay hidden on product families, and LWR views have no component
   visibility rules; the gate is the Apex check the Shop Now CTA already makes.

   Mag11 runs LWC under synthetic shadow DOM, so this sheet reaches the <p>
   inside the component — the same arrangement as `.mag1-pdp-features` below.
   `display` is set because a custom element is inline by default.

   Two rules keep a product family's panel exactly as it was before this row
   existed, because the host element stays in the DOM there whether or not the
   component paints anything:

   - the 24px gap belongs to the <p>, not to the host, so it disappears with
     the text. A flex item is its own formatting context, so the child margin
     cannot collapse back out — the host measures 24+line when the row is
     there and 0 when it is not;
   - `:empty` then takes the host out of the column's flex flow. A zero-height
     item still occupies one slot, which was worth another 8px. Verified
     against the live page: with the row hidden the host has no child nodes at
     all, so the selector matches. Same device MAG1-93 uses two blocks below.

   The ticket asks for the description's type, so the rules below mirror the
   block above, and the row joins the panel's 24px rhythm. Same reason for the
   !important as everywhere else in this sheet — the <link> loads before the
   headMarkup <style> blocks, so on equal specificity this file loses. */
.mag1-pdp-part-number {
    display: block;
}

.mag1-pdp-part-number:empty {
    display: none;
}

.mag1-pdp-part-number,
.mag1-pdp-part-number p {
    font-family: 'Inter', sans-serif;
    font-size: var(--mag1-pdp-body-size) !important;
    line-height: var(--mag1-pdp-body-line) !important;
    color: var(--mag1-pdp-text);
}

.mag1-pdp-part-number p {
    margin: var(--mag1-pdp-gap) 0 0;
}

/* The host carries the type; both lists below inherit it. */
.mag1-pdp-features {
    display: block;
    margin-top: var(--mag1-pdp-gap);
    font-family: 'Inter', sans-serif;
    font-size: var(--mag1-pdp-body-size) !important;
    line-height: var(--mag1-pdp-body-line) !important;
    color: var(--mag1-pdp-text);
}

/* rocketRichTextEditor builds TWO lists per feature: its own <ul><li>, and the
   one wrapping the text inside lightning-formatted-rich-text. If both paint a
   marker the bullets double up, so the outer one is turned off and the inner
   one keeps the disc — the shape Service Champ already ships. `list-style-type`
   is inherited, so the `none` on the outer <li> would travel down to the inner
   list: it is declared `disc` again on the rich text host. */
.mag1-pdp-features > ul {
    margin: 0;
    padding-left: var(--mag1-pdp-bullet-indent);
}

.mag1-pdp-features > ul > li {
    margin: 0;
    list-style-type: none;
}

.mag1-pdp-features lightning-formatted-rich-text {
    list-style-type: disc;
}

/* Lightning's own sheet styles that inner list: `margin-left: 1.5rem`, which
   stacks on the indent above and pushed the bullets 48px in, twice the Figma,
   and `margin-bottom: 12px`, a gap the Figma does not have — it stacks the
   bullets on line-height alone. Both are zeroed here, scoped to the hook,
   rather than touching the platform rule, which every site and every component
   using lightning-formatted-rich-text shares. Wins on specificity (two classes
   plus a type against one plus a type), so no !important. */
.mag1-pdp-features .slds-rich-text-editor__output ul {
    margin: 0;
}

/* ==========================================================================
   MAG1-54 — PDP image gallery (c:scProductImageGallery, "Modern" variant)

   Figma puts the product on a 640x640 stage filled #5f5e5e, sitting on the
   page's own #313030. The component leaves both of its backgrounds to custom
   properties that MAG1 never defines — `--hlw-white` on .modern-gallery-main
   (Prime Guard gets it from the rocketTheme static resource, which MAG1 does
   not load) and `--modern-gallery-bg-color` on .modern-gallery-container,
   which nothing defines anywhere — so both compute to transparent and the
   body shows through. That is already what Figma asks of the container, so
   only the stage is painted here.

   scProductImageGallery runs under synthetic shadow DOM, so these site-level
   selectors reach its internals without touching the shared bundle, which
   scdev serves too. LWC compiles its own rules with a scoping attribute on
   top of the class, which outranks anything written from here, so every
   property the component already declares needs !important. `aspect-ratio`
   it does not declare, hence no flag on that one.
   ========================================================================== */

/* MAG1-62 — both boxes are squared off, per brand guidelines.

   scProductImageGallery ships 0.75rem on the container and 0.5rem on the
   stage. Only the stage shows it, because it is the one this block paints
   (#5f5e5e) while the container stays transparent — but the container is
   flattened too so the corners cannot come back if anyone gives it a
   background from the builder. The thumbnails are squared further down.
   The circular arrows (border-radius: 50%) are left alone: they are
   transparent hit areas around an SVG chevron, not a visible shape. */

c-sc-product-image-gallery .modern-gallery-container {
    max-width: 40rem !important;   /* 640px; the component ships 40.625rem */
    border-radius: 0 !important;   /* MAG1-62; the component ships 0.75rem */
}

c-sc-product-image-gallery .modern-gallery-main {
    background: #FFFFFF !important;   /* MAG1-81; MAG1-54's Figma had #5f5e5e */
    min-height: 0 !important;      /* the component ships 25rem, which is not square */
    aspect-ratio: 1 / 1;
    border-radius: 0 !important;   /* MAG1-62; the component ships 0.5rem */
}


/* MAG1-81 — the zoom lightbox, so the enlarged image sits on white as well.

   rocketModalUnexposed does not paint its own panel: .slds-modal__content falls
   all the way down the SLDS custom-property chain to var(--dxp-g-root), which on
   Mag11 is the page colour #313030. :has() scopes this to the gallery's lightbox
   only — .image-lightbox is what scProductImageGallery puts in the modal's
   contentRegion slot — so every other modal on the site keeps the page colour.
   Browser support for :has() is the same as noted in the MAG1-15 block above. */

c-rocket-modal-unexposed .slds-modal__content:has(.image-lightbox) {
    background-color: #FFFFFF !important;
}


/* --------------------------------------------------------------------------
   MAG1-54 — PDP gallery thumbnail strip, per Figma.

   72x72 thumbs holding a 56x56 image, 8px apart, left aligned under the stage;
   2px border, square corners; MAG1-81 moved the frames to white and the
   border to #DA322A selected / #D5D7DA at rest, so the selection still reads
   against a white frame. The component ships a 4-column grid of full-width
   thumbs with 3px transparent borders and 0.5rem corners, so nearly every
   property here is overriding one it already declares — hence the !important
   on all of them.

   Figma draws the 2px stroke inside the 72px frame without taking layout
   space, which CSS cannot do with `border`; padding is 6px rather than 8px so
   that border + padding still leave the image its 56x56.
   -------------------------------------------------------------------------- */

c-sc-product-image-gallery .modern-thumbnails {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
    width: max-content !important;   /* hugs the thumbs: 152px at two, 312px at the four it caps to */
    height: 72px !important;
    margin: 0 0 1.5rem !important;   /* the component centres it with `0 auto` */
}

c-sc-product-image-gallery .modern-thumbnail {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex: none !important;
    width: 72px !important;
    height: 72px !important;
    padding: 6px !important;
    background: #FFFFFF !important;   /* MAG1-81; the component ships an undefined var(--hlw-white) */
    border: 2px solid #D5D7DA !important;   /* MAG1-81; MAG1-54's Figma had #5f5e5e */
    border-radius: 0 !important;
}

/* MAG1-81 — the selected thumb moves from white to the brand red. A white
   border cannot read against the white frame the thumbs now carry, and the
   border is the only thing marking the selection. */
c-sc-product-image-gallery .modern-thumbnail.modern-thumbnail-active {
    border-color: #DA322A !important;   /* --mag1-cta-bg */
}

c-sc-product-image-gallery .modern-thumbnail-inner {
    width: 56px !important;
    height: 56px !important;
    flex: none !important;
}

/* The strip is a fixed 72px tall and clips, so the component's hover and press
   scaling would cut the thumb off. Figma has two states, selected and not. */
c-sc-product-image-gallery .modern-thumbnail:hover,
c-sc-product-image-gallery .modern-thumbnail:active {
    transform: none !important;
}

/* Restates the resting border so the component's own hover colour cannot
   win; hover and rest are deliberately the same. */
c-sc-product-image-gallery .modern-thumbnail:hover:not(.modern-thumbnail-active) {
    border-color: #D5D7DA !important;   /* MAG1-81 */
}


/* --------------------------------------------------------------------------
   MAG1-54 — keep the product image inside the stage on narrow viewports.

   The component caps the image at a flat `max-height: 500px`. The stage is now
   square, so below roughly 640px wide its content box is shorter than that and
   the image spills out the top and bottom — 67px either side at 390px wide.

   `min(500px, 100%)` keeps the 500px ceiling desktop already had and falls back
   to the stage on anything smaller. For the percentage to resolve, every box
   between the stage and the image needs a definite height, which is what the
   stretch and height:100% below are for; the component centres them instead,
   so they size to their content.
   -------------------------------------------------------------------------- */

c-sc-product-image-gallery .modern-image-wrapper {
    align-self: stretch !important;
    min-height: 0 !important;
    max-height: none !important;    /* the component caps it at 31.25rem */
}

c-sc-product-image-gallery .modern-image-button {
    display: flex !important;       /* the component ships `display: block` */
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
}

c-sc-product-image-gallery .modern-main-image,
c-sc-product-image-gallery .modern-main-image-default {
    max-height: min(500px, 100%) !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}


/* ==========================================================================
   MAG1-23 — Lube Advisor result cards (mag1LubeAdvisor + mag1ProductCard)
   --------------------------------------------------------------------------
   The Lube Advisor's result grid uses c-mag1-product-card, a MAG 1-owned card
   that mirrors rocketProductCard's DOM classnames on purpose so the MAG1-29
   selectors below can reach it with the same shape (`.product-details`,
   `.product-field-card`, `.field-name`, `.field-description`, `.card-cta`,
   `.product-image`). Same containment hook (`mag1-product-cards`) drives it.

   Unlike rocketProductCard, mag1ProductCard renders its own lightning-button
   with the correct label directly, so we DON'T do the MAG1-29 ::before label
   swap — we just style the button. --mag1-cta-label stays for rocketProductCard.
   ========================================================================== */

.mag1-product-cards c-mag1-product-card .mag1-card {
    background-color: var(--mag1-card-bg);
    color: var(--mag1-card-text);
    min-height: var(--mag1-card-min-height);
    max-width: var(--mag1-card-width);
    border: var(--mag1-card-border-weight) solid var(--mag1-card-bg);
    border-radius: var(--mag1-card-radius);
    box-sizing: border-box;
}

.mag1-product-cards c-mag1-product-card .mag1-card-image-wrapper {
    background-color: var(--mag1-card-image-bg);
    height: var(--mag1-card-image-height);
    border-radius: var(--mag1-card-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mag1-product-cards c-mag1-product-card .product-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Fallback image: mag1ProductCard already sets src to
   `/Mag1/sfsites/c/resource/MAG1_Logo` when the product has no imageUrl —
   the request 302s to the resource, so no ::before or content swap is needed.
   If the site rewrites to /webruntime/org-asset/… (import path), the same
   token-driven swap MAG1-29 uses for rocketProductCard applies. */
.mag1-product-cards
    c-mag1-product-card
    .product-image[src*="/webruntime/org-asset/"] {
    content: var(--mag1-card-fallback-image) !important;
}

.mag1-product-cards c-mag1-product-card .product-details {
    padding: 16px 16px 0 16px;
    color: var(--mag1-card-text);
}

.mag1-product-cards c-mag1-product-card .product-field-card.field-name {
    font-size: var(--mag1-card-title-size);
    line-height: var(--mag1-card-title-line);
    font-weight: var(--mag1-card-title-weight);
    color: var(--mag1-card-text);
    display: -webkit-box;
    -webkit-line-clamp: var(--mag1-card-title-clamp);
    line-clamp: var(--mag1-card-title-clamp);
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0 !important;
}

.mag1-product-cards c-mag1-product-card .product-field-card.field-description {
    font-size: var(--mag1-card-body-size);
    line-height: var(--mag1-card-body-line);
    font-weight: var(--mag1-card-body-weight);
    color: var(--mag1-card-text);
    display: -webkit-box;
    -webkit-line-clamp: var(--mag1-card-body-clamp);
    line-clamp: var(--mag1-card-body-clamp);
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.mag1-product-cards c-mag1-product-card .card-cta {
    margin-bottom: 0 !important;
    padding-top: 26px !important;
}

/* Button: same red brand + shape as MAG1-29. mag1ProductCard's button already
   carries the correct label, so no ::before swap is needed here. */
.mag1-product-cards c-mag1-product-card .card-cta lightning-button {
    --slds-c-button-brand-color-background: var(--mag1-cta-bg);
    --slds-c-button-brand-color-border: var(--mag1-cta-bg);
    --slds-c-button-brand-color-background-hover: var(--mag1-cta-bg-hover);
    --slds-c-button-brand-color-border-hover: var(--mag1-cta-bg-hover);
    --slds-c-button-radius-border: var(--mag1-card-radius);
    --sds-c-button-brand-color-background: var(--mag1-cta-bg);
    --sds-c-button-brand-color-border: var(--mag1-cta-bg);
    --sds-c-button-radius-border: var(--mag1-card-radius);
}

.mag1-product-cards c-mag1-product-card .card-cta lightning-button button {
    width: var(--mag1-cta-width);
    max-width: 100%;
    height: var(--mag1-cta-height);
    background-color: var(--mag1-cta-bg) !important;
    border: none !important;
    border-radius: var(--mag1-card-radius) !important;
    color: var(--mag1-cta-text) !important;
    font-size: var(--mag1-cta-size) !important;
    line-height: var(--mag1-cta-line) !important;
    font-weight: var(--mag1-cta-weight) !important;
    text-transform: uppercase;
    box-shadow:
        0px 1px 2px rgba(10, 13, 18, 0.05),
        inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
        inset 0px -2px 0px rgba(10, 13, 18, 0.05) !important;
}

/* ------------------------------------------------------------------------ */
/* MAG1-20 - Homepage "Benefits at a Glance" section.
   Figma: a 958px band on the grey background, yellow 48px heading over a 640px
   centred paragraph, then four equal 320x522 light cards.

   Built only from standard Experience Builder components on the section the
   ticket owner laid out in the builder. The empty top column holds two
   dxp_base:textBlock; each of the four columns below holds three components -
   a dxp_base:image for the icon and two dxp_base:textBlock for the title and
   the body. There is no card component and no HTML: every string on screen is
   editable from the builder's property panel, and the icon is swappable per
   card from its image picker.

   The card itself - background, border, shadow, padding - is painted on the
   column's own content wrapper, which is the only box that already wraps
   exactly those three components.

   Section padding and the heading gutter are set on the components themselves
   (dxpStyle / columnGutterWidth) rather than here, because
   community_layout:section resolves its padding behind a two-class selector
   that a site-level rule cannot outrank.

   Scoped through customCssClasses on the section and the two dxp_layout:columns
   wrappers, the same hook MAG1-35 and MAG1-29 use. */

/* --- heading block --- */

.mag1-benefits .mag1-benefits-heading,
.mag1-benefits .mag1-benefits-heading h1,
.mag1-benefits .mag1-benefits-heading h2,
.mag1-benefits .mag1-benefits-heading h3 {
    font-family: 'Barlow', var(--dxp-s-text-heading-large-font-family), sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #FFF200;
    margin: 0;
}

.mag1-benefits .mag1-benefits-subtext,
.mag1-benefits .mag1-benefits-subtext p {
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
}

/* Figma caps the paragraph at 640px and centres it 24px under the heading. */
.mag1-benefits .mag1-benefits-subtext {
    max-width: 640px;
    margin: 24px auto 0;
}

/* --- card row --- */

/* The row is rebuilt as a grid. The component lays its columns out with flex
   plus <dxp_layout-column-spacer> elements and switches direction per
   breakpoint, which below 1025px stacks the four cards at half width against
   the left edge. A grid gives one predictable four / two / one-up ramp and the
   equal track widths Figma asks for; the spacers go because grid gap replaces
   them. Same treatment MAG1-29 applies to the PLP results grid, and for the
   same reason: display has to be forced, the component's own `.columns` rule
   outranks a site-level selector. */
.mag1-benefits .mag1-benefits-cards .columns {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.mag1-benefits .mag1-benefits-cards dxp_layout-column-spacer {
    display: none;
}

/* The columns carry col-size_/col-medium-size_/col-large-size_ width classes
   for the flex layout they no longer use; as grid items those would hold them
   at a fraction of their track. */
.mag1-benefits .mag1-benefits-cards dxp_layout-column {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    min-width: 0;
}

/* --- the card --- */

/* .column-content is the column's own wrapper around the three components, and
   it already stretches to the tallest card in the grid row, so the four cards
   end on the same baseline with no extra rule. */
.mag1-benefits .mag1-benefits-cards .column-content {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    min-width: 0;
    padding: 48px 24px;
    background: #E8E8E8;
    border: 1px solid #313030;
    box-shadow: 0px 10px 36px rgba(0, 0, 0, 0.16),
                0px 0px 0px 1px rgba(0, 0, 0, 0.06);
}

/* Figma pins the icon at 80x80. dxp_base:image takes its height in px but its
   width as a percentage of the container, which would drift with the card, so
   the width is pinned here and the component's own `fit: contain` keeps the
   glyph square. */
.mag1-benefits .mag1-benefit-card__icon {
    display: block;
    width: 80px;
    margin: 0 auto;
}

/* Figma: 16px icon-to-title, then 32px to the accent rule and 32px to the body.
   The icon/title pair is a fixed 134px block, which is what lines the four body
   columns up with each other. */
.mag1-benefits .mag1-benefit-card__title,
.mag1-benefits .mag1-benefit-card__title h1,
.mag1-benefits .mag1-benefit-card__title h2,
.mag1-benefits .mag1-benefit-card__title h3,
.mag1-benefits .mag1-benefit-card__title h4 {
    font-family: 'Barlow', var(--dxp-s-text-heading-large-font-family), sans-serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    text-align: center;
    color: #181D27;
    margin: 0;
}

.mag1-benefits .mag1-benefit-card__title {
    margin-top: 16px;
}

/* The 40x2 accent rule hangs off the title rather than being its own component:
   dxp_base:horizontalLine only takes a width in percent, so it could not hold
   40px across the breakpoints, and it is decoration an editor never needs to
   touch.

   It also owns BOTH 32px gaps around itself rather than letting the body carry
   its own margin-top. The two gaps are one symmetric declaration that way, and
   more importantly they cannot come apart: a build where the accent renders but
   the body's margin does not would leave the text sitting on the rule. */
.mag1-benefits .mag1-benefit-card__title::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin: 32px auto;
    background: #C42D26;
}

.mag1-benefits .mag1-benefit-card__body,
.mag1-benefits .mag1-benefit-card__body p {
    font-size: 18px;
    line-height: 28px;
    color: #181D27;
    margin: 0;
}

/* Figma wraps the row at a 260px card minimum: four cards need
   4x260 + 3x32 gutters + the section's 64px of padding = 1200px, so the row
   goes two-up below that and single file where even two would fall under the
   minimum. */
@media (max-width: 1199px) {
    .mag1-benefits .mag1-benefits-cards .columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .mag1-benefits .mag1-benefits-cards .columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .mag1-benefits .mag1-benefits-heading,
    .mag1-benefits .mag1-benefits-heading h1,
    .mag1-benefits .mag1-benefits-heading h2,
    .mag1-benefits .mag1-benefits-heading h3 {
        font-size: 36px;
        line-height: 44px;
    }
}

/* ==========================================================================
   MAG1-32 — PDP: product specifications accordion (c:rocketSpecTable)
   --------------------------------------------------------------------------
   The component already ships the grouped view we need (`enableGrouping`), so
   nothing in the shared bundle changes: group labels, order and the collapsed
   default all come from Rocket_Spec__c data. What it does NOT ship is the MAG 1
   look — its grouped styles were authored for PrimeGuard, down to a hardcoded
   blue header — so every declaration below overrides a value the component
   sets on itself. Mag11 runs LWC under synthetic shadow DOM, so this sheet
   reaches those internals; `!important` is needed because the <link> to
   styles.css loads before the inline <style> blocks in headMarkup and loses
   ties on specificity.

   Per Figma: one bordered container, rows split by the same 1px rule, a 32px
   gutter, and a chevron to the left of a Barlow 600 24/32 title. The chevron is
   drawn in CSS — the component renders "+"/"−" glyphs, and zeroing the font
   size lets ::before paint the arrow without touching the bundle.

   There is no Figma for the expanded state; the rows below follow the PDP's
   type scale and reuse the same rule colour. */
:root {
    --mag1-specs-border: #5F5E5E;
    --mag1-specs-icon: #A4A7AE;
    --mag1-specs-text: #FFFFFF;
    --mag1-specs-title-size: 24px;
    --mag1-specs-title-line: 32px;
    --mag1-specs-title-weight: 600;
    --mag1-specs-gutter: 32px;
    --mag1-specs-gap: 16px;
    --mag1-specs-row-size: 16px;
    --mag1-specs-row-line: 24px;
}

/* The heading above the accordion is the component's own "SPECIFICATIONS"
   label, which the Figma does not have. */
.mag1-pdp-specs .section-title {
    display: none !important;
}

.mag1-pdp-specs .custom-accordion {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 1px solid var(--mag1-specs-border) !important;
}

/* Groups are siblings inside the single bordered box, so the separator belongs
   between them rather than around each one. */
.mag1-pdp-specs .accordion-section {
    margin-bottom: 0 !important;
}

.mag1-pdp-specs .accordion-section + .accordion-section {
    border-top: 1px solid var(--mag1-specs-border) !important;
}

.mag1-pdp-specs .accordion-header {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: var(--mag1-specs-gutter) !important;
    gap: var(--mag1-specs-gap) !important;
    /* Figma puts the chevron first; reversing the row keeps the component's
       markup order intact. */
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}

.mag1-pdp-specs .accordion-title {
    flex: 0 1 auto !important;
    font-family: 'Barlow', sans-serif !important;
    font-size: var(--mag1-specs-title-size) !important;
    line-height: var(--mag1-specs-title-line) !important;
    font-weight: var(--mag1-specs-title-weight) !important;
    color: var(--mag1-specs-text) !important;
}

/* Chevron: hide the +/− glyph and draw the arrow in its 32px box. */
.mag1-pdp-specs .accordion-icon {
    margin-left: 0 !important;
    line-height: 0 !important;
}

.mag1-pdp-specs .icon-plus,
.mag1-pdp-specs .icon-minus {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
}

.mag1-pdp-specs .icon-plus::before,
.mag1-pdp-specs .icon-minus::before {
    content: "";
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--mag1-specs-icon);
    border-bottom: 2px solid var(--mag1-specs-icon);
    /* chevron-right collapsed, chevron-down once the group is open */
    transform: rotate(-45deg);
    margin-left: -4px;
}

.mag1-pdp-specs .icon-minus::before {
    transform: rotate(45deg);
    margin-left: 0;
    margin-top: -4px;
}

.mag1-pdp-specs .accordion-content {
    background-color: transparent !important;
    padding: 0 var(--mag1-specs-gutter) var(--mag1-specs-gutter) !important;
}

.mag1-pdp-specs .specs-grid {
    column-gap: calc(var(--mag1-specs-gutter) * 2) !important;
}

/* The component draws its own rule under every key/value row; MAG 1 keeps the
   rows unseparated, so it is overridden rather than removed. */
.mag1-pdp-specs .spec-item {
    border-bottom: none !important;
    font-size: var(--mag1-specs-row-size) !important;
    line-height: var(--mag1-specs-row-line) !important;
}

.mag1-pdp-specs .spec-key,
.mag1-pdp-specs .spec-value {
    font-family: 'Inter', sans-serif !important;
    color: var(--mag1-specs-text) !important;
}

.mag1-pdp-specs .spec-key {
    font-weight: 600 !important;
}

.mag1-pdp-specs .spec-value {
    font-weight: 400 !important;
}

/* One column of key/value pairs once two no longer fit the gutter. */
@media (max-width: 767px) {
    .mag1-pdp-specs .specs-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .mag1-pdp-specs .accordion-header {
        padding: 24px 16px !important;
    }

    .mag1-pdp-specs .accordion-content {
        padding: 0 16px 24px !important;
    }

    .mag1-pdp-specs .accordion-title {
        font-size: 20px !important;
        line-height: 28px !important;
    }
}

/* ==========================================================================
   MAG1-16 — PDP related products (rocketRelatedProductsCarousel)
   --------------------------------------------------------------------------
   The ticket's technical AC calls for the shared Rocket Related Products
   Carousel, so the tile DOM here is rocketRelatedProductsCarouselItem's, not
   the MAG 1 card's. That component is shared with Highline Warren and Service
   Champ and is not modified — everything below reshapes it from the outside,
   reading the same MAG1-29 tokens the PLP card uses so the two surfaces cannot
   drift apart.

   Scope hook is `mag1-related-products`, the customCssClasses on the PDP
   section that holds both carousels.

   Several rules need !important: rocketRelatedProductsCarouselItem.css ships
   its own values for the same properties and SLDS utility classes
   (slds-truncate, slds-p-around_small) sit on the same elements.
   ========================================================================== */

.mag1-related-products {
    padding-bottom: 96px;
}

/* The section headings reuse MAG1-30's `mag1-pdp-title` class outright — same
   Barlow 36/44 -0.02em white as the PDP title, and the Figma asks for exactly
   that. Only the spacing around it belongs to this section.

   That spacing goes on the carousel, not on the heading: a margin-bottom on the
   dxp_base:textBlock wrapper has no effect here, which is why MAG1-30 spaces its
   own title by putting margin-top on the element below it
   (`.mag1-pdp-description`). Same approach.

   rocketRelatedProductsCarousel ships no `:host` rule, so its host element
   defaults to display:inline and drops vertical spacing entirely — hence the
   explicit display. */
.mag1-related-products c-rocket-related-products-carousel {
    display: block;
}

.mag1-related-products .carousel-container {
    margin-top: 32px;
}

/* Row. The component writes --carousel-items from its Items per Page property in
   renderedCallback; the fallback keeps the grid from collapsing on the first paint,
   before that property has been applied. */
.mag1-related-products .carousel {
    grid-template-columns: repeat(var(--carousel-items, 3), minmax(0, 1fr)) !important;
    gap: 32px !important;
}

.mag1-related-products .nav lightning-button-icon {
    --slds-c-icon-color-foreground-default: var(--mag1-card-text);
    --sds-c-icon-color-foreground-default: var(--mag1-card-text);
}

/* Tile surface. The component ships a drop shadow on :host that the flat MAG 1
   card does not use. */
.mag1-related-products c-rocket-related-products-carousel-item {
    box-shadow: none !important;
    height: 100%;
}

.mag1-related-products c-rocket-related-products-carousel-item .carousel-item {
    /* Positioned so the stretched product link below can cover the whole tile. */
    position: relative;
    background-color: var(--mag1-card-bg);
    border: var(--mag1-card-border-weight) solid var(--mag1-card-bg);
    border-radius: var(--mag1-card-radius);
    min-height: var(--mag1-card-min-height);
    max-width: none;
    height: 100%;
    color: var(--mag1-card-text);
    box-sizing: border-box;
}

.mag1-related-products
    c-rocket-related-products-carousel-item
    .carousel-item__image-container {
    background-color: var(--mag1-card-image-bg) !important;
    height: var(--mag1-card-image-height);
    overflow: hidden;
    box-sizing: border-box;
}

/* The component hardcodes width: 400px on the image, which overflows a 341px tile
   and stretches the row to the photo's natural height. */
.mag1-related-products
    c-rocket-related-products-carousel-item
    .carousel-item__product-image {
    width: auto !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.mag1-related-products
    c-rocket-related-products-carousel-item
    .carousel-item__details {
    padding: 16px !important;
}

.mag1-related-products c-rocket-related-products-carousel-item a {
    color: inherit;
    text-decoration: none;
}

/* Title and SKU both carry slds-truncate — one line plus an ellipsis. The Figma
   clamps the title to two lines and lets the SKU wrap. */
.mag1-related-products
    c-rocket-related-products-carousel-item
    .carousel-item__name {
    font-size: var(--mag1-card-title-size) !important;
    line-height: var(--mag1-card-title-line) !important;
    font-weight: var(--mag1-card-title-weight);
    color: var(--mag1-card-text) !important;
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: var(--mag1-card-title-clamp);
    line-clamp: var(--mag1-card-title-clamp);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mag1-related-products
    c-rocket-related-products-carousel-item
    .carousel-item__sku {
    font-size: var(--mag1-card-body-size) !important;
    line-height: var(--mag1-card-body-line);
    font-weight: var(--mag1-card-body-weight);
    color: var(--mag1-card-text) !important;
    white-space: normal !important;
}

.mag1-related-products
    c-rocket-related-products-carousel-item
    .carousel-item__detail-container {
    align-items: flex-start;
    justify-content: flex-start;
}

/* CTA. rocketRelatedProductsCarouselItem ships no navigation button — its only
   button is add-to-cart, which a brand PDP with no cart must not show. The Figma
   calls for a "View Product" button, so it is painted here and the tile's own
   product link is stretched underneath it.

   Safe for Highline Warren and Service Champ by construction: this stylesheet
   belongs to site/Mag11 and no other storefront loads it, every rule is scoped to
   the PDP section's `mag1-related-products` class, and the shared component is
   not modified.

   The button is decoration. Navigation and the accessible name still come from
   the component's real anchors around the image and the product name, which both
   already open the PDP — keyboard and screen-reader users reach the same place.
   The trade-off is that the label is CSS-generated, so it is not translatable. */
.mag1-related-products
    c-rocket-related-products-carousel-item
    .carousel-item__details::after {
    content: "View Product";
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--mag1-cta-width);
    max-width: 100%;
    height: var(--mag1-cta-height);
    /* The box has a fixed height, so a wrapped label spills out of it. */
    white-space: nowrap;
    margin-top: 26px;
    background-color: var(--mag1-cta-bg);
    color: var(--mag1-cta-text);
    font-size: var(--mag1-cta-size);
    line-height: var(--mag1-cta-line);
    font-weight: var(--mag1-cta-weight);
    text-transform: uppercase;
    box-sizing: border-box;
    box-shadow:
        0px 1px 2px rgba(10, 13, 18, 0.05),
        inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
        inset 0px -2px 0px rgba(10, 13, 18, 0.05);
}

.mag1-related-products
    c-rocket-related-products-carousel-item
    .carousel-item:hover
    .carousel-item__details::after {
    background-color: var(--mag1-cta-bg-hover);
}

/* Stretches the image's existing anchor across the whole tile, so the painted
   button — and the rest of the card — is clickable. Without this only the image
   and the product name respond. */
.mag1-related-products
    c-rocket-related-products-carousel-item
    .carousel-item__image-container
    a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* The component picks its column count from FORM_FACTOR, a device signal rather
   than a viewport one, so a narrow window keeps three columns and the tiles
   collapse to about 95px each: the image box becomes a sliver, the name truncates
   mid-word and the CTA label wraps out of its box.

   The count is driven by --carousel-items on the grid, which this sheet already
   overrides, so the breakpoints are pure CSS — the shared component is untouched
   and no other storefront loads this file. The component still renders as many
   tiles as Items per Page; below these widths they simply stack. */
@media (max-width: 1199px) {
    .mag1-related-products .carousel {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }
}

/* One tile at a time on phones. Hiding the extra tiles outright would strand
   products: the component only renders a window of `Items per Page` tiles and
   caps the index at `length - itemsPerPage`, so with four products on a phone
   (where it forces two per page) the pager stops one short and the last product
   is never reachable.

   Laying the window out as a scroll-snap row instead shows exactly one tile
   while keeping the rest of the window swipeable, so every product stays
   reachable through swipe plus the arrows. */
@media (max-width: 767px) {
    .mag1-related-products .carousel {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 16px !important;
    }

    .mag1-related-products .carousel::-webkit-scrollbar {
        display: none;
    }

    .mag1-related-products
        .carousel
        c-rocket-related-products-carousel-item {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }

    .mag1-related-products {
        padding-bottom: 48px;
    }

    .mag1-related-products .carousel-container {
        margin-top: 24px;
    }
}
/* ==========================================================================
   MAG1-39 — Article detail: dark header band + Featured Articles sidebar
   --------------------------------------------------------------------------
   Figma is the source of truth: a #0D0D0D band holding a centred category
   subheading (Inter 600 16/24) over the title (Barlow 600 48/60, -0.02em),
   then a 32px-gutter row with the article body on the left and a 320px
   Featured Articles rail on the right.

   All of these hooks are `customCssClasses` on the view's component nodes.
   Sizes AND colours are forced because the <link> to styles.css loads before
   the inline <style> blocks in headMarkup, so on equal specificity this sheet
   loses. Without !important the theme's #FFFFFF wins and the Figma greys
   (#CECFD2 subheading, #F7F7F7 headings) never render — verified live, not by
   injecting a test sheet: an injected sheet is appended last and wins every
   tie, which hides exactly this class of bug.

   The Featured rail is the standard dxp_content_layout:grid bound to the
   Featured_Articles_MAG1 list view — the same shape Sprayway, Primeguard and
   BlueDevil use. Nothing here is component-specific, so it cannot leak to
   another site.
   ========================================================================== */
:root {
    --mag1-article-header-bg: #0d0d0d;
    --mag1-article-heading: #f7f7f7;
    --mag1-article-text: #cecfd2;
    /* The article body is pure white, brighter than the #CECFD2 the Figma uses
       for the category subheading. hwcKnowledgeArticleContent exposes no colour
       property of its own, so this sheet is the only place it can be set. */
    --mag1-article-body-text: #ffffff;
    --mag1-article-featured-bg: #1a1919;
    --mag1-article-rail-width: 320px;
    --mag1-article-gutter: 32px;
}

/* --- content width ---------------------------------------------------------
   The Figma page container is 1280px wide with 32px of padding on each side,
   so the content column — the dark header band and the article row alike — is
   1216px. The section's `maxContentWidth` attribute is set to 1280px in the
   builder but emits **no** max-width at all (measured: the host stays at
   1361px with `max-width: none`), so the cap has to live here.

   The breakpoint is the container width itself. At exactly 1280px the auto
   margins resolve to (1280 - 1216) / 2 = 32px a side, which *is* the Figma's
   padding; below it the blocks stay fluid with the 32px inset they already
   carry and the content measures viewport - 64. The two regimes meet without a
   jump, so there is no width at which the layout snaps.

   Both blocks sit in containers inset by 32px symmetrically, so centring them
   independently lands them on the same left and right edge. */
@media (min-width: 1280px) {
    .mag1-article-header,
    .mag1-article-body-row {
        max-width: 1216px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Below the container width the two blocks must still share an edge. The dark
   band is the header section's host and picks up the 32px margin set on its
   node in the builder; the article row sits *inside* its section and picks up
   that section's padding instead. The theme's section padding is responsive
   and flips at the same 1025px boundary dxp_layout:columns uses (measured:
   32px at 1025 and above, 16px at 1024 and below), so the two only disagree on
   small screens — there the row lands at 16px against the band's 32px.

   Adding 16px only below 1025 closes it: 16 theme padding + 16 = the Figma's
   32px of side air, and the 1025-1279 range is left alone because the theme
   already gives 32 there. Verify by measuring both left edges, not by trusting
   the constant. */
@media (max-width: 1024px) {
    .mag1-article-body-row {
        margin-left: 16px;
        margin-right: 16px;
    }
}

/* --- dark header band ------------------------------------------------------
   Vertical padding lives on the node's `dxpStyle`, not here:
   community_layout:section resolves it through --dxp-style-c-padding-* behind
   a two-class selector that a single-class rule in this sheet cannot outrank. */
.mag1-article-header {
    background: var(--mag1-article-header-bg);
}

/* Figma caps the heading block at 768px and centres it. `.column-content` is
   the section column's own flex column, so the cap and the 12px gap between
   subheading and title both belong there. */
.mag1-article-header .column-content {
    max-width: 768px;
    margin: 0 auto;
    gap: 12px;
}

.mag1-article-subheading p {
    margin: 0;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    text-align: center;
    color: var(--mag1-article-text) !important;
}

/* Category__c is a multi-select picklist, so an article tagged with more than
   one value renders them joined by ";". The editorial rule for MAG1-39 is one
   category per article; this keeps the line from wrapping if that slips. */
.mag1-article-subheading p {
    overflow-wrap: anywhere;
}

.mag1-article-title h1 {
    margin: 0;
    font-family: 'Barlow', var(--dxp-s-text-heading-large-font-family), sans-serif;
    font-size: 48px !important;
    line-height: 60px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--mag1-article-heading) !important;
}

/* --- body / rail row -------------------------------------------------------
   dxp_layout:columns paints its gutter as a real <dxp_layout-column-spacer>
   element and sizes its columns with col-*-size_N-of-12 classes, so taking the
   row over means replacing the whole mechanism: grid + gap, spacer hidden, and
   the column widths unpinned. `display` needs !important — the component's own
   `.columns` rule outranks this descendant selector. */
@media (min-width: 1025px) {
    .mag1-article-body-row .columns {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--mag1-article-rail-width);
        gap: var(--mag1-article-gutter);
        align-items: start;
    }

    .mag1-article-body-row dxp_layout-column-spacer {
        display: none;
    }

    .mag1-article-body-row dxp_layout-column,
    .mag1-article-body-row dxp_layout-column > .column-content {
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 auto !important;
    }
}

/* Below the component's own desktop breakpoint the row stacks; the rail then
   runs full width under the article instead of staying pinned at 320px. */
@media (max-width: 1024px) {
    .mag1-article-body-row dxp_layout-column-spacer {
        padding-top: var(--mag1-article-gutter);
    }
}

/* --- article body --- */
/* hwcKnowledgeArticleContent renders Content__c through
   lightning-formatted-rich-text inside .cb-outputRichText-container. Mag11 runs
   LWC under synthetic shadow DOM, so this sheet reaches all of it. */
.mag1-article-body .cb-outputRichText-container,
.mag1-article-body .cb-outputRichText-container p,
.mag1-article-body .cb-outputRichText-container li,
.mag1-article-body .cb-outputRichText-container span {
    font-size: 20px;
    line-height: 30px;
    color: var(--mag1-article-body-text) !important;
}

/* .ql-editor zeroes the margins Quill would otherwise add, so the authored
   paragraph rhythm has to be restated here or the body reads as one block.
   Forced for the same reason the sizes are: this sheet is linked before the
   inline <style> blocks in headMarkup and loses every specificity tie. */
.mag1-article-body .cb-outputRichText-container p {
    margin: 0 0 24px !important;
}

.mag1-article-body .cb-outputRichText-container ul,
.mag1-article-body .cb-outputRichText-container ol {
    margin: 0 0 24px !important;
    padding-left: 24px !important;
}

.mag1-article-body .cb-outputRichText-container > *:last-child {
    margin-bottom: 0 !important;
}

.mag1-article-body .cb-outputRichText-container h1,
.mag1-article-body .cb-outputRichText-container h2,
.mag1-article-body .cb-outputRichText-container h3 {
    margin: 32px 0 16px !important;
    font-family: 'Barlow', var(--dxp-s-text-heading-large-font-family), sans-serif;
    font-weight: 600 !important;
    color: var(--mag1-article-body-text) !important;
}

.mag1-article-body .cb-outputRichText-container h2 {
    font-size: 24px !important;
    line-height: 32px !important;
}

.mag1-article-body .cb-outputRichText-container h3 {
    font-size: 20px !important;
    line-height: 30px !important;
}

/* --- Featured Articles rail --- */
.mag1-article-featured-title h2 {
    margin: 0 0 16px;
    font-family: 'Barlow', var(--dxp-s-text-heading-large-font-family), sans-serif;
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 600 !important;
    color: var(--mag1-article-heading) !important;
}

.mag1-article-featured-list {
    display: block;
    background: var(--mag1-article-featured-bg);
    padding: 24px;
}

/* The grid ships slds-p-around_small (12px) on every item, which would fight
   the Figma's 24px rhythm. Zero it and let the gap own the spacing. */
.mag1-article-featured-list .dxp-grid-item {
    padding: 0 !important;
}

/* The grid's own inner container paints a #313030 fill that would sit inside
   the rail's 24px padding and read as a second, misaligned box. */
.mag1-article-featured-list .dxp-block-flexible-container {
    background: transparent !important;
    border: none !important;
}

.mag1-article-featured-list .slds-grid.slds-wrap {
    gap: 24px;
}

/* The repeater item is a linkable dxp_base:textBlock. It renders no <a> — the
   host carries the click handler (cursor:pointer, data-link-target) — so the
   hover rule goes on the host, not on a descendant anchor. Same shape Sprayway
   and BlueDevil ship; the trade-off is no href for crawlers.
   `heading-small` pulls the heading font family (Barlow); the Figma asks for
   Inter here, so the family is restated. */
.mag1-article-featured-link h3 {
    margin: 0;
    font-family: 'Inter', var(--dxp-s-text-body-regular-font-family), sans-serif;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    color: var(--mag1-article-heading) !important;
}

.mag1-article-featured-link:hover h3 {
    text-decoration: underline;
}

/* --- small screens --- */
@media (max-width: 767px) {
    .mag1-article-title h1 {
        font-size: 32px !important;
        line-height: 40px !important;
    }

    .mag1-article-body .cb-outputRichText-container,
    .mag1-article-body .cb-outputRichText-container p,
    .mag1-article-body .cb-outputRichText-container li,
    .mag1-article-body .cb-outputRichText-container span {
        font-size: 18px;
        line-height: 28px;
    }
}

/* ==========================================================================
   MAG1-41 — Articles list: dark header band + category rail + card grid
   --------------------------------------------------------------------------
   The page is the standard Knowledge `list-kXX` view, built the way Sprayway
   builds its own: a `dxp_content_layout:grid` bound to a Knowledge list view,
   `c:hwcKnowledgeArticleTileSW` as the repeater item, and one
   `c:hwcKnowledgeListCategoryButton` per category in the rail. Nothing here is
   a MAG 1-only component, so every rule is scoped to a `customCssClasses` hook
   set on the view's nodes and cannot reach another storefront.

   Colours and radii that the tile exposes as builder properties (titleColor,
   dateColor, imageAspectRatio, imageBorderRadius, cardBorderRadius) are set on
   the node, not here. This sheet only covers what the component does not
   expose.

   Specificity: the tile and the category button both compile their own rules
   with an LWC scoping attribute on top of the class, which outranks a plain
   descendant selector — and the tile's card background is itself `!important`.
   Every rule below therefore carries `!important` AND leans on
   `.mag1-articles-row` as an extra class so it outranks the component. Dropping
   either one silently loses the tie. Same lesson as MAG1-39.
   ========================================================================== */

:root {
    /* Header band */
    --mag1-articles-band-bg: #0d0d0d;
    --mag1-articles-eyebrow-color: #cecfd2;
    --mag1-articles-heading-color: #f7f7f7;
    --mag1-articles-subtext-color: #94979c;
    --mag1-articles-copy-max: 768px;

    /* Layout */
    --mag1-articles-content-max: 1216px;
    --mag1-articles-rail-width: 284px;
    --mag1-articles-gutter: 32px;
    --mag1-articles-card-gap: 16px;

    /* Card */
    --mag1-articles-card-bg: #13161b;
    --mag1-articles-card-border: #22262f;
    --mag1-articles-card-title: #f7f7f7;
    --mag1-articles-card-date: #94979c;
}

/* --- content width ---------------------------------------------------------
   Same treatment as MAG1-39's detail page: the Figma container is 1280px with
   32px of padding a side, so the content column is 1216px. The section's
   `maxContentWidth` attribute emits no max-width at all, so the cap lives here.

   The cap is on the body only. The header is a full-bleed band — Figma paints
   it edge to edge and only its copy is constrained — so capping the section
   would shrink the band instead of the text. The copy gets its own cap below. */
@media (min-width: 1280px) {
    .mag1-articles-body {
        max-width: var(--mag1-articles-content-max);
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --- header band -----------------------------------------------------------
   Vertical padding lives on the node's `dxpStyle`, not here:
   community_layout:section resolves it through --dxp-style-c-padding-* behind a
   two-class selector that a single-class rule in this sheet cannot outrank. */
.mag1-articles-header {
    background: var(--mag1-articles-band-bg);
}

/* The band runs full width, but its copy has to land on the same left edge as
   the card grid below it. So the column is capped at the 1216px content width
   and centred, and the copy is capped at Figma's 768px inside that, aligned to
   the left — unlike the detail page, which centres its copy.
   `.column-content` is the section column's own flex column, so the cap and the
   24px gap belong there. */
.mag1-articles-header .column-content {
    max-width: var(--mag1-articles-content-max);
    margin-left: auto;
    margin-right: auto;
    gap: 24px;
}

.mag1-articles-header .mag1-articles-eyebrow,
.mag1-articles-header .mag1-articles-title,
.mag1-articles-header .mag1-articles-subtext {
    max-width: var(--mag1-articles-copy-max);
    width: 100%;
}

.mag1-articles-eyebrow p {
    margin: 0 0 -12px 0;   /* 12px to the heading, against the column's 24px gap */
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    color: var(--mag1-articles-eyebrow-color) !important;
}

.mag1-articles-title h1 {
    margin: 0;
    font-family: 'Barlow', var(--dxp-s-text-heading-large-font-family), sans-serif;
    font-size: 48px !important;
    line-height: 60px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
    color: var(--mag1-articles-heading-color) !important;
}

.mag1-articles-subtext p {
    margin: 0;
    font-size: 20px !important;
    line-height: 30px !important;
    font-weight: 400 !important;
    color: var(--mag1-articles-subtext-color) !important;
}

/* --- rail / grid row -------------------------------------------------------
   dxp_layout:columns paints its gutter as a real <dxp_layout-column-spacer>
   element and sizes its columns with col-*-size_N-of-12 classes, so taking the
   row over means replacing the whole mechanism: grid + gap, spacer hidden, and
   the column widths unpinned. `display` needs !important — the component's own
   `.columns` rule outranks this descendant selector. Below 1025px the component
   stacks the columns itself and the rail sits above the grid, which is the
   mobile behaviour Figma asks for. */
@media (min-width: 1025px) {
    .mag1-articles-row .columns {
        display: grid !important;
        grid-template-columns: var(--mag1-articles-rail-width) minmax(0, 1fr);
        gap: var(--mag1-articles-gutter);
        align-items: start;
    }

    .mag1-articles-row dxp_layout-column-spacer {
        display: none;
    }

    .mag1-articles-row dxp_layout-column,
    .mag1-articles-row dxp_layout-column > .column-content {
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 auto !important;
    }
}

/* --- category rail --------------------------------------------------------- */
.mag1-articles-sidebar-title h2 {
    margin: 0 0 8px 0;
    font-size: 20px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
    color: var(--mag1-articles-eyebrow-color) !important;
}

/* The button ships `color: var(--hlw-black) !important` — a token MAG 1 never
   defines, since it comes from the rocketTheme static resource this site does
   not load, so the label computes to the theme's colour. The active state is
   `--dxp-s-link-text-color`, also not Figma's. Both are re-declared here with
   one more class than the component's compiled selector carries. */
.mag1-articles-row .mag1-articles-category .category-nav-button {
    display: block;
    padding: 8px 0 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
    color: var(--mag1-articles-heading-color) !important;
    text-decoration: none !important;
    cursor: pointer;
}

.mag1-articles-row .mag1-articles-category .category-nav-button.active {
    font-weight: 700 !important;
    color: var(--mag1-articles-heading-color) !important;
}

/* --- card grid -------------------------------------------------------------
   dxp_content_layout:grid spaces its items with `slds-p-around_small` (0.75rem)
   on every `.dxp-grid-item`, which makes a 24px gutter. Figma asks for 16px, so
   the item padding drops to 8px and the block is pulled back by the same 8px so
   the first card still starts on the container's left edge. */
.mag1-articles-grid .dxp-grid-item {
    padding: 8px !important;
}

.mag1-articles-grid {
    margin: -8px !important;
}

/* The grid paints its own fill on the flexible container; Figma wants the page
   background to show through. */
.mag1-articles-grid .dxp-block-flexible-container {
    background: transparent !important;
}

/* --- card ------------------------------------------------------------------
   `.knowledge-article-tile` and `.hwc-tile-card` are two classes on the same
   div, which is what makes it possible to outrank the component's own
   `background-color: var(--hlw-white) !important` without cloning the bundle.

   hwcKnowledgeArticleTileSW renders two different trees. With "Tile Clickable"
   on it emits the compact mode (`.knowledge-article-tile` / `.article-content` /
   `.article-header-link` / `.article-date`) and drops the description entirely.
   With it off it emits the full mode, whose classes all carry a `-pg` suffix and
   which honours `showDescription` — the card still navigates on click, because
   the component wraps the whole tile whenever the Read button is hidden.
   The card needs a description, so the page runs in the full mode; both sets of
   selectors are kept so the block survives either configuration. */
.mag1-articles-row .mag1-articles-grid .knowledge-article-tile.hwc-tile-card,
.mag1-articles-row .mag1-articles-grid .knowledge-article-tile-pg.hwc-tile-card {
    background-color: var(--mag1-articles-card-bg) !important;
    border: 1px solid var(--mag1-articles-card-border) !important;
    border-radius: 0 !important;
    color: var(--mag1-articles-card-title) !important;
}

.mag1-articles-row .mag1-articles-grid .knowledge-article-tile .article-content,
.mag1-articles-row .mag1-articles-grid .knowledge-article-tile-pg .article-content-pg {
    padding: 24px !important;
    gap: 20px !important;
}

.mag1-articles-row .mag1-articles-grid .knowledge-article-tile .article-header-link,
.mag1-articles-row .mag1-articles-grid .knowledge-article-tile-pg .article-header-pg {
    font-size: 20px !important;
    line-height: 30px !important;
    font-weight: 600 !important;
}

.mag1-articles-row .mag1-articles-grid .knowledge-article-tile .article-date,
.mag1-articles-row .mag1-articles-grid .knowledge-article-tile-pg .article-date-pg {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
}

/* The description is the article's Summary. The component writes its colour
   inline from the Description Color property, so only the type is set here.
   The gap on `.article-content-pg` already spaces it, hence margin: 0. */
.mag1-articles-row .mag1-articles-grid .knowledge-article-tile-pg .article-description-pg {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
}

/* The full mode keeps the card clickable through a JS handler rather than an
   anchor, so the pointer cursor has to be declared. */
.mag1-articles-row .mag1-articles-grid .knowledge-article-tile-pg.clickable-tile {
    cursor: pointer;
}

/* ==========================================================================
   MAG1-56 — homepage category cards: keep the red rule at one height.

   The six cards are dxp_content_layout:banner with contentPosition
   "bottom left", so their caption grows upward from the card edge. The
   labels wrap to one, two or three lines depending on length, which left
   the rule sitting 106px, 136px or 166px above the bottom edge on the same
   row.

   Reserving three lines for the label box pins the rule at a single offset,
   and top-aligning the label inside that box keeps the gap under the rule
   constant as well — a shorter name leaves its slack at the bottom of the
   card rather than under the rule. line-height is declared here rather than
   inherited (30.72px) so the reserved box is an exact multiple of it.

   The rule itself is inline style on the htmlEditor's first <p>; only the
   label box needs styling. .category-banner-text's font-size/font-family
   come from the MAG1-24 block in mainAppPage headMarkup, which loads after
   this sheet — no property is declared twice, so there is no conflict.
   ========================================================================== */

.category-banner-text {
    display: flex;
    align-items: flex-start;
    line-height: 32px;
    min-height: 96px;
}

/* ==========================================================================
   MAG1-66 — Category / PLP pagination
   ==========================================================================
   Figma replaces the numbered pager with "< Page N of M >" and turns the
   results-per-page control into a single "Show: N Per Page" dropdown.

   Nothing here changes a component. The pager is the SHARED
   hlwSearchPaginator, rendered inside hlwResultsLayout on both the Category
   (detail_0ZG) and Search (global_search) views, and also used by the
   Highline Warren and Service Champ storefronts. The whole redesign is
   expressed as rules scoped to `mag1-product-cards` — the customCssClasses
   value carried on the c:hlwResultsLayout node of those two views — so the
   other two storefronts are untouched.

   How "Page N of M" is produced without any markup change: the component's
   `pageNumbers` getter always emits the current page (class `active`) and
   always ends with the total-pages button, and every button carries its
   number in `data-page`. So every other button is hidden and the two words
   are ::before content on the survivors. When the user is ON the last page
   those two buttons collapse into one, which is what the `.active:last-of-type`
   rules below handle via `attr(data-page)`.

   The literal strings ("Page", "of", "Show:", "Per Page") live here rather
   than in custom labels: the labels are shared with the other two storefronts,
   and the Mag 1 site is English-only.
   ========================================================================== */

.mag1-product-cards .pagination-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 0;
    margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   Left: < Page N of M >
   -------------------------------------------------------------------------- */

.mag1-product-cards .page-numbers.pg-paginator {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 24px 16px;
}

.mag1-product-cards .pg-paginator lightning-button.page-number {
    display: none !important;
}

/* The two survivors stop being buttons visually. They stay <button> elements,
   so they keep their place in the tab order and Enter still jumps to that
   page; pointer-events removes the misleading mouse affordance. */
.mag1-product-cards .pg-paginator lightning-button.page-number.active,
.mag1-product-cards .pg-paginator lightning-button.page-number:last-of-type {
    display: inline !important;
    width: auto !important;
    height: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    pointer-events: none;
    /* "Page" and "of" are ::before content on this host, so the host carries
       their typography; the number itself is styled on the inner button. */
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #cecfd2;
    text-decoration: none;
}

.mag1-product-cards .pg-paginator lightning-button.page-number.active button,
.mag1-product-cards
    .pg-paginator
    lightning-button.page-number:last-of-type
    button {
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: #cecfd2 !important;
    text-decoration: none !important;
}

.mag1-product-cards .pg-paginator lightning-button.page-number.active::before {
    content: "Page ";
}

.mag1-product-cards
    .pg-paginator
    lightning-button.page-number:last-of-type::before {
    content: " of ";
}

/* The 12px gap belongs between the chevrons and the sentence, not inside it. */
.mag1-product-cards
    .pg-paginator
    lightning-button.page-number.active:not(:last-of-type) {
    margin-right: -8px;
}

/* Current page IS the last page: one button has to carry both halves. */
.mag1-product-cards
    .pg-paginator
    lightning-button.page-number.active:last-of-type::before {
    content: "Page ";
}

.mag1-product-cards
    .pg-paginator
    lightning-button.page-number.active:last-of-type::after {
    content: " of " attr(data-page);
}

/* Previous / next: 36x36 outlined squares. */
.mag1-product-cards
    .pg-paginator
    c-rocket-button.pg-paginator-navigation
    button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 8px;
    background: transparent !important;
    border: 1px solid #61656c !important;
    border-radius: 0 !important;
    box-shadow:
        inset 0 0 0 1px rgba(12, 14, 18, 0.18),
        inset 0 -2px 0 rgba(12, 14, 18, 0.05);
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.mag1-product-cards
    .pg-paginator
    c-rocket-button.pg-paginator-navigation
    button:not([disabled]):hover,
.mag1-product-cards
    .pg-paginator
    c-rocket-button.pg-paginator-navigation
    button:not([disabled]):focus-visible {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: #85888e !important;
}

.mag1-product-cards
    .pg-paginator
    c-rocket-button.pg-paginator-navigation
    button[disabled] {
    opacity: 0.5;
}

/* Figma uses a thin chevron; the bundled icon is a solid arrow, so it is
   replaced with a border triangle rather than shipping a new SVG into the
   shared hlwSvgProvider. */
.mag1-product-cards
    .pg-paginator
    c-rocket-button.pg-paginator-navigation
    c-hlw-svg-provider {
    display: none !important;
}

.mag1-product-cards
    .pg-paginator
    c-rocket-button.pg-paginator-navigation
    button::before {
    content: "";
    width: 7px;
    height: 7px;
    border: solid #cecfd2;
    border-width: 1.667px 1.667px 0 0;
}

.mag1-product-cards
    .pg-paginator
    c-rocket-button:nth-of-type(1)
    button::before {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.mag1-product-cards
    .pg-paginator
    c-rocket-button:nth-of-type(2)
    button::before {
    transform: rotate(45deg) translate(-2px, 2px);
}

/* Figma drops the jump-to-last control. */
.mag1-product-cards .pg-paginator c-rocket-button:nth-of-type(3) {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Right: Show: N Per Page
   -------------------------------------------------------------------------- */

/* The "Showing" / "products per page" labels are replaced by the two pseudo
   elements below so that the whole sentence sits inside the dropdown button. */
.mag1-product-cards .items-per-page p1 {
    display: none !important;
}

.mag1-product-cards .items-per-page .page-size-selector {
    width: 181px;
}

.mag1-product-cards .items-per-page .combobox-button {
    box-sizing: border-box;
    width: 181px;
    height: 40px;
    min-height: 40px;
    padding: 10px 14px;
    gap: 4px;
    justify-content: center;
    background: transparent !important;
    border: 1px solid #85888e !important;
    border-radius: 0 !important;
    box-shadow:
        inset 0 0 0 1px rgba(12, 14, 18, 0.18),
        inset 0 -2px 0 rgba(12, 14, 18, 0.05);
}

.mag1-product-cards .items-per-page .selected-value {
    flex: 0 0 auto;
    margin-right: 0 !important;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #f7f7f7;
}

.mag1-product-cards .items-per-page .selected-value::before {
    content: "Show: ";
}

.mag1-product-cards .items-per-page .selected-value::after {
    content: " Per Page";
}

/* The bundled caret is drawn in the top third of its 16x16 viewBox, so the box
   centres while the ink reads high. It is replaced with the same CSS chevron
   the previous/next buttons use, which also matches the thin chevron Figma
   asks for instead of a solid caret. */
.mag1-product-cards .items-per-page .icon-position {
    display: none !important;
}

.mag1-product-cards .items-per-page .combobox-button::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border: solid #ffffff;
    border-width: 0 1.667px 1.667px 0;
    transform: translateY(-2px) rotate(45deg);
}

/* The open list has to line up with the 181px trigger. hlwCombobox paints its
   background with var(--pg-dark-bg), a Prime Guard token this site never
   defines, so without an explicit colour the list renders see-through over the
   footer. */
.mag1-product-cards .items-per-page .dropdown-menu {
    width: 181px;
    border: 1px solid #85888e;
    border-radius: 0;
    background-color: #292929;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   Mobile
   --------------------------------------------------------------------------
   225px of pager + 181px of dropdown do not fit on a 375px viewport, so the
   two halves stack. hlwSearchPaginator.css already switches to a column at
   768px; these rules only centre the result and drop the asymmetric padding
   the desktop spec needs. No mobile mock exists for this ticket.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .mag1-product-cards .pagination-wrapper {
        flex-direction: column;
        gap: 16px;
        min-height: 0;
        padding: 8px 0 0;
    }

    .mag1-product-cards .page-controls,
    .mag1-product-cards .items-per-page {
        width: 100%;
        justify-content: center;
    }

    .mag1-product-cards .page-numbers.pg-paginator {
        padding: 0;
    }
}

/* ==========================================================================
   MAG1-64 — "Shop By Category" carousel (b2c_lite_commerce:shopCategory)

   Two asks on the category page: show the full category name, and make the
   label white instead of the brand red.

   The name was never truncated server-side — the whole string is in the DOM
   (scrollWidth 291px against a 134px column). What clips it is the plain SLDS
   utility `.slds-truncate` (overflow:hidden; text-overflow:ellipsis;
   white-space:nowrap) that commerce_search-product-field puts on its own
   wrapper. Letting it wrap is enough: the card's grid rows are content-sized,
   so the card grows instead of cutting the text off.

   The red is not this component's own colour. It is the site link colour,
   --dxp-s-link-text-color (#DA322A), applied by dxp-slds-extensions' generic
   `a:link` rule — the same rule that paints the breadcrumbs. The override has
   to be scoped here, and it has to be !important: that rule is (0,2,2) and a
   scoped selector only ties it.

   Hover keeps the site's own link convention — shift to
   --dxp-s-link-text-color-hover and underline. It needs its own rule because
   the idle !important above would otherwise beat the site's a:hover and the
   labels would end up with no hover state at all.

   align-content: once the labels have different heights, li.grid-item (flex:1)
   stretches every card to the tallest one and the slack lands in the middle
   `auto` grid row, so the images and the first line of each name drift apart.
   Packing the rows to the top keeps all six aligned; the cards end ragged.

   b2c_lite_commerce-shop-category is a synthetic-shadow host, so site CSS
   reaches inside it. On this site the component only exists on the category
   page, and styles.css is per-site, so nothing else is affected.
   ========================================================================== */

b2c_lite_commerce-shop-category .slds-truncate {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

b2c_lite_commerce-shop-category section.cardContainerGrid {
    align-content: start !important;
}

b2c_lite_commerce-shop-category .fieldsArea a,
b2c_lite_commerce-shop-category .fieldsArea a:link,
b2c_lite_commerce-shop-category .fieldsArea a:visited {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

b2c_lite_commerce-shop-category .fieldsArea a:hover,
b2c_lite_commerce-shop-category .fieldsArea a:focus {
    color: var(--dxp-s-link-text-color-hover, #E0534D) !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   MAG1-65 — Category / PLP sort control (hlwCombobox)
   --------------------------------------------------------------------------
   Figma draws the sort control as a single outlined button reading
   "Sort By: <value>". Live it rendered as bare text with no border, and the
   open list showed the product grid through it.

   Both symptoms are one cause: hlwCombobox paints the trigger with
   `border: 1px solid var(--pg-dark-bg)` and `background-color:
   var(--pg-dark-bg)`, and the menu the same way. That Prime Guard token is
   only defined on this site inside the facet panel (see the MAG1-31 block
   above), so here it resolves to nothing — the background falls back to
   transparent and the whole border shorthand is invalid at computed-value
   time, which collapses it to `none`.

   hlwCombobox and its host hlwResultsLayout are shared with the Highline
   Warren and Service Champ storefronts, so no component is touched. Everything
   below is scoped to `.mag1-product-cards`, the customCssClasses value on the
   c:hlwResultsLayout node of the detail_0ZG and global_search views — the only
   two places this control renders on Mag 1 — and narrowed further to the
   `sort-selector` class hlwResultsLayout passes to the combobox, so the
   results-per-page dropdown styled by MAG1-66 is unaffected.
   ========================================================================== */

/* The header row has to share the content container's bounds, or nothing below
   can line up with the grid. hlwResultsLayout caps .layout-container at
   87.5rem and centres it but leaves .content-header full-bleed, so past about
   1480px of content width the two drift apart by half the overflow — at 1920px
   the grid ends 180px short of the sort control. Mirroring the cap puts the
   header's edges on the grid's at every width. */
.mag1-product-cards .content-header {
    max-width: 87.5rem;
    margin-left: auto;
    margin-right: auto;
}

/* Figma puts the whole sentence inside the outlined button, so the separate
   "Sort by" label hlwResultsLayout renders beside it is replaced by the
   ::before further down. */
.mag1-product-cards .content-header .sort-container > label {
    display: none;
}

.mag1-product-cards .content-header .sort-container {
    gap: 0;
}

/* The outlined box is sized by its label. hlwCombobox stretches both the
   container and the button to `width: 100%`, which in this flex row would run
   the border out to the full column; `auto` lets the host shrink-wrap instead,
   so the box follows the selected option the way the mock draws it. */
.mag1-product-cards .content-header .sort-selector {
    width: auto;
}

.mag1-product-cards .content-header .sort-selector .combobox-button {
    box-sizing: border-box;
    width: auto;
    height: 40px;
    min-height: 40px;
    padding: 10px 14px;
    gap: 4px;
    justify-content: center;
    background: transparent !important;
    border: 1px solid #85888e !important;
    border-radius: 0 !important;
    box-shadow:
        inset 0 0 0 1px rgba(12, 14, 18, 0.18),
        inset 0 -2px 0 rgba(12, 14, 18, 0.05);
}

.mag1-product-cards .content-header .sort-selector .selected-value {
    flex: 0 0 auto;
    margin-right: 0 !important;
    padding: 0 2px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #f7f7f7;
}

.mag1-product-cards .content-header .sort-selector .selected-value::before {
    content: "Sort By: ";
}

/* Same caret swap as the pager: the bundled icon is drawn in the top third of
   its 16x16 viewBox, so the element box centres while the ink reads high. The
   CSS chevron is self-centring and matches the thin chevron in the mock. */
.mag1-product-cards .content-header .sort-selector .icon-position {
    display: none !important;
}

.mag1-product-cards .content-header .sort-selector .combobox-button::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border: solid #ffffff;
    border-width: 0 1.667px 1.667px 0;
    transform: translateY(-2px) rotate(45deg);
}

/* The open list reads through to the product grid without an explicit fill,
   for the same undefined-token reason as the trigger.

   It also has to size itself, not the trigger: hlwCombobox anchors it with
   `left: 0` and `min-width: 100%`, so a shrink-to-fit box is capped at the
   trigger's width and the longer options wrap onto two lines whenever a short
   one is selected. Anchoring it to the right instead lets `max-content` grow it
   leftwards, so every option stays on one line and the list stays flush with
   the control and inside the page. */
.mag1-product-cards .content-header .sort-selector .dropdown-menu {
    left: auto;
    right: 0;
    width: max-content;
    border: 1px solid #85888e;
    border-radius: 0;
    background-color: #292929;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.mag1-product-cards .content-header .sort-selector .option-content {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #f7f7f7;
}

/* --------------------------------------------------------------------------
   Results line
   --------------------------------------------------------------------------
   Figma starts it at the product grid's left edge, not at the page's.
   .content-header is a full-width row sitting above .layout-container, whose
   grid puts the main column at 17.8125rem + a 3rem gap, so repeating that
   offset lines the text up with the first card while the sort control stays
   flush right. Below 769px the layout collapses to a single column and the
   offset is dropped.
   -------------------------------------------------------------------------- */

.mag1-product-cards .content-header .result-count {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #ffffff;
}

@media (min-width: 769px) {
    .mag1-product-cards .content-header .result-count {
        margin-left: calc(17.8125rem + 3rem);
    }
}

/* Figma puts FILTER, the results line and the sort control on one row.
   hlwResultsLayout renders .content-header as a full-width row *above*
   .layout-container, so the facet column is pulled back up over it by exactly
   the height that row occupies: 40px of control + its 16px padding-bottom +
   its 20px margin-bottom. Only the aside moves — the product grid keeps its
   place, and the left half of the header is free now that the results line
   starts at the grid edge. The two boxes overlap, which is fine: .aside-section
   comes later in the tree and is not positioned, so it paints and hit-tests
   above the header (verified with a real pointer on the CATEGORIES toggle).

   Held back to 64em, the breakpoint where hlwResultsLayout stops showing its
   mobile Filter button and the facet panel stops being a slide-in drawer.
   Below it the three controls do not share a row at all. */
@media (min-width: 64em) {
    .mag1-product-cards .layout-container .aside-section {
        margin-top: -76px;
    }
}

/* ==========================================================================
   MAG1-67 — Category PLP: padding around the header banner, per Figma
   --------------------------------------------------------------------------
   Figma (1440 frame, measured off the mock): the banner is an inset band —
   80px of gutter either side, 48px between it and the header, 48px below it,
   1280px wide. Not a full-bleed hero.

   Both sections on detail_0ZG were on the theme default for
   .comm-section-container, `padding: 48px 32px`. The 48s were right; the gap
   under the banner was not, because section A's padding-bottom and section B's
   padding-top stacked into 96px. So the vertical fix is just to zero section
   B's top and let section A own the whole 48. That part lives in each node's
   `dxpStyle`, because community_layout:section resolves padding through
   --dxp-style-c-padding-* behind a two-class selector.

   The 80px gutter is here instead, for one reason: `dxpStyle` holds a single
   value with no breakpoints, and 80px a side on a 360px phone leaves 200px of
   content. Keeping it in a media query lets the theme's own responsive gutter
   (32px at 1025+, 16px below) stand on small screens, and the Figma only
   specifies desktop anyway.

   Both sections get it so the banner and everything under it — breadcrumb,
   category carousel, product grid — share one left and right edge, which is
   what the ticket is asking for.

   !important is required and sufficient: the rule it has to beat is the
   `dxpStyle_<uuid>` class the builder emits on the same element, which ties at
   (0,2,0) and would otherwise win on order. Verified by injection before
   deploying — a plain rule here does not move the computed value.
   ========================================================================== */

@media (min-width: 1025px) {
    .mag1-category-header-section,
    .mag1-category-content-section {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }
}

/* The last gap the ticket flags is under the "Shop By Category" carousel.
   Most of it was MAG1-64's doing and is already gone: while the names were
   clipped to one line by .slds-truncate, the grid rows still sized to the
   tallest card and the slack showed up as a band of empty space under the
   labels. What is left is the carousel list's own 16px of padding, which has
   nothing below it to separate from.

   Measured from the last label's ink to the results block: 60px below against
   38px from the breadcrumb to the heading above. Dropping the bottom padding
   alone brings it to 44px and leaves the side and top padding — which do
   separate the cards from the prev/next arrows — untouched.

   b2c_lite_commerce-shop-category is a synthetic-shadow host, so a site rule
   reaches inside it, and on this site the component only exists on the
   category page.

   !important is required: the 1rem comes from a
   "@media (min-width: 64.0625em)" block in the component's own sheet, where
   the selector is ".carousel-container.lwc-xxxx" — (0,2,0) against this rule's
   (0,1,2), and injected after the <link> to this file. Without it the
   declaration is in the sheet and simply never wins. */
b2c_lite_commerce-shop-category ul.carousel-container {
    padding-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   The MAG1-15 scrim renders in Chrome and not in Firefox.

   dxp_content_layout-banner is a custom element the component never gives a
   `display` to, so it computes to `inline`. MAG1-15 adds `position: relative`
   to it and hangs the scrim off `::after` with `position: absolute; inset: 0`.

   For an inline containing block the rectangle an absolutely positioned
   descendant resolves against is the union of the inline's fragment boxes, and
   the engines disagree about what that is here: Chrome gives the full painted
   band (measured 1473x269) and paints the gradient, Firefox collapses it and
   the gradient covers nothing. The banner then renders at full brightness with
   white text over it — unreadable, and nothing like the Figma.

   Making the host a block removes the ambiguity: the containing block becomes
   an ordinary padding box in every engine. Verified by screenshotting the same
   URL in headless Firefox before and after — the sampled pixels across the
   band go from (199,140,39) at the left edge to (28,26,25), which is Chrome's
   (27,25,25). No change in Chrome.

   Belongs to MAG1-15's rule above; it lives here so this ticket's diff stays
   one contiguous block in a file eight MAG1 branches are appending to.
   -------------------------------------------------------------------------- */
.mag1-category-header {
    display: block;
}

/* ==========================================================================
   MAG1-86 — Lube Advisor page content width

   The page was full-bleed: the advisor host measured 1376px at a 1440px
   viewport (the section's 32px of theme padding, nothing else), so the VIN
   input stretched edge to edge and the dropdown row had far more room than it
   needs. Capping it at 1024px lines the page up with the Service Champ Parts
   Look Up proportions.

   The cap cannot come from the builder. `community_layout:section` exposes a
   `maxContentWidth` attribute, but it emits no `max-width` whatsoever — the
   same thing the MAG1-32 article block ran into higher up in this file.

   The hook is the section's `data-component-id`, not a `customCssClasses` on
   the node. LWR derives it from the last four characters of the node's UUID in
   the view's content.json (`0a2f3803-…-9fa8515b020e` → `section-020e`), and
   that suffix is unique across every view on this site, so it is as specific
   as a hand-written class and costs no metadata: the view bundle stays out of
   the PR entirely, which also keeps it clear of the changed-sources trap that
   deletes a view's device versions.

   It targets `.column-content` — each column's own flex wrapper — rather than
   the single `.columns-content` around all three, because that one already
   carries the theme's `max-width: 1800px` and would have to be fought with
   `!important`. The section stacks its three columns (title, rule, advisor) at
   full width, so centring each one independently lands them on the same left
   and right edge.

   The advisor's own column is excluded. Capping it caught the results grid as
   well as the entry fields, and that grid is five cards to a row, so every card
   dropped from ~265px to ~195px. The component caps its entry fields itself
   (`.mag1-lube-form`) and centres them in this same width, so the form still
   lines up with the heading and the rule while the cards keep the full page.
   The exclusion keys off the advisor element rather than the column's position,
   so reordering the section in the builder cannot silently re-cap the grid.
   ========================================================================== */
:root {
    --mag1-lube-advisor-width: 1024px;
}

[data-component-id="section-020e"]
    .column-content:not(:has(c-mag1-lube-advisor)) {
    max-width: var(--mag1-lube-advisor-width);
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   MAG1-83 — Why MAG 1: side gutters on every section

   All five sections were on the theme default for .comm-section-container,
   `padding: 48px 32px`, so the copy started 32px from the viewport edge, which
   is what the ticket is reporting. The home page's content sections sit at
   96px and the client has already signed that spacing off, so this matches the
   sibling marketing page rather than inventing a number. (The category PLP is
   at 80px per its own Figma — a catalogue template, not this one.)

   Not dxpStyle, which is how the home carries its 96px: that attribute holds a
   single value with no breakpoints, and 96px a side on a 360px phone leaves
   168px of content. A media query lets the theme's own responsive gutter
   (32px at 1025+, 16px below) stand on small screens — the same split MAG1-67
   settled on for the category PLP.

   The class is new because the three sections that already carry one share it
   with other pages: section-bg-mag1-grey is on six views, and mag1-benefits
   and mag1-news-section are both on the home. Styling those would move pages
   this ticket is not about.

   !important is required: the rule it has to beat is the dxpStyle_<uuid> class
   the builder emits on the same element, which ties at (0,2,0) and would
   otherwise win on source order.
   ========================================================================== */

@media (min-width: 1025px) {
    .mag1-why-section {
        padding-left: 96px !important;
        padding-right: 96px !important;
    }
}

/* ==========================================================================
   MAG1-80 — the Lube Advisor's hover on every MAG 1 CTA

   Find Lubricant is a stock lightning-button that no rule styles, so it gets
   the DXP treatment untouched: #DA322A lightens to #E0534D and Kinetics paints
   a 140x140 radial glow on ::before that follows the cursor. That is the
   experience the ticket asks for, so nothing here changes it — the work is
   making the rest of the site match it.

   Most of the site follows from retargeting --mag1-cta-bg-hover below. Three
   surfaces do not, because each pins its background with an !important that
   outranks any hover rule, which is why they had no hover at all:

     - PLP / Search cards (MAG1-29) and Lube Advisor result cards (MAG1-23)
     - the news "Show More", pinned in the mainAppPage headMarkup
     - the home hero, where hlwContentSplitBanner fades opacity instead of
       recolouring

   Two kinds of CTA get the glow by a route of their own, because Kinetics does
   not paint it for them:

     - Anchors. Kinetics has two halves and only the CSS one is generic: its
       rules key off the kx-scope / kx-type attributes and will decorate any
       element carrying them, but nothing on the page hands those attributes
       out — lightning-button emits them for itself when it renders, and
       dxp_base:button rendering an <a> for a link does not. So SEARCH NOW,
       LEARN MORE, SHOW MORE and the Why MAG 1 and Find a Distributor CTAs get
       nothing from it. (The other half, the one that writes the pointer
       position, is wired up by the component and would still be missing even
       if the attributes were added by hand.)
       The anchor rule at the end paints the glow on their background-image.
       It is static rather than cursor-following: Kinetics tracks the pointer by
       writing two custom properties inline as the mouse moves, and no CSS can
       reproduce that. The rule reads those same properties and falls back to
       the centre, so if a mousemove handler is ever added to the site shell
       these start following the cursor with no change here.

     - rocketProductCard. MAG1-29 paints its visible "View Products" label on
       ::before, the same pseudo-element Kinetics uses for the glow, so the two
       cannot share it. The last rule below paints an equivalent glow on the
       button's own background-image instead, reusing the pointer position
       Kinetics is already tracking. mag1ProductCard has no label swap, so it
       keeps the native glow and needs none of this.
   ========================================================================== */

:root {
    /* Retargeted from the Figma value #B82820 to the tint DXP derives from
       PrimaryAccentColor, which is what the Lube Advisor button actually does.
       Every rule and component reading this token follows automatically —
       the MAG1-29 and MAG1-23 SLDS hooks, the MAG1-16 carousel CTA, and
       mag1RelatedProductsItem and mag1ShopNowButton, which both read it as
       var(--mag1-cta-bg-hover, #b82820). */
    --mag1-cta-bg-hover: #E0534D;
}

/* The card CTAs. !important answers the !important in MAG1-29 and MAG1-23 —
   same property, same element, so nothing weaker lands. */
.mag1-product-cards c-rocket-product-card .card-cta button:hover,
.mag1-product-cards c-rocket-product-card lightning-button button:hover,
.mag1-product-cards c-mag1-product-card .card-cta lightning-button button:hover {
    background-color: var(--mag1-cta-bg-hover) !important;
    border-color: var(--mag1-cta-bg-hover) !important;
}

/* News "Show More". The rule being beaten lives in the mainAppPage headMarkup,
   which loads after this file, so matching its specificity is not enough —
   :hover is what puts this ahead (0,2,1 against 0,1,1). */
.mag1-news-showmore a:hover,
.mag1-news-showmore button:hover {
    background: var(--mag1-cta-bg-hover) !important;
}

/* Home hero. hlwContentSplitBanner is shared with the other storefronts and is
   not touched: it fades its CTA with `opacity: 75%` on hover instead of
   recolouring. The fade is dropped and the colour applied here, where only
   Mag11 reads it. */
c-hlw-content-split-banner .alternate-button-color:hover {
    background-color: var(--mag1-cta-bg-hover) !important;
    border-color: var(--mag1-cta-bg-hover) !important;
    opacity: 1 !important;
}

/* The glow for the cards, since their ::before is spoken for.

   Kinetics writes the pointer position onto every brand button it decorates,
   including these, as two inline custom properties that update on every
   mousemove:

       style="--slds-kx-button-pointer-position-x: 46px;
              --slds-kx-button-pointer-position-y: 22px;"

   So the glow does not need a pseudo-element at all — it can be painted on the
   button's own background-image, which the component leaves at `none`. That is
   a different property from the `background-color` MAG1-29 pins with
   !important, so the two do not compete, and ::before keeps the label while
   ::after keeps the ripple.

   `circle 70px` reproduces the geometry of the native glow, which is a 140x140
   box sized `closest-side`. The .75 alpha is baked into the colour because
   Kinetics applies it as `opacity` on a separate layer and there is none here.
   The 50% fallbacks keep the rule harmless if the variables ever stop arriving.

   Known difference from the native glow: a background-image does not transition
   between gradient values as reliably as the pseudo-element's `transition: all`,
   so this one appears rather than fades. On a 44px-tall button that is not
   noticeable. */
.mag1-product-cards c-rocket-product-card lightning-button button:hover,
.mag1-product-cards c-rocket-product-card .card-cta button:hover {
    background-image: radial-gradient(
        circle 70px at var(--slds-kx-button-pointer-position-x, 50%)
                       var(--slds-kx-button-pointer-position-y, 50%),
        rgba(1, 68, 134, 0.75),
        rgba(0, 0, 0, 0)
    ) !important;
}

/* The glow for the anchor CTAs, and for any brand button Kinetics skips.

   dxp_base:button renders an <a> when it points at a link, and Kinetics never
   decorates anchors — no kx-scope, no ripple, no glow. But the element itself
   has everything the glow needs: it is in the light DOM, it is already
   position: relative, and its background-image is `none`. So the same technique
   the cards use works here, just without a pointer position to read.

   The variables are the ones Kinetics would have written. Nothing writes them
   on an anchor today, so both fall back to 50% and the glow sits in the centre
   of the button instead of following the cursor. That is the one visible
   difference from the Lube Advisor. Adding a mousemove handler that sets these
   two properties — in the site shell, the only place that loads everywhere —
   would make these track the cursor without touching this rule, which is why it
   is written against the variables rather than hardcoding the centre.

   Deliberately not scoped to a container: this is the site-wide default for a
   brand CTA, so anything the builder adds later is covered. The card rule above
   is more specific and still wins where both match.

   `:not([kx-scope])` is load-bearing. Without it this also matches the buttons
   Kinetics *does* decorate — Find Lubricant, the Lube Advisor result cards,
   the Contact Us Submit — which already paint the real glow on ::before. Both
   would render, stacking two 0.75-alpha layers, and the result is visibly
   heavier and darker than the native one. Anchors need no such guard: Kinetics
   never touches them. rocketProductCard is the one decorated button that still
   needs painting here, because MAG1-29 took its ::before for the label, and its
   own rule above is more specific than this one. */
a.slds-button_brand:hover,
button.slds-button_brand:not([kx-scope]):hover {
    background-image: radial-gradient(
        circle 70px at var(--slds-kx-button-pointer-position-x, 50%)
                       var(--slds-kx-button-pointer-position-y, 50%),
        rgba(1, 68, 134, 0.75),
        rgba(0, 0, 0, 0)
    ) !important;
}

/* Shop Now, on the size-specific PDPs.

   The two MAG 1 PDP shapes are told apart by taxonomy, not by a field: families
   sit in the navigable topic categories, individual sizes in the non-navigable
   "Size Specific Products" category, and mag1ShopNowButton renders only for the
   latter. See the component for the full reasoning.

   The repeated class is not a typo. The component declares
   `background: ... !important` on its own :hover, and the shorthand resets
   background-image; its compiled selector carries the LWC scope attribute, so
   it lands at (0,3,0) and a plain site rule at (0,2,1) loses. Repeating the
   class reaches (0,3,2).

   The tidy fix is `background-color` in mag1ShopNowButton.css. It is not done
   here because that bundle currently carries unmerged work in the org, and
   deploying the repo copy of it would destroy that. Worth revisiting once it
   has landed — at which point this selector can go back to one class. */
c-mag1-shop-now-button a.mag1-shop-now.mag1-shop-now:hover,
c-mag1-shop-now-button a.mag1-shop-now.mag1-shop-now:focus {
    background-image: radial-gradient(
        circle 70px at var(--slds-kx-button-pointer-position-x, 50%)
                       var(--slds-kx-button-pointer-position-y, 50%),
        rgba(1, 68, 134, 0.75),
        rgba(0, 0, 0, 0)
    ) !important;
}

/* The Products grid at the bottom of the family PDPs.

   The trigger is the CTA itself, not the tile. mag1RelatedProductsItem wraps
   the whole tile — image, name, code and CTA — in one anchor and recolours the
   CTA from `.tile__link:hover`, so the button lights up from anywhere on the
   card. That reads fine as "this card is active" for a colour change, but a
   glow is a cursor cue: pointing at the product image and seeing a glow sitting
   in a button 500px away looks broken. Keying it off `.tile__cta:hover` keeps
   the component's card-wide recolour and limits the glow to the pointer
   actually being on the button.

   No :focus pair, unlike the colour. The span is not focusable, and the glow
   says "the pointer is here", which is not what reaching the tile by keyboard
   means — the component's own colour change already covers that case.

   Reads the same variables as every other rule here. Kinetics never writes
   them on a <span>, but the MAG1-80 pointer script in the mainAppPage head
   markup does, so this tracks the cursor wherever that script is loaded and
   falls back to the centre where it is not.

   No !important needed — the component sets background-color and leaves
   background-image alone. */
c-mag1-related-products-item .tile__cta:hover {
    background-image: radial-gradient(
        circle 70px at var(--slds-kx-button-pointer-position-x, 50%)
                       var(--slds-kx-button-pointer-position-y, 50%),
        rgba(1, 68, 134, 0.75),
        rgba(0, 0, 0, 0)
    );
}

/* ==========================================================================
   MAG1-93 — PDP: collapse the chrome left behind by empty blocks
   --------------------------------------------------------------------------
   Every component in the lower half of a Product Family PDP already renders
   nothing when it has no data: saltboxProductContentDetailDisplay with no
   Product_Content_Detail__c rows and rocketSpecTable with no Rocket_Spec__c
   rows both collapse to 0px. What does not collapse is the Experience Builder
   chrome around them — a community_layout:section keeps its 48px of padding
   top and bottom, and the dxp_layout:columns that holds the spec accordion
   keeps the 48px top margin its dxpStyle writes. On a family PDP with neither
   piece of data that stacks to 248px of empty page between the PDF panels and
   "SIZES OFFERED", against the 104px of section rhythm the rest of the page
   uses.

   `:empty` is the test for "this component drew nothing". Under LWC synthetic
   shadow the rendered markup is a real child of the host element, so the host
   is childless exactly when the component rendered no rows — verified against
   a PDP with CMS content and one without.

   :has() support is the same as noted in the MAG1-15 block above. */

/* The CMS content section: 96px of padding wrapped around 0px of content. */
.comm-section-container:has(c-saltbox-product-content-detail-display:empty) {
    display: none;
}

/* The spec accordion's wrapper. The 48px margin arrives from a dxpStyle rule
   in an inline <style>, which beats this sheet on source order — hence the
   !important, as everywhere else in this file. */
dxp_layout-columns:has(.mag1-pdp-specs:empty) {
    margin-top: 0 !important;
}

/* MAG1-94 start */
/* The site theme floats every lightning-input label inside a bordered frame
   (lightning-input label.slds-form-element__label { position: absolute }), so on the
   Contact Us form the Email and Phone labels read as placeholder text and the
   required asterisk on Email is invisible - while the fields Flow renders itself
   show a normal stacked label. Stack these two the same way, drop the frame that
   used to stand in for the input box, and put the invalid-field border back on the
   input, where the other fields carry it. !important throughout: the theme's own
   selectors outrank these. */
.contact-form-flow lightning-input label.slds-form-element__label {
    position: static;
    left: auto;
    color: #ffffff;
}

.contact-form-flow lightning-input lightning-primitive-input-simple > div {
    border: none !important;
    border-radius: 0 !important;
}

.contact-form-flow lightning-input.slds-has-error .slds-input {
    border: 2px solid #c23934 !important;
}
/* MAG1-94 end */

/* MAG1-98 start */
/* The Subject dropdown on the Contact Us flow.

   Flow renders a DropdownBox choice as a native <select> inside
   lightning-select, with no lightning-picklist wrapper around it. theme2.css
   does carry select rules, but every one of them is scoped
   `lightning-picklist lightning-select ...`, so none of them match here and the
   control falls back to bare SLDS: 32px tall against the 54px of every sibling
   input, and no colour of its own. Inheriting the site's white body text over
   the white .slds-select background leaves the closed value, every <option> in
   the native list, and the caret .slds-select_container paints on ::after all
   white-on-white - the field reads as an empty box, and the open list shows
   only whichever row the OS highlights.

   Colour goes on the container as well as the select: the caret is a
   border-colour triangle on the container's ::after and takes its colour from
   there, not from the select. The <option> rule is what Chrome, Edge and
   Firefox read when painting the list; Safari paints it from the select
   instead, which is why both carry the same pair.

   #000 rather than a token: the sibling inputs carry no author colour at all,
   so they fall through to the UA's `fieldtext` and compute to pure black.
   Naming the value here matches them exactly and does not depend on each
   browser's idea of `fieldtext`. Against the white field that is 21:1, well
   past the 4.5:1 WCAG 2.1 AA needs for normal text.

   Height reuses --var-form-input-element-min-height, the same variable
   theme2.css feeds those inputs, so the two stay in step if the theme ever
   changes it. Font family, size and weight already matched and are left alone.

   !important throughout, as everywhere else in this file: the theme's own
   selectors outrank these. */
.contact-form-flow lightning-select .slds-select_container,
.contact-form-flow lightning-select select.slds-select,
.contact-form-flow lightning-select select.slds-select option {
    color: #000000 !important;
}

.contact-form-flow lightning-select select.slds-select,
.contact-form-flow lightning-select select.slds-select option {
    background-color: #ffffff !important;
}

.contact-form-flow lightning-select select.slds-select {
    height: var(--var-form-input-element-min-height, 54px) !important;
    padding-left: 0.75rem;
}
/* MAG1-98 end */

/* ==========================================================================
   MAG1-102 — Facet option rows overlap and lose their left alignment
   --------------------------------------------------------------------------
   The MAG1-31 treatment above paints each option as a padded, rounded pill on
   `.slds-checkbox__label` and sizes it with `min-height` + `align-items`.
   Neither can work, because on this storefront that <label> computes to
   `display: inline` — Experience Cloud does not ship the SLDS rule that would
   make it a flex box, so the element keeps the UA default.

   On an inline box `min-height` and `align-items` are ignored, vertical
   padding does not grow the line box, and a label that wraps paints as two
   independent fragments. Measured on the live PLP: the pill came out 33px /
   53px instead of Figma's 38px / 58px, its top edge sat 7px above its own
   <li> and crossed into the row above, and the second line of a wrapped label
   lost the 10px start padding, so it began at x+86 while every single-line
   label began at x+96. That is both halves of the ticket — the overlap and
   the misalignment — from one missing declaration.
   ========================================================================== */

/* Turns the `min-height: 36px` and `align-items: center` already declared in
   the MAG1-31 block back on. Rows land on 38px, and 58px once a label wraps. */
.mag1-product-cards c-hlw-facet-panel .facet-list-item .slds-checkbox__label {
    display: flex;
}

/* lightning-input reserves 16px of padding plus 4px of margin under every
   field for the help and error text a facet checkbox never renders. Left
   alone, the taller pill would push each row from 44px to 62px and stretch
   the panel by ~160px; dropping the gutter keeps today's density. */
.mag1-product-cards c-hlw-facet-panel .facet-list-item lightning-input.slds-form-element {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* "See more" is a direct child of .facet-body, so it misses the 6px of gutter
   .facet-list-item adds; its own 10px of padding left it 6px adrift of the
   option labels above it. */
.mag1-product-cards c-hlw-facet-panel .see-more-btn {
    padding-left: 16px;
}
/* MAG1-102 end */