/* ============================================================================
   LS FABRICATION — guide / product cross-links
   ----------------------------------------------------------------------------
   Two components, one sheet, because they are two ends of the same link and
   splitting them across blog.css and woocommerce.css is how a pair like that
   drifts apart.

     .lsfab-guide-parts   "Parts used in this guide", foot of an install guide
     .lsfab-guide-related "Related reading", foot of the round-up articles
     .ls-featured-in      "Featured in", foot of the product description

   Enqueued by inc/lsfab-install-guides.php at priority 130, i.e. after every
   other lsfab sheet, so anything here wins a same-specificity tie against them.

   Tokens only. No hard-coded colours, spacing or radii — style.css owns those.
   ========================================================================= */


/* ============================================================================
   1. PARTS USED IN THIS GUIDE
   ========================================================================= */

body .lsfab-guide-parts,
body .lsfab-guide-related {
    margin-top: var(--ls-space-8);
    padding-top: var(--ls-space-6);
    border-top: 1px solid var(--ls-hairline);
    font-family: var(--ls-font-body);
}

/* Matches the h2 rule the guide template already uses, minus its own
   border-bottom — the section border above is doing that job here and two
   rules within 30px of each other reads as a mistake. */
body .lsfab-guide-parts__title,
body .lsfab-guide-related__title {
    margin: 0 0 var(--ls-space-5);
    padding: 0;
    border: none;
    font-family: var(--ls-font-display);
    font-size: var(--ls-h3);
    font-weight: 700;
    line-height: var(--ls-leading-snug);
    letter-spacing: normal;
    text-transform: none;
    color: var(--ls-text);
}

/* auto-fill rather than auto-fit: with one product in the map (which is the
   common case — most guides cover a single part) auto-fit would stretch that
   lone card the full content width and it would read as a banner, not a card. */
body .lsfab-guide-parts__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--ls-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

body .lsfab-guide-parts__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

body .lsfab-guide-parts__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--ls-space-4);
    background-color: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-lg);
    color: var(--ls-text);
    text-decoration: none;
    transition: border-color var(--ls-transition), background-color var(--ls-transition);
}

body .lsfab-guide-parts__link:hover,
body .lsfab-guide-parts__link:focus-visible {
    background-color: var(--ls-surface-raised);
    border-color: var(--ls-red);
    color: var(--ls-text);
}

body .lsfab-guide-parts__link:focus-visible {
    outline: none;
    box-shadow: var(--ls-focus-ring);
}

body .lsfab-guide-parts__media {
    display: block;
    margin-bottom: var(--ls-space-4);
}

/* The twins are not duplicates. `.single-post .entry-content img` is (0,2,1)
   and silently outranks `body .lsfab-guide-parts__media img` at (0,1,3) — the
   same trap documented on .lsfab-product-card in blog.css. Do not delete
   either line. */
body .lsfab-guide-parts__media img,
.single-post .entry-content .lsfab-guide-parts__media img,
.single-post .et_pb_post_content .lsfab-guide-parts__media img {
    display: block;
    width: 100%;
    height: 190px;
    margin: 0;
    object-fit: cover;
    border-radius: var(--ls-radius-md);
    background-color: var(--ls-bg);
}

body .lsfab-guide-parts__name {
    display: block;
    font-family: var(--ls-font-display);
    font-size: var(--ls-h5);
    font-weight: 700;
    line-height: var(--ls-leading-snug);
    color: var(--ls-text);
}

body .lsfab-guide-parts__price {
    display: block;
    margin-top: var(--ls-space-2);
    font-size: var(--ls-small);
    color: var(--ls-text-soft);
}

/* WooCommerce wraps a sale price in <del>/<ins>; without this the <ins> arrives
   underlined from the UA sheet and the strikethrough sits at full text colour,
   which reads louder than the live price next to it. */
body .lsfab-guide-parts__price del {
    opacity: 0.6;
    margin-right: var(--ls-space-1);
}

body .lsfab-guide-parts__price ins {
    text-decoration: none;
    color: var(--ls-text);
}

/* margin-top:auto pins the call to action to the bottom edge of every card, so
   a two-line product name and a one-line one still line their CTAs up. */
body .lsfab-guide-parts__cta {
    display: block;
    margin-top: auto;
    padding-top: var(--ls-space-4);
    font-family: var(--ls-font-display);
    font-size: var(--ls-small);
    font-weight: 700;
    letter-spacing: var(--ls-tracking-button);
    text-transform: uppercase;
    color: var(--ls-red);
}

body .lsfab-guide-parts__link:hover .lsfab-guide-parts__cta,
body .lsfab-guide-parts__link:focus-visible .lsfab-guide-parts__cta {
    color: var(--ls-coral);
}

/* Below ~430px a 210px minimum still fits two columns on some devices but the
   product name breaks to four lines. One column from there down. */
@media (max-width: 430px) {
    body .lsfab-guide-parts__list {
        grid-template-columns: 1fr;
    }

    body .lsfab-guide-parts__media img,
    .single-post .entry-content .lsfab-guide-parts__media img,
    .single-post .et_pb_post_content .lsfab-guide-parts__media img {
        height: 220px;
    }
}


/* ============================================================================
   2. RELATED READING
   ========================================================================= */

body .lsfab-guide-related__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

body .lsfab-guide-related__list li {
    margin: 0 0 var(--ls-space-3);
    padding: 0;
    list-style: none;
}

body .lsfab-guide-related__list li:last-child {
    margin-bottom: 0;
}

