/* ============================================================
   PLUSFAB -- PRODUCTS (2026-10-01, design only)
   The Products module has no template partial: it renders through the
   SHARED universal renderer (prd-* markup, /web/assets/css/products.css).
   This file is a template-scoped presentation layer only -- markup,
   data and the shared stylesheet are untouched. Every rule is prefixed
   with body.tpl-plusfab_industrial so it wins regardless of where the
   shared stylesheet is loaded.
   Language: "product data plate" -- each product image sits on a
   brushed-stainless inspection plate with a perforated strip, white
   body, steel edges, a copper top rule on hover, a square graphite
   "Featured" plate with a copper star, steel type tag with copper
   dash, Archivo title/price, square steel-outline CTA.
============================================================ */

/* -- Section + header -------------------------------------------- */
body.tpl-plusfab_industrial .prd-section {
    background: var(--mt-surface-sunken);              /* #F3F4F5 */
    border-top: 1px solid var(--mt-border-light);
    border-bottom: 1px solid var(--mt-border-light);
}

body.tpl-plusfab_industrial .prd-head { position: relative; padding-bottom: var(--mt-space-8); }
body.tpl-plusfab_industrial .prd-head::after {             /* short copper rule under the header */
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 56px;
    height: 2px;
    transform: translateX(-50%);
    background: var(--mt-accent);
}

body.tpl-plusfab_industrial .prd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-3);
    font-size: 0.75rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #555C63;
}
body.tpl-plusfab_industrial .prd-eyebrow::before,
body.tpl-plusfab_industrial .prd-eyebrow::after {
    content: "";
    flex-shrink: 0;
    width: var(--mt-kicker-rule, 28px);
    height: 2px;
    background: var(--mt-accent);
}

body.tpl-plusfab_industrial .prd-title {
    font-family: var(--mt-font-heading);
    font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem);
    font-weight: var(--mt-weight-bold);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ally-navy-700);
}
body.tpl-plusfab_industrial .prd-subtitle {
    font-size: 1.02rem;
    line-height: 1.65;
    color: #555C63;
}

/* -- Grid -------------------------------------------------------- */
body.tpl-plusfab_industrial .prd-grid { gap: var(--mt-space-5); }

/* -- Card: data plate -------------------------------------------- */
body.tpl-plusfab_industrial .prd-card {
    position: relative;
    border: 1px solid #D5DADE;
    border-radius: 2px;
    background: #FFFFFF;
    box-shadow: none;
    overflow: hidden;
    transition: border-color var(--mt-duration-normal) var(--mt-ease-default);
}
body.tpl-plusfab_industrial .prd-card::before {            /* copper top rule: short at rest, full on hover */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 3;
    background: var(--mt-accent);
    transform: scaleX(0.14);
    transform-origin: left;
    transition: transform var(--mt-duration-normal) var(--mt-ease-default);
}
body.tpl-plusfab_industrial .prd-card:hover {
    transform: none;
    border-color: #8A939B;
    box-shadow: none;
}
body.tpl-plusfab_industrial .prd-card:hover::before { transform: scaleX(1); }

/* Product image on a brushed-stainless inspection plate */
body.tpl-plusfab_industrial .prd-card-thumb {
    background-color: #E6E9EC;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.38) 0 1px,
            rgba(255, 255, 255, 0) 1px 2px,
            rgba(30, 34, 38, 0.03) 2px 3px,
            rgba(255, 255, 255, 0) 3px 5px),
        linear-gradient(180deg, #F2F4F5 0%, #E0E4E7 100%);
    border-bottom: 1px solid #D5DADE;
    border-radius: 0;
}
body.tpl-plusfab_industrial .prd-card-thumb::after {       /* perforated strip along the plate's foot */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 6px;
    background-image: radial-gradient(circle, rgba(30, 34, 38, 0.20) 1.3px, rgba(30, 34, 38, 0) 1.8px);
    background-size: 12px 6px;
    background-repeat: repeat-x;
    background-position: center;
    opacity: 0.6;
    pointer-events: none;
}
body.tpl-plusfab_industrial .prd-card-thumb img {
    transition: transform var(--mt-duration-slow) var(--mt-ease-default);
}
body.tpl-plusfab_industrial .prd-card:hover .prd-card-thumb img { transform: scale(1.03); }

