/* Personal white/wide preview. Load after page.css; the server opts in per user.
   Keep the existing block grid, dimensions, content order and control states. */
html[data-design="light"][data-design-preview="white-wide"]:has(> body:not(.iw-page--admin-area):not(.iw-page--admin_customizer)) {
    --page: #fff;
    color-scheme: light;
    background: #fff;
}

html[data-design="light"][data-design-preview="white-wide"] body:not(.iw-page--admin-area):not(.iw-page--admin_customizer) {
    background: #fff;
}

html[data-design="light"][data-design-preview="white-wide"] body:not(.iw-page--admin-area):not(.iw-page--admin_customizer) > .page-shell {
    width: min(1440px, calc(100% - 48px));
}

/* Reuse the translated category-region label above its centred controls. */
html[data-design="light"][data-design-preview="white-wide"] #category-filter:has(.category-filter-inner)::before {
    content: attr(aria-label);
    display: block;
    margin-bottom: 12px;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 780;
    text-align: center;
}

html[data-design="light"][data-design-preview="white-wide"] #category-filter .category-filter-inner {
    justify-content: center;
    flex-wrap: wrap;
    max-height: none;
    overflow: visible;
}

html[data-design="light"][data-design-preview="white-wide"] #category-filter :is(.category-chip, .category-reset, .category-token, .category-more) {
    border: 1px solid rgba(var(--action-rgb), .32);
    border-radius: 8px;
}

/* Full-width separators keep navigation and the import area distinct. */
html[data-design="light"][data-design-preview="white-wide"] body:not(.iw-page--admin-area):not(.iw-page--admin_customizer) .page-header > .nav-menu {
    position: relative;
}

html[data-design="light"][data-design-preview="white-wide"] body:not(.iw-page--admin-area):not(.iw-page--admin_customizer) .page-header > .nav-menu::after {
    content: "";
    position: absolute;
    inset: auto 0 -16px;
    height: 1px;
    background: #e2e8ef;
    box-shadow: 0 0 0 100vmax #e2e8ef;
    clip-path: inset(0 -100vmax);
    pointer-events: none;
}

html[data-design="light"][data-design-preview="white-wide"] body:not(.iw-page--admin-area):not(.iw-page--admin_customizer) #mail-import {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
}

html[data-design="light"][data-design-preview="white-wide"] body:not(.iw-page--admin-area):not(.iw-page--admin_customizer) #mail-import > .quick-import-titlebar {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: none;
    min-height: 62px;
    padding: 16px 24px;
    justify-content: center;
    text-align: center;
}

html[data-design="light"][data-design-preview="white-wide"] #mail-import .quick-import-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

html[data-design="light"][data-design-preview="white-wide"] body:not(.iw-page--admin-area):not(.iw-page--admin_customizer) #mail-import > .quick-import:not([hidden]) {
    padding: 24px 0;
    border: 0;
}

html[data-design="light"][data-design-preview="white-wide"] body:not(.iw-page--admin-area):not(.iw-page--admin_customizer) #mail-import::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    border-block: 1px solid #4986c6;
    background: #4986c6;
    pointer-events: none;
}

/* White text belongs to the blue band; source cards retain their own colours. */
html[data-design="light"][data-design-preview="white-wide"] #mail-import :is(
    .quick-import-toggle,
    .quick-import-head > div > span,
    .quick-import-head h2,
    .quick-import-head p,
    .quick-import-actions > small,
    .quick-import-status,
    .quick-import-manual
) {
    color: #fff;
}

html[data-design="light"][data-design-preview="white-wide"] #mail-import .quick-import-privacy {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .25);
}

html[data-design="light"][data-design-preview="white-wide"] #mail-import .quick-import-privacy svg {
    stroke: #fff;
}

html[data-design="light"][data-design-preview="white-wide"] #mail-import .quick-import-footer {
    border-top-color: rgba(255, 255, 255, .25);
}

html[data-design="light"][data-design-preview="white-wide"] #mail-import .quick-import-cards [data-import-card]:not(.is-active) {
    background: #fff;
}

html[data-design="light"][data-design-preview="white-wide"] #mail-import .quick-import-cards [data-import-card].is-active {
    background: #fff;
    border-color: #fff;
    color: var(--action);
}

html[data-design="light"][data-design-preview="white-wide"] #mail-import .quick-import-cards [data-import-card].is-active :is(
    span, small, strong, code, p, svg, .quick-import-choice,
    .quick-import-email-job, .quick-import-card-start, .quick-import-help
):not([data-tone="error"]) {
    color: var(--action);
}