body .lsfab-guide-related__list a {
    font-family: var(--ls-font-body);
    font-size: var(--ls-body);
    color: var(--ls-red);
    text-decoration: none;
}

body .lsfab-guide-related__list a:hover {
    color: var(--ls-coral);
    text-decoration: underline;
}


/* ============================================================================
   3. INSTALLATION GUIDE CARD ON THE PRODUCT PAGE — REMOVED 2026-09-04
   ----------------------------------------------------------------------------
   .lsfab-guide-card used to append the install-guide link to the [ls_features]
   stack beside add-to-cart. The same link renders inside the Installation tab,
   so the summary-column copy was dropped and its rules went with it. The red
   treatment it carried now lives on .ls-install__guide in woocommerce.css.
   ========================================================================= */


/* ============================================================================
   4. "FEATURED IN" AT THE FOOT OF THE DESCRIPTION
   ----------------------------------------------------------------------------
   Printed after the compliance warnings by lsfab-install-guides.php, inside
   .et_pb_tab_content. Deliberately shaped like .ls-product-warnings in
   woocommerce.css — same 1a1a1a ground, 2a2a2a hairline, 10px radius and 42px
   icon chip — so the bottom of every description reads as one block of small
   print rather than three competing card styles.

   Hard-coded values, not tokens, for the same reason that block uses them: the
   cascade inside .et_pb_tab_content overrides inherited type and colour.
   ========================================================================= */

body .ls-featured-in {
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-2);
    margin: var(--ls-space-6) 0 0;
}

body .ls-featured-in__head {
    margin: 0;
    padding: 0;
    font-family: var(--ls-font-body);
    font-size: var(--ls-micro);
    font-weight: 600;
    letter-spacing: var(--ls-tracking-eyebrow);
    line-height: 1.3;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

body .ls-featured-in .ls-featured__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

body .ls-featured-in .ls-featured__item:hover,
body .ls-featured-in .ls-featured__item:focus-visible {
    background: #1f1f1f;
    border-color: #3a3a3a;
}

body .ls-featured-in .ls-featured__item:focus-visible {
    outline: none;
    box-shadow: var(--ls-focus-ring);
}

body .ls-featured-in .ls-featured__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #f5f3ff;
    color: #8b5cf6;
    font-size: 20px;
    line-height: 1;
}

body .ls-featured-in .ls-featured__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body .ls-featured-in .ls-featured__title {
    display: block;
    margin: 0;
    color: #fff;
    font-size: var(--ls-body);
    font-weight: 600;
    line-height: var(--ls-leading-snug);
}

body .ls-featured-in .ls-featured__text {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--ls-small);
    line-height: var(--ls-leading-small);
}

@media (max-width: 480px) {
    body .ls-featured-in .ls-featured__item {
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
    }

    body .ls-featured-in .ls-featured__icon {
        width: 36px;
        height: 36px;
        font-size: 17px;
    }
}


/* ============================================================================
   PRINTABLE INSTRUCTIONS — inc/lsfab-install-guides.php
   The block at the foot of a guide that carries the manufacturer PDF. It sits
   OUTSIDE .lsfab-install-guide, because it is appended to the content rather
   than authored inside it, so none of section 4 of blog.css reaches it and the
   button shape is restated here.
   ========================================================================= */

.lsfab-pdf {
    margin: var(--ls-space-7) 0 0;
    padding: var(--ls-space-6);
    background: var(--ls-surface-1);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-xl);
}

body .lsfab-pdf .lsfab-pdf__title {
    margin: 0 0 var(--ls-space-2);
    font-family: var(--ls-font-display);
    font-size: var(--ls-h3);
    font-weight: 700;
    line-height: var(--ls-leading-snug);
    color: var(--ls-text);
}

body .lsfab-pdf .lsfab-pdf__note {
    margin: 0 0 var(--ls-space-5);
    font-size: var(--ls-small);
    line-height: 1.5;
    color: var(--ls-text-soft);
}

body .lsfab-pdf .lsfab-pdf__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-3);
}

body .lsfab-pdf .lsfab-pdf__list > li { margin: 0; padding: 0; }

/* The label goes on the button rather than beside it, because on the trunnion
   post the label IS the choice being made — five sheets, and the year and
   whether the tailgate is removable pick which one. */
.lsfab-pdf .lsfab-pdf__btn {
    display: flex;
    align-items: center;
    gap: var(--ls-space-3);
    min-height: var(--ls-btn-h);
    padding: var(--ls-space-3) var(--ls-space-4);
    background: var(--ls-surface-2);
    border: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-md);
    font-family: var(--ls-font-body);
    font-size: var(--ls-small);
    font-weight: 600;
    line-height: 1.35;
    color: var(--ls-text);
    text-decoration: none;
    transition: background-color var(--ls-transition), border-color var(--ls-transition);
}

/* An inline SVG document mark, not the icon font: this sheet is enqueued on
   product pages too, and a tofu box beside a download link reads as broken. */
.lsfab-pdf .lsfab-pdf__btn::before {
    content: "";
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF0044' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M9.5 14.5 12 17l2.5-2.5'/%3E%3C/svg%3E");
}

.lsfab-pdf .lsfab-pdf__btn:hover {
    background: var(--ls-surface-raised);
    border-color: rgba(255, 0, 68, 0.45);
    color: var(--ls-text);
}

.lsfab-pdf .lsfab-pdf__btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .lsfab-pdf { padding: var(--ls-space-5); }
}