/* Featured: square graphite plate, copper star */
body.tpl-plusfab_industrial .prd-badge {
    top: 14px;
    left: 14px;
    padding: 6px 10px;
    border-radius: 2px;
    box-shadow: none;
    font-family: var(--mt-font-heading);
    font-size: 0.64rem;
    font-weight: var(--mt-weight-bold);
    letter-spacing: 0.12em;
}
body.tpl-plusfab_industrial .prd-badge--feat {
    background: var(--ally-navy-700);
    color: #FFFFFF;
}
body.tpl-plusfab_industrial .prd-badge--feat i { color: var(--mt-accent); }

/* -- Body -------------------------------------------------------- */
body.tpl-plusfab_industrial .prd-card-body { padding: var(--mt-space-6); }

body.tpl-plusfab_industrial .prd-card-type {
    gap: var(--mt-space-2);
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 0.68rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.12em;
    color: #6B737A;
    margin-bottom: var(--mt-space-3);
}
body.tpl-plusfab_industrial .prd-card-type::before {       /* copper dash replaces the tag glyph */
    content: "";
    width: 14px;
    height: 2px;
    background: var(--mt-accent);
    font-size: 0;
}

body.tpl-plusfab_industrial .prd-card-title {
    font-family: var(--mt-font-heading);
    font-size: 1.2rem;
    font-weight: var(--mt-weight-bold);
    letter-spacing: -0.01em;
    color: var(--ally-navy-700);
}
body.tpl-plusfab_industrial .prd-card-summary {
    font-size: 0.9rem;
    color: #555C63;
}

body.tpl-plusfab_industrial .prd-card-foot {
    padding-top: var(--mt-space-4);
    border-top: 1px solid #E1E4E7;
}
body.tpl-plusfab_industrial .prd-card-price {
    font-family: var(--mt-font-heading);
    font-size: 1.15rem;
    font-weight: var(--mt-weight-bold);
    letter-spacing: 0.01em;
    color: var(--ally-navy-900);
}

/* CTA: square steel outline -> graphite fill on card hover */
body.tpl-plusfab_industrial .prd-card-cta {
    padding: 0.7rem 1.1rem;
    border: 1px solid #C5CBD0;
    border-radius: var(--mt-radius-sm, 6px);
    background: transparent;
    color: var(--ally-navy-700);
    font-family: var(--mt-font-heading);
    font-size: 0.72rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}
body.tpl-plusfab_industrial .prd-card:hover .prd-card-cta {
    background: var(--ally-navy-700);
    border-color: var(--ally-navy-700);
    color: #FFFFFF;
    box-shadow: none;
}
body.tpl-plusfab_industrial .prd-card:hover .prd-card-cta i { color: var(--mt-accent); }
body.tpl-plusfab_industrial .prd-card-link:focus-visible {
    outline: 2px solid var(--mt-accent);
    outline-offset: 3px;
}

/* Featured display mode: the shared accent top edge -> copper rule */
body.tpl-plusfab_industrial .prd-section--featured .prd-card .prd-card-thumb { border-top: 0; }
body.tpl-plusfab_industrial .prd-section--featured .prd-card:hover { border-color: #8A939B; }

/* -- Mobile ------------------------------------------------------ */
@media (max-width: 575.98px) {
    body.tpl-plusfab_industrial .prd-eyebrow::before,
    body.tpl-plusfab_industrial .prd-eyebrow::after { width: 16px; }
    body.tpl-plusfab_industrial .prd-card-body { padding: var(--mt-space-5); }
}

/* -- Header spacing: rule sits close under the subtitle ----------- */
body.tpl-plusfab_industrial .prd-head { padding-bottom: var(--mt-space-6); }
body.tpl-plusfab_industrial .prd-head .prd-subtitle { margin-bottom: 0; }

/* -- Balanced grid (no empty slot), same rule as Services ---------- */
@media (min-width: 992px) {
    body.tpl-plusfab_industrial .prd-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    body.tpl-plusfab_industrial .prd-grid > .prd-card { grid-column: span 2; }
    body.tpl-plusfab_industrial .prd-grid > .prd-card:nth-last-child(2):nth-child(3n+1),
    body.tpl-plusfab_industrial .prd-grid > .prd-card:last-child:nth-child(3n+2) { grid-column: span 3; }
    body.tpl-plusfab_industrial .prd-grid > .prd-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
    body.tpl-plusfab_industrial .prd-grid > .prd-card:only-child { grid-column: 2 / span 4; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    body.tpl-plusfab_industrial .prd-grid > .prd-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}