/* Adapt the existing detail component contract to the shared theme. This
   keeps variant selectors stable while app.css owns palette and type decisions. */
.item-detail[data-id-root][data-id-variant="editorial"] {
    --id-page-background: var(--surface-base);
    --id-hero-background: var(--surface-hero);
    --id-hero-color: var(--text-on-hero);
    --id-display-color: var(--text-on-hero);
    --id-display-line-height: var(--line-heading);
    --id-title-line-height: var(--line-heading);
    --id-overview-title-line-height: var(--line-heading);
    --id-display-max-width: var(--measure-product-title);
    --id-hero-media-background: var(--surface-media);
    --id-hero-media-overlay: none;
    --id-kicker-color: var(--text-on-hero-muted);
    --id-lead-color: var(--text-on-hero-muted);
    --id-chip-background: transparent;
    --id-chip-border-color: var(--border-on-hero);
    --id-chip-text: var(--text-on-hero);
    --id-action-button-radius: var(--radius-sm);
    --id-highlight-border-color: var(--border-on-hero);
    --id-highlight-grid-background: var(--border-base);
    --id-highlight-background: var(--surface-subtle);
    --id-highlight-backdrop-filter: none;
    --id-highlight-label-color: var(--text-on-hero-muted);
    --id-highlight-value-color: var(--text-on-hero);
    --id-hero-homologation-background: var(--surface-status-on-hero);
    --id-hero-homologation-shadow: none;
    --id-hero-homologation-item-background: transparent;
    --id-buy-chip-shadow: none;
    --id-spec-row-background: var(--surface-elevated);
    --id-spec-row-alt-background: var(--surface-data-alternate);
    --id-spec-header-color: var(--text-strong);
    --id-spec-value-color: var(--text-link);
    --id-spec-value-background: transparent;
    --id-spec-value-border-color: transparent;
    --id-spec-value-radius: 0;
    --id-spec-value-padding: 0;
    --id-spec-unit-color: var(--text-muted);
    --id-spec-summary-color: var(--text-data-heading);
    --id-spec-count-background: var(--surface-count);
    --id-spec-count-color: var(--text-count);
    --id-faq-item-background: var(--surface-elevated);
    --id-faq-item-background-open: var(--surface-data-heading);
    --id-faq-item-border-color: var(--border-data);
    --id-faq-item-border-color-open: var(--border-focus);
    --id-faq-question-color: var(--text-data-heading);
    --id-faq-question-marker-color: var(--text-link);
    --id-faq-answer-color: var(--text-support);
    --ic-comparison-section-title-background: var(--surface-data-heading);
    --ic-comparison-section-title-color: var(--text-data-heading);
    --ic-comparison-current-column-background: var(--surface-support);
    --id-reviews-action-panel-empty-background: var(--surface-data-heading);
    --id-reviews-action-panel-empty-border-color: var(--border-data);
    --id-reviews-panel-title-color: var(--text-data-heading);
    --id-share-link-background: var(--surface-support);
    --id-related-title-color: var(--text-link);
    --surface-sell-cta: var(--surface-support);
    --border-sell-cta: var(--border-data);
    --text-sell-cta: var(--text-data-heading);
    --text-sell-cta-muted: var(--text-support);
    --text-sell-cta-attribution: var(--text-support);
    --id-hero-copy-padding: var(--hero-padding);
    --id-hero-row-min-height: 0;
    --id-panel-border-color: var(--border-base);
    --id-panel-background: var(--surface-elevated);
    --id-panel-shadow: none;
    --id-hero-homologation-eyebrow-color: var(--text-muted);
    --id-hero-homologation-country-text: var(--text-base);
    --id-hero-homologation-certificate-text: var(--text-strong);
    --id-hero-homologation-item-border-color: var(--border-base);
    --id-hero-buy-eyebrow-color: var(--text-muted);
    --id-hero-media-min-height: 0;
    --id-hero-mobile-gallery-border-color: var(--border-base);
    --id-hero-mobile-gallery-background: var(--surface-elevated);
    --id-hero-mobile-gallery-active-border-color: var(--border-focus);
    --id-hero-mobile-gallery-active-background: var(--surface-elevated);
}

