/* Audit A2–A8: component-scoped repairs. HOME, archive and commerce logic stay intact. */

/* A2: image captions have a dark surface, not the muted-on-white text token. */
.published-storefront :is(.guide-editorial-hero__media,.guide-feature__media) {
    align-self:start;
    height:auto;
    min-height:0;
}
.published-storefront :is(.guide-editorial-hero__media,.guide-feature__media) :is(picture,img) {
    display:block;
    width:100%;
    height:auto;
}
.published-storefront :is(.guide-editorial-hero__media,.guide-feature__media) figcaption {
    position:static;
    color:#fff;
    background:var(--pp-navy);
    padding:12px 16px;
    font-size:.875rem;
    line-height:1.55;
    backdrop-filter:none;
    border:0;
    border-radius:0;
}
.published-storefront :is(.guide-editorial-hero__media,.guide-feature__media) figcaption :is(span,strong,small,a,.store-icon) {
    color:inherit;
}

/* A3: the general score span must not override the yellow badge's ink. */
.published-storefront .tyre-test-result__score .tyre-test-result__score-direction {
    color:var(--pp-ink);
    background:var(--pp-accent);
    font-size:.75rem;
    line-height:1.5;
}

/* A4: upcoming steps are information, not disabled controls. */
.published-storefront .cart-progress__step:not(.cart-progress__step--current) {
    color:var(--pp-muted);
}
.published-storefront .cart-progress__step strong {
    font-size:.8125rem;
    line-height:1.5;
}

/* A5: explicit light text on the existing dark editorial/help surfaces. */
.published-storefront :is(
    .tyre-comparison__hero,
    .guide-hero,
    .guide-calculation-card,
    .guide-finder,
    .guide-label-choice,
    .guide-author-hero,
    .legal-chat-support,
    .store-information-help,
    .faq-overview
) .store-eyebrow,
.published-storefront .store-eyebrow--light,
.published-storefront .tyre-family-contact .tyre-family-eyebrow {
    color:#E2EBFF;
}

/* A6: allow whole buttons to wrap before breaking short season names. */
.published-storefront .catalog-visual-hero__links:not(.catalog-visual-hero__links--fitment) {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.published-storefront .catalog-visual-hero__links:not(.catalog-visual-hero__links--fitment) > .btn {
    display:flex;
    flex:1 0 auto;
    align-items:center;
    justify-content:center;
    min-width:0;
    max-width:100%;
    min-height:48px;
    padding:12px;
    gap:8px;
    line-height:1.35;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
}
.published-storefront .catalog-visual-hero__links:not(.catalog-visual-hero__links--fitment) .store-icon {
    flex:0 0 18px;
    width:18px;
    height:18px;
}

/* The brand grid must respond to its column, not just the viewport width. */
.published-storefront [aria-labelledby="vehicle-category-brand-heading"] .row {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));
    gap:8px;
    margin:0;
}
.published-storefront [aria-labelledby="vehicle-category-brand-heading"] .row > div {
    width:auto;
    padding:0;
    margin:0;
    min-width:0;
}
.published-storefront [aria-labelledby="vehicle-category-brand-heading"] .btn {
    padding:12px;
    height:100%;
    font-size:.875rem;
    overflow-wrap:normal;
    word-break:normal;
}

/* The calculator keeps its content inside the card, including enlarged text. */
.published-storefront .product-card__monthly-price {
    max-width:100%;
    border-radius:8px;
}
.published-storefront .product-card__monthly-price :is(.product-card__price,.product-card__pricing-label) {
    white-space:normal;
    line-height:1.4;
}

/* A7: preserve space for both the help text and the 7 px external focus ring. */
.published-storefront .account-access__field > label {
    margin-bottom:10px;
}
.published-storefront .account-access__field > :is(.account-access__hint,.form-text,.invalid-feedback) {
    margin-top:12px;
    font-size:.875rem;
    line-height:1.5;
}
.published-storefront .checkout-page :is(.form-text,.invalid-feedback) {
    margin-top:12px;
}

/* A8: the ranking explanation remains readable with enlarged text. */
.published-storefront .workshop-ranking-disclosure li {
    display:grid;
    grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);
    align-items:start;
    gap:8px 24px;
    padding-block:12px;
}
.published-storefront .workshop-ranking-disclosure li > :is(span,strong) {
    min-width:0;
    white-space:normal;
    overflow-wrap:break-word;
}
.published-storefront .workshop-ranking-disclosure li > strong {
    line-height:1.5;
}
@media (max-width:760px) {
    .published-storefront .workshop-ranking-disclosure li {
        grid-template-columns:minmax(0,1fr);
        gap:4px;
    }
}
@media (max-width:575px) {
    /* Photo/name share the first row; prices and actions use the full card. */
    .published-storefront :is(.product-card--tyre,.accessory-product-card) {
        display:grid;
        grid-template-columns:clamp(88px,26vw,112px) minmax(0,1fr);
        align-content:start;
        gap:12px;
        padding:16px;
        min-height:0;
    }
    .published-storefront :is(.product-card--tyre,.accessory-product-card) > .product-card__media {
        grid-column:1;
        grid-row:1 / 3;
        width:100%;
        height:154px;
        min-height:0;
        padding:28px 6px 8px;
        border-radius:8px;
    }
    .published-storefront :is(.product-card--tyre,.accessory-product-card) > .product-card__body {
        display:contents;
    }
    .published-storefront :is(.product-card--tyre,.accessory-product-card) > .product-card__body > * {
        grid-column:1 / -1;
        min-width:0;
    }
    .published-storefront :is(.product-card--tyre,.accessory-product-card) .product-card__heading {
        grid-column:2;
        grid-row:1;
    }
    .published-storefront :is(.product-card--tyre,.accessory-product-card) .product-card__fitment {
        grid-column:2;
        grid-row:2;
        align-self:start;
    }
    .published-storefront :is(.product-card--tyre,.accessory-product-card) .product-card__label-data {
        padding:12px;
    }
    .published-storefront :is(.product-card--tyre,.accessory-product-card) .product-card__primary-link {
        min-height:48px;
        font-size:.9375rem;
    }
}