html[data-design="light"][data-design-preview="white-wide"] #mail-import .quick-import-cards [data-import-card].is-active .quick-import-clear {
    border-color: rgba(var(--action-rgb), .4);
}

@media (max-width: 760px) {
    html[data-design="light"][data-design-preview="white-wide"] body:not(.iw-page--admin-area):not(.iw-page--admin_customizer) > .page-shell {
        width: calc(100% - 32px);
    }

    /* Anchor the account menu to the full navigation row on narrow screens. */
    html[data-design="light"][data-design-preview="white-wide"] .nav-menu {
        position: relative;
    }
    html[data-design="light"][data-design-preview="white-wide"] .user-menu {
        position: static;
    }
    html[data-design="light"][data-design-preview="white-wide"] .user-menu-dropdown {
        right: 0;
        min-width: min(210px, 100%);
        max-width: 100%;
        transform: translateY(-4px);
    }
    html[data-design="light"][data-design-preview="white-wide"] :is(.user-menu[open], .user-menu:hover, .user-menu:focus-within) .user-menu-dropdown {
        transform: translateY(0);
    }
    html[data-design="light"][data-design-preview="white-wide"] :is([data-view="products"], .gallery-head, .gallery-actions) {
        min-width: 0;
        max-width: 100%;
    }
    html[data-design="light"][data-design-preview="white-wide"] .product-scope-control {
        width: min(330px, 100%);
        min-width: 0;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Neutral content surfaces only. Transparent borders preserve box geometry;
   headings, spacing, row separators, fields, notices and overlays stay intact. */
html[data-design="light"][data-design-preview="white-wide"] body:not(.iw-page--admin-area):not(.iw-page--admin_customizer) .page-main :is(
    .card,
    .form-card,
    .simple-panel,
    .auth-card,
    .catalog-card,
    .catalog-detail-card,
    .product-detail-card,
    .catalog-offers,
    .catalog-substitutes,
    .catalog-data-field,
    .catalog-spec-item:not(.catalog-spec-toggle),
    .catalog-facts > div,
    .product-detail-facts > div,
    .detail-mini-grid > div,
    .product-stat-chart,
    .quick-import,
    .quick-import-importbar,
    .account-panel,
    .community-teaser,
    .community-panel,
    .community-founder-wide,
    .community-founder-card,
    .community-mini-point,
    .community-action-card,
    .community-balance-card,
    .community-fact-card,
    .community-step,
    .dashboard-command,
    .dashboard-status,
    .dashboard-question,
    .dashboard-question-card,
    .dashboard-feed,
    .dashboard-command-metrics > article,
    .dashboard-metrics > article,
    .dashboard-feed-list > article,
    .project-card,
    .project-card-header,
    .project-feature,
    .project-ideas-panel,
    .project-idea-card,
    .project-detail-head,
    .project-edit-panel,
    .project-edit-images,
    .bom-wrap,
    .shopping-panel,
    .compatibility-panel,
    .project-ai-panel,
    .project-ai-builder-panel,
    .item-panel,
    .project-guide,
    .project-guide-card,
    .project-ai-result-card,
    .project-ai-result-section,
    .pricing-card:not(.is-active-plan),
    .seo-section,
    .faq-list,
    .faq-item,
    .empty-state
) {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Product selection and alternative-quality rings carry information. Clear
   the decorative skin without overriding their borders, outlines or shadows. */
html[data-design="light"][data-design-preview="white-wide"] body:not(.iw-page--admin-area):not(.iw-page--admin_customizer) .page-main :is(
    .product-card-box,
    .catalog-mini-card
) {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-design="light"][data-design-preview="white-wide"] body:not(.iw-page--admin-area):not(.iw-page--admin_customizer) .page-main :is(
    .product-card:not(.is-compatibility-marked):not(.is-compatibility-selected):not(.is-newly-added) > .product-card-box,
    .catalog-mini-card:not(.is-high-substitute):not(.is-medium-substitute):not(.is-low-substitute):not(.catalog-accessories .catalog-mini-card)
) {
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* A white page must still make its editable fields and search surfaces clear.
   Do not reset borders, shadows, outlines, active, error or disabled states. */
html[data-design="light"][data-design-preview="white-wide"] body:not(.iw-page--admin-area):not(.iw-page--admin_customizer) .page-main :is(
    .product-stock-stepper,
    .product-stock-reason input,
    .product-inline-form input,
    .product-notes-field textarea,
    .gallery-search .search-bar,
    .projects-search,
    .faq-search-control
) {
    background-color: #f5f6f7;
}

/* Use one gutter in both directions; card margins must not enlarge row gaps. */
html[data-design-preview="white-wide"] :is(.gallery, .product-project-grid):not(.product-view-list):not(.product-view-list-image):not(.product-project-groups) {
    gap: 24px;
}

@media (max-width: 760px) {
    html[data-design-preview="white-wide"] :is(.gallery, .product-project-grid):not(.product-view-list):not(.product-view-list-image):not(.product-project-groups) {
        gap: 16px;
    }
}

html[data-design-preview="white-wide"] :is(.gallery, .product-project-grid):not(.product-view-list):not(.product-view-list-image) > .product-card {
    margin: 0;
    align-self: stretch;
    align-content: stretch;
    grid-template-rows: auto minmax(0, 1fr);
}

/* Flush product cards. The action buttons still straddle the image edge;
   reserve their height between blocks instead of padding the content box. */
html[data-design-preview="white-wide"] :is(.gallery, .product-project-grid):not(.product-view-list):not(.product-view-list-image) > .product-card > .product-card-box {
    padding: 0;
    border-width: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

html[data-design-preview="white-wide"] :is(.gallery, .product-project-grid):not(.product-view-list):not(.product-view-list-image) > .product-card .product-info {
    padding: 0;
    margin: 24px 0 0;
    min-height: 0;
    max-height: none;
    align-content: start;
}

html[data-design-preview="white-wide"] :is(.gallery, .product-project-grid):not(.product-view-list):not(.product-view-list-image) > .product-card .product-card-price {
    position: relative;
    inset: auto;
    width: auto;
    max-width: 100%;
    margin: 12px 0 0;
    padding: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

html[data-design-preview="white-wide"] :is(.gallery, .product-project-grid):not(.product-view-list):not(.product-view-list-image) > .product-card > .product-compatibility-text-action {
    margin-left: 0;
    padding: 0;
    max-width: 100%;
    flex-wrap: wrap;
}

html[data-design-preview="white-wide"] :is(.gallery, .product-project-grid):not(.product-view-list):not(.product-view-list-image) > .product-card > .product-check-card-tools {
    padding: 0;
}

html[data-design-preview="white-wide"] .product-card-stat small {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Keep the agreed breathing room between product rows, without a divider. */
html[data-design-preview="white-wide"] :is(.gallery, .product-project-grid):not(.product-view-list):not(.product-view-list-image):not(.product-project-groups) {
    row-gap: 48px;
}

html[data-design-preview="white-wide"] :is(.gallery, .product-project-grid):not(.product-view-list):not(.product-view-list-image) > .product-card {
    row-gap: 6px;
}

html[data-design-preview="white-wide"] :is(.gallery, .product-project-grid):not(.product-view-list):not(.product-view-list-image) > .product-card > :is(.product-compatibility-text-action, .product-check-card-tools) {
    align-self: end;
    min-height: 24px;
}

/* Project cards retain their existing junction decoration. */
html[data-design-preview="white-wide"] .project-card--public[data-preview-junction]::before {
    content: "";
    position: absolute;
    pointer-events: none;
    left: calc(var(--preview-junction-x) - 31.5%);
    top: calc(var(--preview-junction-y) - 31.5%);
    width: 63%;
    height: 63%;
    background-image:
        linear-gradient(to right, rgba(140, 146, 153, 0), #8c9299 25%, #8c9299 75%, rgba(140, 146, 153, 0)),
        linear-gradient(to bottom, rgba(140, 146, 153, 0), #8c9299 25%, #8c9299 75%, rgba(140, 146, 153, 0));
    background-size: 100% 1px, 1px 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.4;
}

/* Product details: a proportional composition with a shared spacing scale.
   Product-list columns and their gutters keep their separate layout contract. */
html[data-design-preview="white-wide"] :is(.product-detail-view, .catalog-detail) {
    --detail-space-1: 8px;
    --detail-space-2: 13px;
    --detail-space-3: 21px;
    --detail-space-4: 34px;
    --detail-space-5: 55px;
    --detail-column-gap: var(--detail-space-4);
    gap: var(--detail-space-3);
}

html[data-design-preview="white-wide"] :is(.product-detail-overview, .catalog-detail-card) {
    grid-template-columns: minmax(0, 0.381966fr) minmax(0, 0.618034fr);
    gap: var(--detail-column-gap);
    align-items: start;
    padding: 0;
    border-width: 0;
}

html[data-design-preview="white-wide"] :is(.product-detail-overview, .catalog-detail-card) > * {
    min-width: 0;
}

html[data-design-preview="white-wide"] :is(.product-detail-main, .catalog-detail-main) > * {
    min-width: 0;
}

html[data-design-preview="white-wide"] .catalog-detail-main > p {
    overflow-wrap: anywhere;
}

html[data-design-preview="white-wide"] :is(.product-detail-view, .catalog-detail) :is(
    .product-gallery-panel,
    .product-detail-main,
    .product-detail-section,
    .catalog-description-section,
    .catalog-substitutes
) {
    padding: 0;
    border-width: 0;
}

html[data-design-preview="white-wide"] :is(.product-detail-overview-media, .product-detail-overview-main) {
    gap: var(--detail-space-4);
}

html[data-design-preview="white-wide"] :is(.product-detail-view, .catalog-detail) :is(
    .product-detail-main,
    .catalog-detail-main,
    .product-detail-section,
    .product-detail-gallery,
    .catalog-detail-gallery,
    .catalog-private-detail,
    .product-detail-section-head
) {
    gap: var(--detail-space-2);
}

html[data-design-preview="white-wide"] :is(.product-detail-view, .catalog-detail) :is(
    .product-detail-sections,
    .private-dashboard-main-column,
    .private-dashboard-side-column,
    .private-dashboard-main-pair,
    .catalog-private-side-stack
) {
    gap: var(--detail-space-3);
}

html[data-design-preview="white-wide"] :is(.product-detail-overview, .catalog-detail-card) + :is(
    .product-detail-sections,
    .catalog-description-section,
    .catalog-substitutes
) {
    margin-top: calc(var(--detail-space-5) - var(--detail-space-3));
}

html[data-design-preview="white-wide"] :is(.product-detail-view, .catalog-detail) :is(.catalog-image-thumbs, .product-detail-image-thumbs) {
    gap: var(--detail-space-1);
}

html[data-design-preview="white-wide"] :is(.product-detail-view, .catalog-detail) :is(.product-detail-facts, .catalog-facts, .detail-mini-grid) {
    gap: var(--detail-space-2);
}

html[data-design-preview="white-wide"] :is(.product-detail-view, .catalog-detail) :is(.product-detail-facts, .catalog-facts, .detail-mini-grid) > div {
    padding: var(--detail-space-1) 0;
}

html[data-design-preview="white-wide"] :is(.product-detail-main, .catalog-detail-main) h1 {
    max-width: none;
    margin: 0;
    font-size: clamp(21px, 2vw, 34px);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

html[data-design-preview="white-wide"] .catalog-detail-heading:not(:has(*)) {
    display: none;
}

html[data-design-preview="white-wide"] :is(.product-detail-description, .catalog-long-description) {
    max-width: 68ch;
    font-size: 1rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

html[data-design-preview="white-wide"] :is(.product-detail-overview, .catalog-detail-card) :is(.product-detail-media, .catalog-detail-media) {
    height: auto;
    max-height: 550px;
    aspect-ratio: 1;
}

@media (max-width: 1100px) {
    html[data-design-preview="white-wide"] :is(.product-detail-view, .catalog-detail) {
        --detail-column-gap: var(--detail-space-3);
    }
}

@media (max-width: 760px) {
    html[data-design-preview="white-wide"] :is(.product-detail-view, .catalog-detail) {
        --detail-space-5: 34px;
    }

    html[data-design-preview="white-wide"] :is(.product-detail-overview, .catalog-detail-card) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Specifications share the text edge and wrap in two columns on phones. */
html[data-design-preview="white-wide"] .catalog-spec-list .catalog-spec-item:not(.catalog-spec-toggle) {
    padding-inline: 0;
}

@media (max-width: 560px) {
    html[data-design-preview="white-wide"] .catalog-spec-list .catalog-spec-item:not(.catalog-spec-toggle) {
        flex: 0 1 calc((100% - 7px) / 2);
        min-width: 0;
    }
}

/* One quiet offer block: shared edges, spacing and separators instead of
   separate coloured boxes for the description, region notice and shop. */
html[data-design-preview="white-wide"] .catalog-detail-main .catalog-plain-description {
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

html[data-design-preview="white-wide"] .catalog-detail-main .catalog-offers {
    --offer-divider: #e2e6ea;
    --offer-muted: #5e6670;
    gap: 0;
    padding: 0;
    overflow: visible;
}

html[data-design-preview="white-wide"] .catalog-offers :is(
    .catalog-offers-head,
    .catalog-offers-region-notice,
    .catalog-offer-item,
    .catalog-affiliate-note,
    .catalog-offers-empty
) {
    margin: 0;
    padding: 13px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html[data-design-preview="white-wide"] .catalog-offers .catalog-offer-list {
    gap: 0;
    margin: 0;
}

html[data-design-preview="white-wide"] .catalog-detail-main .catalog-offers > *,
html[data-design-preview="white-wide"] .catalog-offers .catalog-offer-item + .catalog-offer-item {
    border-top: 1px solid var(--offer-divider);
}

html[data-design-preview="white-wide"] .catalog-offers .catalog-offer-item + .catalog-offer-item::before {
    content: none;
}

html[data-design-preview="white-wide"] .catalog-offers :is(.catalog-offers-region-notice, .catalog-offers-empty) {
    color: var(--offer-muted);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

html[data-design-preview="white-wide"] .catalog-offers .catalog-offer-item {
    gap: 13px;
}

html[data-design-preview="white-wide"] .catalog-offers .catalog-offer-copy {
    gap: 8px;
}

html[data-design-preview="white-wide"] .catalog-offers .catalog-offer-copy strong {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.4;
}

html[data-design-preview="white-wide"] .catalog-offers .catalog-offer-copy small {
    color: var(--offer-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

html[data-design-preview="white-wide"] .catalog-offers .catalog-offer-price {
    min-width: 0;
    max-width: 100%;
    gap: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

html[data-design-preview="white-wide"] .catalog-detail-main .catalog-offers :is(.catalog-offer-price b, .catalog-offer-price-amount) {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

html[data-design-preview="white-wide"] .catalog-offers .catalog-affiliate-note {
    color: var(--offer-muted);
    font-size: 0.75rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

html[data-design-preview="white-wide"] .catalog-offers .catalog-offer-item:focus-visible {
    background: #f5f7fa;
}

html[data-design-preview="white-wide"] .catalog-offers .catalog-offer-item:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 3px;
}

html[data-design-preview="white-wide"] .catalog-offers .catalog-offer-item:focus-visible strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Personal catalog toolbar: reuse the existing search, scope thumb and
   filter states with the light blue surfaces of the three filter icons. */
html[data-design="light"][data-design-preview="white-wide"] :is(.gallery-head, .projects-head) {
    --preview-toolbar-border: rgba(var(--action-rgb), 0.24);
    --preview-toolbar-soft: rgba(var(--action-rgb), 0.11);
    --preview-toolbar-text: #326faa;
    --preview-toolbar-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(49, 108, 160, 0.07);
}

html[data-design="light"][data-design-preview="white-wide"] .gallery-search::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 15px;
    width: 21px;
    height: 21px;
    transform: translateY(-50%);
    background: var(--action);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

html[data-design="light"][data-design-preview="white-wide"] body:not(.iw-page--admin-area):not(.iw-page--admin_customizer) .page-main .gallery-search .search-bar {
    box-sizing: border-box;
    height: 48px;
    padding-left: 47px;
    border: 1px solid var(--preview-toolbar-border);
    border-radius: 11px;
    background: #fff;
    color: #47617c;
    box-shadow: var(--preview-toolbar-shadow);
}

html[data-design="light"][data-design-preview="white-wide"] .gallery-search .search-bar::placeholder {
    color: #788695;
    opacity: 1;
}

html[data-design="light"][data-design-preview="white-wide"] .gallery-head :is(.product-filter-tools, .gallery-actions) {
    gap: 10px;
}

html[data-design="light"][data-design-preview="white-wide"] .gallery-head :is(.product-3d-filter-toggle, .product-score-sort-toggle, .product-region-price-filter-toggle, .product-sort-button) {
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    flex: 0 0 48px;
    padding: 0;
    border: 1px solid var(--preview-toolbar-border);
    border-radius: 11px;
    background: #fff;
    color: var(--action);
    box-shadow: var(--preview-toolbar-shadow);
    opacity: 1;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

html[data-design="light"][data-design-preview="white-wide"] .gallery-head .product-sort-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

html[data-design="light"][data-design-preview="white-wide"] .gallery-head :is(.product-3d-filter-toggle, .product-score-sort-toggle, .product-region-price-filter-toggle, .product-sort-button):hover:not(:disabled):not(.is-active):not([aria-pressed="true"]) {
    border-color: var(--action);
    background: #f4f8fd;
    color: var(--action);
}

/* Selection must remain distinct while the pointer stays over a toggle. */
html[data-design="light"][data-design-preview="white-wide"] .gallery-head :is(.product-3d-filter-toggle, .product-score-sort-toggle, .product-region-price-filter-toggle, .product-sort-button):is(.is-active, [aria-pressed="true"]) {
    border-color: var(--action);
    background: var(--action);
    color: #fff;
}

html[data-design="light"][data-design-preview="white-wide"] .gallery-head .product-sort-button svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.35;
}

html[data-design="light"][data-design-preview="white-wide"] .gallery-head .product-sort-button[data-filter-products="liked"].is-active svg {
    fill: var(--preview-toolbar-soft);
}

html[data-design="light"][data-design-preview="white-wide"] .product-scope-control {
    box-sizing: border-box;
    height: 48px;
    padding: 4px;
    border: 1px solid var(--preview-toolbar-text);
    border-radius: 11px;
    background: var(--preview-toolbar-text);
    box-shadow: 0 2px 5px rgba(49, 108, 160, 0.14);
}

html[data-design="light"][data-design-preview="white-wide"] .product-scope-thumb {
    box-sizing: border-box;
    top: 4px;
    left: 4px;
    width: calc((100% - 8px) / 4);
    height: calc(100% - 8px);
    border: 1px solid #fff;
    border-radius: 7px;
    background: #fff;
    box-shadow: none;
}

html[data-design="light"][data-design-preview="white-wide"] .product-scope-option {
    min-height: 38px;
    padding: 0 5px;
    border-radius: 7px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.2;
}

html[data-design="light"][data-design-preview="white-wide"] .product-scope-option.is-active {
    color: var(--preview-toolbar-text);
    text-shadow: none;
}

html[data-design="light"][data-design-preview="white-wide"] .product-scope-option:hover:not(.is-active):not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

html[data-design="light"][data-design-preview="white-wide"] .gallery-head :is(.search-bar, button):focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 3px;
}

html[data-design="light"][data-design-preview="white-wide"] .gallery-head .product-scope-option:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: -3px !important;
}

@media (max-width: 1100px) {
    html[data-design="light"][data-design-preview="white-wide"] .gallery-head {
        flex-wrap: wrap;
    }
}

@media (max-width: 760px) {
    html[data-design="light"][data-design-preview="white-wide"] .gallery-head .product-spec-filter {
        display: none;
    }
    html[data-design="light"][data-design-preview="white-wide"] .gallery-head :is(.product-filter-tools, .gallery-actions) {
        flex-wrap: wrap;
        margin-left: 0;
    }
    html[data-design="light"][data-design-preview="white-wide"] .product-scope-control {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: min(400px, 100%);
        min-width: 0;
    }
    html[data-design="light"][data-design-preview="white-wide"] .product-scope-option {
        font-size: 0.68rem;
    }
}

@media (max-width: 400px) {
    html[data-design="light"][data-design-preview="white-wide"] .product-scope-control {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: auto;
        gap: 3px;
    }
    html[data-design="light"][data-design-preview="white-wide"] .product-scope-thumb {
        display: none;
    }
    html[data-design="light"][data-design-preview="white-wide"] .product-scope-option {
        border: 1px solid transparent;
    }
    html[data-design="light"][data-design-preview="white-wide"] .product-scope-option.is-active {
        border-color: #fff;
        background: #fff;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-design="light"][data-design-preview="white-wide"] .gallery-head :is(button, .product-scope-thumb) {
        transition: none;
    }
}

/* Give each project its own mobile section before laying out its products. */
html[data-design-preview="white-wide"] .gallery.product-project-groups {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 760px) {
    html[data-design-preview="white-wide"] .gallery.product-project-groups {
        gap: 24px;
    }

    html[data-design-preview="white-wide"] .product-project-groups > .product-project-group {
        min-width: 0;
        padding: 8px 0 0;
        border: 0;
        border-top: 1px solid rgba(var(--action-rgb), 0.22);
        border-radius: 0;
    }

    html[data-design-preview="white-wide"] .product-project-group > .product-project-legend {
        display: grid;
        width: 100%;
        max-width: 100%;
        gap: 8px;
        padding: 0;
    }

    html[data-design-preview="white-wide"] .product-project-legend > a {
        width: 100%;
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 1.05rem;
        line-height: 1.4;
    }

    html[data-design-preview="white-wide"] .product-project-actions {
        gap: 12px;
        padding-bottom: 4px;
    }

    html[data-design-preview="white-wide"] .product-project-actions .project-group-action {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

}

/* Project contents are compact image/text rows, independent of catalog view mode. */
html[data-design-preview="white-wide"] .product-project-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

html[data-design-preview="white-wide"] .product-project-list-item {
    min-width: 0;
    margin: 0;
    padding: 0;
}

html[data-design-preview="white-wide"] .product-project-product {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 4px 0;
    color: var(--ink);
    text-decoration: none;
    border-radius: 6px;
}

html[data-design-preview="white-wide"] .product-project-product:hover {
    color: var(--action);
}

html[data-design-preview="white-wide"] .product-project-product:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 3px;
}

html[data-design-preview="white-wide"] .product-project-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: var(--muted);
}

html[data-design-preview="white-wide"] .product-project-product-image :is(picture, img) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

html[data-design-preview="white-wide"] .product-project-product-image > svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html[data-design-preview="white-wide"] .product-project-product-text {
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Separate stacked checks with the same quiet stroke as product junctions. */
@media (max-width: 640px) {
    html[data-design-preview="white-wide"] .compatibility-check-list .compatibility-check-items {
        row-gap: 32px;
    }

    html[data-design-preview="white-wide"] .compatibility-check-list .compatibility-check-items > .compatibility-check-card + .compatibility-check-card::before {
        content: "";
        position: absolute;
        pointer-events: none;
        left: 18.5%;
        top: -16.5px;
        width: 63%;
        height: 1px;
        background: linear-gradient(to right, rgba(140, 146, 153, 0), #8c9299 25%, #8c9299 75%, rgba(140, 146, 153, 0));
        opacity: 0.4;
    }
}

/* Check lists share the white page without nested decorative boxes or insets. */
html[data-design-preview="white-wide"] .compatibility-check-list {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html[data-design-preview="white-wide"] .compatibility-check-list .compatibility-check-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

html[data-design-preview="white-wide"] .compatibility-check-list :is(
    .compatibility-check-card-header,
    .compatibility-check-card-content,
    .compatibility-check-card-footer
) {
    padding-inline: 0;
    border-radius: 0;
    background: transparent;
}

html[data-design-preview="white-wide"] .compatibility-check-list .compatibility-check-card .compatibility-check-overview-products li {
    padding-inline: 0;
    border-radius: 0;
    background: transparent;
}

html[data-design-preview="white-wide"] .compatibility-check-list .compatibility-check-card-link:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 4px;
}

/* The separate projects page uses the same compact image/text contents. */
html[data-design-preview="white-wide"] #projects-content .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 32px 24px;
}

html[data-design-preview="white-wide"] #projects-content .projects-grid[data-project-view="list"] {
    grid-template-columns: minmax(0, 1fr);
}

html[data-design-preview="white-wide"] #projects-content .project-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: auto;
    align-content: start;
    gap: 12px;
    min-height: 0;
    padding: 0;
}

html[data-design-preview="white-wide"] #projects-content .project-card-header {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
}

html[data-design-preview="white-wide"] #projects-content .project-card-heading h2 {
    display: block;
    overflow: visible;
    font-size: 1rem;
    line-height: 1.4;
    -webkit-line-clamp: unset;
}

html[data-design-preview="white-wide"] #projects-content .project-engagement {
    position: relative;
    inset: auto;
    justify-content: flex-start;
    transform: none;
}

html[data-design-preview="white-wide"] #projects-content :is(.project-card-content, .project-card-footer) {
    min-height: 0;
    padding: 0;
}

html[data-design-preview="white-wide"] #projects-content .project-card-footer:not(:has(> *)) {
    display: none;
}

html[data-design-preview="white-wide"] #projects-content .project-card-products {
    gap: 4px;
}

html[data-design-preview="white-wide"] #projects-content .project-card-product {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    padding: 4px 0;
    background: transparent;
    border-radius: 0;
}

html[data-design-preview="white-wide"] #projects-content .project-card-product-image {
    width: 56px;
    height: 56px;
    background: transparent;
}

html[data-design-preview="white-wide"] #projects-content .project-card-product-name {
    display: block;
    overflow: visible;
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.4;
    -webkit-line-clamp: unset;
}

@media (max-width: 980px) {
    html[data-design-preview="white-wide"] #projects-content .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    html[data-design-preview="white-wide"] #projects-content .projects-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Public projects follow the catalog: contents, centered actions, then title. */
html[data-design-preview="white-wide"] #projects-content .project-section + .project-section--public {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(140, 146, 153, 0.2);
}

html[data-design-preview="white-wide"] #projects-content .projects-grid--public {
    align-items: stretch;
    gap: 24px;
}

html[data-design-preview="white-wide"] #projects-content .project-card--public {
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 0;
}

html[data-design-preview="white-wide"] #projects-content .project-card--public .project-card-preview {
    position: relative;
    min-width: 0;
    padding-bottom: 28px;
}

html[data-design-preview="white-wide"] #projects-content .project-card--public .project-engagement {
    position: absolute;
    inset: auto auto 0 50%;
    justify-content: center;
    gap: 4px;
    transform: translate(-50%, 50%);
}

html[data-design-preview="white-wide"] #projects-content .project-card--public .project-engagement-button {
    width: 36px;
    height: 36px;
    min-height: 36px;
    border-color: rgba(72, 83, 97, 0.1);
    box-shadow: 0 7px 18px rgba(61, 67, 75, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

html[data-design-preview="white-wide"] #projects-content .project-card--public .project-card-header {
    margin-top: 24px;
    align-items: start;
}

html[data-design-preview="white-wide"] #projects-content .project-card--public .project-card-heading {
    grid-template-columns: minmax(0, 1fr);
}

html[data-design-preview="white-wide"] #projects-content .project-card--public .project-card-footer:has(> *) {
    margin-top: 12px;
}