.item-detail[data-id-variant="editorial"] .id-section__title {
    color: var(--text-data-heading);
}

.item-detail[data-id-variant="editorial"] .id-spec-group {
    padding: 0;
    overflow: hidden;
    background: var(--surface-elevated);
    border-color: var(--border-data);
}

.item-detail[data-id-variant="editorial"] .id-spec-group__header {
    margin: 0;
    padding: var(--space-md);
    background: var(--surface-data-heading);
}

.item-detail[data-id-variant="editorial"] .id-spec-table th,
.item-detail[data-id-variant="editorial"] .id-spec-table td {
    padding-inline: var(--space-sm);
}

.item-detail[data-id-variant="editorial"] .id-spec-table tbody tr {
    background: var(--surface-data-alternate);
    border-color: var(--border-data);
}

.item-detail[data-id-variant="editorial"] .id-section--faq {
    background: var(--surface-support);
    border-color: var(--border-data);
}

.item-detail[data-id-variant="editorial"] .id-related-thumb {
    background: var(--surface-support);
    border-color: var(--border-data);
    color: var(--text-support);
}

.item-detail[data-id-variant="editorial"] .id-reviews-action-panel p {
    color: var(--text-support);
}

.item-detail[data-id-variant="editorial"] .id-related-actions .btn-outline-dark {
    --bs-btn-color: var(--text-link);
    --bs-btn-border-color: var(--border-data);
    --bs-btn-bg: var(--surface-support);
    --bs-btn-hover-color: var(--text-data-heading);
    --bs-btn-hover-bg: var(--surface-data-heading);
    --bs-btn-hover-border-color: var(--border-focus);
}

.item-detail[data-id-variant="editorial"] .id-display__brand {
    font-family: var(--font-sans);
    font-size: var(--type-lead);
    color: var(--text-muted);
}

.item-detail[data-id-variant="editorial"] .id-hero {
    border-bottom: var(--border-width) solid var(--border-base);
}

.item-detail[data-id-variant="editorial"] #overview {
    padding: var(--overview-gutter);
    background: var(--surface-overview);
    border: none;
}

.item-detail[data-id-variant="editorial"] #overview > .container-fluid {
    max-width: var(--overview-width);
    background: var(--surface-elevated);
    border: var(--border-width) solid var(--border-base);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.item-detail[data-id-variant="editorial"] #overview .id-hero__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    max-width: none;
    padding: var(--overview-padding);
}

.item-detail[data-id-variant="editorial"] #overview .id-hero__copy > * {
    margin: 0;
}

.item-detail[data-id-variant="editorial"] #overview .id-hero-homologation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    padding: 0;
    border: none;
    border-radius: 0;
    background: var(--surface-clear);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
}

.item-detail[data-id-variant="editorial"] #overview .id-hero-homologation__list {
    margin: 0;
}

.item-detail[data-id-variant="editorial"] #overview .id-hero-homologation__item {
    background: var(--badge-success);
}

.item-detail[data-id-variant="editorial"] #overview .id-actions {
    gap: var(--space-sm);
}

.item-detail[data-id-variant="editorial"] #overview .id-hero-buy__list {
    margin: 0;
}

.item-detail[data-id-variant="editorial"] #overview .id-hero-buy__list > li {
    flex: none;
}

.item-detail[data-id-variant="editorial"] #overview .id-highlight-grid {
    max-width: none;
}

.item-detail[data-id-variant="editorial"] #overview .id-media-gallery--hero {
    justify-content: center;
    padding: var(--overview-padding);
    background: var(--surface-elevated);
}

.item-detail[data-id-variant="editorial"] #overview .id-primary-figure-media--hero img {
    height: var(--overview-image-height);
    padding: var(--space-md);
}

