/*
 * Part-Finder product (article) page — dark-mode layout.
 * Loaded by the com_content article override (product.php) via HTMLHelper.
 * Full-width title, then image (left, collapses when absent) + info (right).
 */

.pf-product-title {
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0 0 1.25rem;
}

.pf-product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

/* Left: image. Collapses (is simply absent) when the part has no image. */
.pf-product-media {
    flex: 0 0 320px;
    max-width: 100%;
}

.pf-product-media img {
    display: block;
    width: 100%;
    height: auto;
    background: #2a2e33;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

/* Right: product information. Fills the row when there is no image. */
.pf-product-info {
    flex: 1 1 320px;
    min-width: 0;
}

.pf-product-fields {
    margin: 0 0 1.25rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    align-items: baseline;
}

.pf-field-label {
    margin: 0;
    color: #969ca3;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pf-field-value {
    margin: 0;
    color: #f2f3f4;
}

/*
 * Availability value. The wording and any inline markup come from the
 * component Options (Part Finder -> Options -> Availability); these classes
 * are the styling hooks around whatever is configured there:
 *   .pf-stock-in     value matched the in-stock list
 *   .pf-stock-out    value matched the not-in-stock list (or anything else)
 *   .pf-stock-other  value shown as stored
 */
.pf-stock {
    font-weight: 600;
}

.pf-product-description {
    color: #cfd3d8;
    line-height: 1.6;
}

.pf-product-description h1,
.pf-product-description h2,
.pf-product-description h3,
.pf-product-description h4 {
    color: #ffffff;
}

@media (max-width: 600px) {
    .pf-product-media {
        flex-basis: 100%;
    }
}