@media (max-width: 760px) {
    html[data-design-preview="white-wide"] #projects-content .projects-grid--public {
        gap: 24px 16px;
    }
}

/* Keep four project columns, but match the catalog's actual image dimensions. */
html[data-design-preview="white-wide"] #projects-content .projects-grid--public {
    container-type: inline-size;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

html[data-design-preview="white-wide"] #projects-content .project-card--public {
    grid-row: span 4;
    border: 0;
}

html[data-design-preview="white-wide"] #projects-content .project-card--public .project-card-header {
    margin: 0 0 10px;
}

html[data-design-preview="white-wide"] #projects-content .project-card--public .project-card-heading h2 {
    font-size: 0.9rem;
    line-height: 1.35;
}

html[data-design-preview="white-wide"] #projects-content .project-card--public .project-card-preview {
    /* Five catalog columns with four 24px gutters at desktop widths. */
    width: min(100%, calc((100cqi - 96px) / 5));
    padding: 0;
    align-self: start;
    justify-self: center;
}

.project-card-collage {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1;
    width: 100%;
    overflow: hidden;
    background: #fff;
}

.project-card-collage-slice {
    --collage-cut: min(8cqi, calc(100cqi / var(--collage-count)));
    position: absolute;
    inset-block: 0;
    left: calc(var(--collage-index) * 100% / var(--collage-count) - var(--collage-cut) / 2);
    width: calc(100% / var(--collage-count) + var(--collage-cut));
    clip-path: polygon(var(--collage-cut) 0, calc(100% - 2px) 0, calc(100% - var(--collage-cut) - 2px) 100%, 0 100%);
}

