/* ==========================================================
   VBC Framework
   Base Layout
   Version: 0.1.0
========================================================== */

/*
 * .vbc-container is the primary content wrapper used across every
 * component and view in the framework. It previously had no base
 * definition (only page-specific overrides existed for the hero and
 * topbar), so content rendered edge-to-edge with no centering or
 * side padding anywhere else on the site.
 */

.vbc-container {

    width: 100%;

    max-width: var(--vbc-container-xl);

    margin-left: auto;

    margin-right: auto;

    padding-left: var(--vbc-container-padding);

    padding-right: var(--vbc-container-padding);

}

@media (max-width: 1100px) {

    .vbc-container {

        padding-left: var(--vbc-space-5);

        padding-right: var(--vbc-space-5);

    }

}

@media (max-width: 768px) {

    .vbc-container {

        padding-left: var(--vbc-space-4);

        padding-right: var(--vbc-space-4);

    }

}

/*
 * Base section rhythm. Individual page/component stylesheets can
 * still override this, but every <section> should have sane default
 * vertical spacing rather than none at all.
 */

section {

    display: block;

}

img,
svg {

    max-width: 100%;

    display: block;

}
/*
 * Order tracking block (VBC\WooCommerce\OrderTracking). Shared across
 * the order-received page and My Account > View Order, so it lives in
 * the always-loaded base stylesheet rather than a single page file.
 */

.vbc-order-tracking {

    margin: 28px 0;

    padding: 24px;

    background: #ffffff;

    border: 1px solid var(--vbc-color-border);

    border-radius: var(--vbc-radius-lg);

}

.vbc-order-tracking__title {

    margin: 0 0 12px;

    color: var(--vbc-color-heading);

    font-size: 20px;

}

.vbc-order-tracking__body p {

    margin: 0 0 8px;

    color: var(--vbc-color-body);

    font-size: 15px;

}

.vbc-order-tracking__body .vbc-btn {

    margin-top: 8px;

}

/*
 * Shared "— Section Title —" heading rule, used by the shop-by-brand
 * strip and the shop-by-part tabbed browser on the homepage.
 */

.vbc-section-rule{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-bottom:36px;
}

.vbc-section-rule::before,
.vbc-section-rule::after{
    content:"";
    flex:1;
    max-width:120px;
    height:1px;
    background:var(--vbc-color-border);
}

.vbc-section-rule span{
    color:var(--vbc-color-heading);
    font-family:var(--vbc-font-heading);
    font-size:22px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    white-space:nowrap;
}

.vbc-section-rule--split{
    justify-content:space-between;
}

.vbc-section-rule--split::after{
    display:none;
}

.vbc-section-rule__link{
    color:var(--vbc-color-primary);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
}

/*
 * Canonical ".vbc-section-heading" pattern.
 *
 * 15+ components and views reference this class (eyebrow/title/
 * description) but no shared base definition existed anywhere in the
 * codebase -- every file only layered color/margin overrides on top
 * of styles that were never actually defined, so most of these
 * sections rendered with unstyled browser-default text. This is the
 * single canonical definition; per-component files may still override
 * color/spacing for dark backgrounds etc.
 */

.vbc-section-heading{
    max-width:640px;
    margin:0 0 44px;
}

.vbc-section-heading__eyebrow{
    display:block;
    margin-bottom:12px;
    color:var(--vbc-color-accent);
    font-size:13px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.vbc-section-heading__title{
    margin:0 0 14px;
    color:var(--vbc-color-heading);
    font-size:34px;
    line-height:1.15;
}

.vbc-section-heading__description{
    margin:0;
    color:var(--vbc-color-body);
    font-size:16px;
    line-height:1.8;
}