.item-detail[data-id-variant="editorial"] #overview .id-thumb-carousel--hero {
    background: var(--surface-elevated);
    padding: var(--space-sm) 0;
    border-top: var(--border-width) solid var(--border-subtle);
}

.item-detail[data-id-variant="editorial"] .id-hero .id-primary-figure-media--hero img {
    display: block;
    height: var(--hero-image-height);
    padding: var(--space-lg);
    object-fit: contain;
}

.item-detail[data-id-variant="editorial"] .id-hero .id-thumb-carousel--hero {
    background: var(--surface-subtle);
    padding: var(--space-md);
}

.item-detail[data-id-variant="editorial"] .id-hero .id-thumb {
    width: var(--thumbnail-size);
    background: var(--surface-elevated);
    border-color: var(--border-base);
}

.item-detail[data-id-variant="editorial"] .id-hero .id-thumb.is-active,
.item-detail[data-id-variant="editorial"] .id-hero .id-thumb[aria-pressed="true"] {
    border-color: var(--border-focus);
    background: var(--surface-elevated);
}

.item-detail[data-id-variant="editorial"] .id-hero .id-thumb-carousel__arrow {
    color: var(--text-base);
    border-color: var(--border-base);
    background: var(--surface-elevated);
}

.item-detail[data-id-variant="editorial"] .id-spec-group__title {
    font-family: var(--font-display);
    font-size: var(--type-card-title);
}

.item-detail[data-id-variant="editorial"] .id-spec-table,
.item-detail[data-id-variant="editorial"] .id-highlight__value {
    font-variant-numeric: tabular-nums;
}

.item-detail[data-id-variant="editorial"] .id-model-description {
    margin-top: var(--space-lg);
    padding-top: var(--space-sm);
    border-top: var(--border-width) solid var(--border-base);
}

.item-detail[data-id-variant="editorial"] .id-model-description summary {
    min-height: var(--control-min-height);
    padding-block: var(--space-xs);
    color: var(--text-link);
    font-weight: var(--weight-strong);
}

.item-detail[data-id-variant="editorial"] .btn-light,
.item-detail[data-id-variant="editorial"] .btn-outline-light {
    --bs-btn-color: var(--button-text);
    --bs-btn-bg: var(--button-primary-bg);
    --bs-btn-border-color: var(--button-primary-bg);
    --bs-btn-hover-color: var(--button-text);
    --bs-btn-hover-bg: var(--button-primary-hover);
    --bs-btn-hover-border-color: var(--button-primary-hover);
    --bs-btn-active-color: var(--button-text);
    --bs-btn-active-bg: var(--button-primary-active);
    --bs-btn-active-border-color: var(--button-primary-active);
}

.item-detail[data-id-variant="editorial"] .btn-outline-light {
    --bs-btn-bg: var(--surface-elevated);
    --bs-btn-border-color: var(--border-strong);
}

.item-detail[data-id-variant="editorial"] .id-faq-item {
    padding: 0 var(--space-md);
}

.item-detail[data-id-variant="editorial"] .id-faq-item__question {
    min-height: var(--control-min-height);
    padding-block: var(--space-sm);
}

.item-detail[data-id-variant="editorial"] .id-faq-item__answer {
    margin-top: 0;
    padding-bottom: var(--space-md);
}

@media (max-width: 767.98px) {
    .item-detail[data-id-root][data-id-variant="editorial"] {
        --id-highlight-columns-mobile: repeat(2, minmax(0, 1fr));
        --id-highlight-padding: var(--space-sm);
    }

    .item-detail[data-id-variant="editorial"] #overview > .container-fluid > .row > * {
        padding-inline: 0;
        min-width: 0;
    }

    .item-detail[data-id-variant="editorial"] #overview .id-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .item-detail[data-id-variant="editorial"] #overview .id-actions .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-inline: var(--space-sm);
        white-space: normal;
    }
}