.project-card-collage-slice:first-child {
    left: 0;
    width: calc(100% / var(--collage-count) + var(--collage-cut) / 2);
    clip-path: polygon(0 0, calc(100% - 2px) 0, calc(100% - var(--collage-cut) - 2px) 100%, 0 100%);
}

.project-card-collage-slice:last-child {
    width: calc(100% / var(--collage-count) + var(--collage-cut) / 2);
    clip-path: polygon(var(--collage-cut) 0, 100% 0, 100% 100%, 0 100%);
}

.project-card-collage-slice:only-child {
    left: 0;
    width: 100%;
    clip-path: none;
}

.project-card-collage-slice img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.project-card-collage-placeholder {
    position: absolute;
    width: 32%;
    height: 32%;
    inset: 34%;
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html[data-design-preview="white-wide"] #projects-content .project-card--public > .project-card-content {
    margin-top: 28px;
}

html[data-design-preview="white-wide"] #projects-content .project-card--public .project-card-products {
    gap: 2px;
}

html[data-design-preview="white-wide"] #projects-content .project-card--public .project-card-product {
    display: block;
    min-height: 0;
    padding: 0;
}

html[data-design-preview="white-wide"] #projects-content .project-card--public .project-card-product-name {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
}

/* At tablet/phone widths, use the same three/two columns as the catalog. */
@media (max-width: 1100px) {
    html[data-design-preview="white-wide"] #projects-content .projects-grid--public {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html[data-design-preview="white-wide"] #projects-content .project-card--public .project-card-preview {
        width: 100%;
    }
}

@media (max-width: 760px) {
    html[data-design-preview="white-wide"] #projects-content .projects-grid--public {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}