/* Parametrical Search — residual styles. Layout, colors, spacing come from
   Bootstrap 5 utilities and components. Only leftover bits go here. */

/* Neutralize a site-wide legacy rule (.content-row ul { list-style-type: square }),
   which defeats Bootstrap's .list-unstyled on our grids. */
.tx-parametricalsearch ul { list-style: none; margin-left: 0; padding-left: 0; }
.tx-parametricalsearch ul li::marker { content: none; }

/* Square corners: override every Bootstrap radius inside the extension scope
   so the design matches the rest of intrexis' site language. */
.tx-parametricalsearch .card,
.tx-parametricalsearch .card-img,
.tx-parametricalsearch .card-img-top,
.tx-parametricalsearch .card-img-bottom,
.tx-parametricalsearch img,
.tx-parametricalsearch .btn,
.tx-parametricalsearch .btn-group > .btn,
.tx-parametricalsearch .form-control,
.tx-parametricalsearch .form-select,
.tx-parametricalsearch .form-check-input,
.tx-parametricalsearch .input-group,
.tx-parametricalsearch .input-group > *,
.tx-parametricalsearch .input-group-text,
.tx-parametricalsearch .input-group-sm > .btn,
.tx-parametricalsearch .input-group-sm > .form-control,
.tx-parametricalsearch .input-group-sm > .form-select,
.tx-parametricalsearch .input-group-sm > .input-group-text,
.tx-parametricalsearch .input-group-lg > .btn,
.tx-parametricalsearch .input-group-lg > .form-control,
.tx-parametricalsearch .input-group-lg > .form-select,
.tx-parametricalsearch .input-group-lg > .input-group-text,
.tx-parametricalsearch .alert,
.tx-parametricalsearch .badge,
.tx-parametricalsearch .dropdown-menu,
.tx-parametricalsearch .page-link,
.tx-parametricalsearch .pagination,
.tx-parametricalsearch .list-group,
.tx-parametricalsearch .list-group-item { border-radius: 0 !important; }

/* Brand palette. Yellow is reserved for accents (BG of interactive state,
   thin accent borders). Anthracite is text/border, white is the canvas.
   Yellow as text on white fails contrast, so we never do that. */
.tx-parametricalsearch {
    --ps-accent: #FFEB00;
    --ps-ink: #2A2A41;
    /* Rebind Bootstrap's "primary" to the ink tone — any .text-primary
       inside our scope becomes anthracite (yellow-on-white fails contrast). */
    --bs-primary: #2A2A41;
    --bs-primary-rgb: 42, 42, 65;
}

/* Primary button: yellow fill + anthracite text; hover inverts. */
.tx-parametricalsearch .btn-primary {
    background-color: var(--ps-accent);
    border-color: var(--ps-ink);
    color: var(--ps-ink);
}
.tx-parametricalsearch .btn-primary:hover,
.tx-parametricalsearch .btn-primary:focus-visible,
.tx-parametricalsearch .btn-primary:active {
    background-color: var(--ps-ink);
    border-color: var(--ps-ink);
    color: var(--ps-accent);
}

/* Outline/secondary: anthracite ink, ink border, yellow wash on hover. */
.tx-parametricalsearch .btn-outline-secondary {
    border-color: var(--ps-ink);
    color: var(--ps-ink);
}
.tx-parametricalsearch .btn-outline-secondary:hover,
.tx-parametricalsearch .btn-outline-secondary:focus-visible {
    background-color: var(--ps-accent);
    border-color: var(--ps-ink);
    color: var(--ps-ink);
}

/* Hover accent on product cards: thin yellow strip on top edge. */
.ps-card {
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, border-top-color .15s ease;
    border-top: 2px solid transparent;
}
.ps-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1) !important;
    border-top-color: var(--ps-accent);
}

/* Call-to-action button — mirrors the site's a.calltoaction in
   fileadmin/site/templates/mainTemplate/css/individual.css so the detail
   view feels consistent with the rest of intrexis. Uses the existing
   Pfeilchen.svg arrow from the legacy template assets. */
.tx-parametricalsearch .ps-cta {
    background: var(--ps-ink);
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    display: inline-block;
    padding: 10px 20px 10px 60px;
    background-image: url(/fileadmin/site/templates/mainTemplate/images/Pfeilchen.svg);
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 30px auto;
    text-decoration: none;
    margin: 10px 0;
    border-radius: 0;
}
.tx-parametricalsearch .ps-cta:hover,
.tx-parametricalsearch .ps-cta:focus-visible {
    background-color: var(--ps-ink);
    color: var(--ps-accent);
    text-decoration: none;
}

/* Anthracite-filled button (reset-filters, back-to-results, etc.). */
.tx-parametricalsearch .ps-btn-ink {
    background-color: var(--ps-ink);
    border: 1px solid var(--ps-ink);
    color: #fff;
    border-radius: 0;
    padding: .5rem 1.25rem;
    display: inline-block;
    text-decoration: none;
}
.tx-parametricalsearch .ps-btn-ink:hover,
.tx-parametricalsearch .ps-btn-ink:focus-visible {
    background-color: var(--ps-ink);
    border-color: var(--ps-ink);
    color: var(--ps-accent);
    text-decoration: none;
}

/* Pagination: anthracite fill with white ink; active/hover page flips to
   yellow + anthracite text. Scaled ~30% larger than Bootstrap's default. */
.tx-parametricalsearch .pagination { font-size: 1.3rem; }
.tx-parametricalsearch .page-link {
    background-color: var(--ps-ink);
    border: 1px solid var(--ps-ink);
    color: #fff;
    padding: .65rem 1.1rem;
    border-radius: 0;
}
.tx-parametricalsearch .page-link:hover,
.tx-parametricalsearch .page-link:focus-visible {
    background-color: var(--ps-ink);
    border-color: var(--ps-ink);
    color: var(--ps-accent);
}
.tx-parametricalsearch .page-item.active .page-link {
    background-color: var(--ps-ink);
    border-color: var(--ps-ink);
    color: var(--ps-accent);
    z-index: 3;
}
.tx-parametricalsearch .page-item.disabled .page-link {
    background-color: var(--ps-ink);
    border-color: var(--ps-ink);
    color: rgba(255, 255, 255, .4);
}

/* Active filter checkbox: anthracite fill with a yellow checkmark — the
   default Bootstrap glyph is overridden inline so we can recolor the
   stroke to var(--ps-accent) without shipping a separate SVG. */
.tx-parametricalsearch .form-check-input:checked {
    background-color: var(--ps-ink);
    border-color: var(--ps-ink);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23FFEB00' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
}
.tx-parametricalsearch .form-check-input:focus {
    border-color: var(--ps-ink);
    box-shadow: 0 0 0 .2rem rgba(255, 235, 0, .45);
}

/* Form focus ring: swap Bootstrap's default blue glow for the brand yellow. */
.tx-parametricalsearch .form-control:focus,
.tx-parametricalsearch .form-select:focus,
.tx-parametricalsearch .btn:focus-visible {
    border-color: var(--ps-ink);
    box-shadow: 0 0 0 .2rem rgba(255, 235, 0, .45);
}

/* Dual-handle range slider in the filter panel — anthracite track + handles,
   yellow on focus/active. Layered over the noUiSlider base CSS that JS
   pulls from esm.sh on first use. */
.tx-parametricalsearch .ps-range-slider {
    margin: .5rem .25rem 1rem;
    height: 4px;
}
.tx-parametricalsearch .ps-range-slider[hidden] { display: none; }
.tx-parametricalsearch .ps-range-slider.noUi-target {
    background: #e5e5e8;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}
.tx-parametricalsearch .ps-range-slider .noUi-connect {
    background: var(--ps-ink);
}
.tx-parametricalsearch .ps-range-slider .noUi-handle {
    background: var(--ps-ink);
    border: 0;
    box-shadow: none;
    border-radius: 0;
    width: 14px;
    height: 14px;
    top: -5px;
    right: -7px;
    cursor: grab;
}
.tx-parametricalsearch .ps-range-slider .noUi-handle::before,
.tx-parametricalsearch .ps-range-slider .noUi-handle::after { display: none; }
.tx-parametricalsearch .ps-range-slider .noUi-handle:focus,
.tx-parametricalsearch .ps-range-slider .noUi-handle:active,
.tx-parametricalsearch .ps-range-slider .noUi-active {
    background: var(--ps-accent);
    cursor: grabbing;
    outline: 0;
}

/* Search + sort controls in the results header: same width, both with a
   square anthracite icon prepend so they match the rest of the buttons. */
.tx-parametricalsearch .ps-results__controls { width: 100%; max-width: 260px; }
.tx-parametricalsearch .ps-results__controls .input-group { width: 100%; }
.tx-parametricalsearch .ps-results__controls .input-group-text {
    background: var(--ps-ink);
    color: #fff;
    border-color: var(--ps-ink);
}

/* Total-count accent: 3px yellow rule to the left of the big number,
   keeps the number itself readable (anthracite on white). */
.tx-parametricalsearch .ps-results__count [data-ps-total-label] {
    color: var(--ps-ink);
    padding-left: .75rem;
    border-left: 3px solid var(--ps-accent);
}

/* Dim the result list while a filter-triggered fetch is in flight */
.ps-app[data-ps-loading="true"] [data-ps-list],
.ps-app[data-ps-loading="true"] [data-ps-pagination] {
    opacity: .5;
    pointer-events: none;
    transition: opacity .15s;
}

/* Sticky filter column on wide viewports, so it stays in view while scrolling
   results. Only engages when the column has room. */
@media (min-width: 992px) {
    .ps-filters { position: sticky; top: 1rem; align-self: flex-start; }
}

/* Multiple plugin — "rows" layout: one product per row, image left, specs
   in the middle, datasheet/3D actions right. Divs instead of <table>. */
.tx-parametricalsearch .ps-rows { display: flex; flex-direction: column; }
.tx-parametricalsearch .ps-row {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #e5e5e8;
}
.tx-parametricalsearch .ps-row:last-child { border-bottom: 0; }
.tx-parametricalsearch .ps-row__media { display: flex; justify-content: center; }
.tx-parametricalsearch .ps-row__image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.tx-parametricalsearch .ps-row__image--empty {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f5f5f7;
}
.tx-parametricalsearch .ps-row__data {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1rem;
    row-gap: .25rem;
    margin: 0;
    font-size: .95rem;
}
.tx-parametricalsearch .ps-row__data dt {
    color: #6c757d;
    font-weight: 400;
}
.tx-parametricalsearch .ps-row__data dd {
    margin: 0;
    color: var(--ps-ink);
}
.tx-parametricalsearch .ps-row__partnumber { font-weight: 600; font-size: 1.05rem; }
.tx-parametricalsearch .ps-row__actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: stretch;
}
.tx-parametricalsearch .ps-row__action {
    background: var(--ps-ink);
    color: #fff;
    padding: .5rem 1rem;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .8rem;
    white-space: nowrap;
    text-align: center;
}
.tx-parametricalsearch .ps-row__action:hover,
.tx-parametricalsearch .ps-row__action:focus-visible {
    background: var(--ps-ink);
    color: var(--ps-accent);
    text-decoration: none;
}

/* Collapse to a stacked layout on small screens so rows remain readable. */
@media (max-width: 767.98px) {
    .tx-parametricalsearch .ps-row {
        grid-template-columns: 1fr;
        gap: .75rem;
    }
    .tx-parametricalsearch .ps-row__actions { flex-direction: row; flex-wrap: wrap; }
}

/* Multiple plugin — "mainImage" layout: one shared image on the left, a
   grid-based table on the right. All columns are always present; empty
   cells stay visibly empty so the family spec-table pattern holds even
   when products mix populated and missing fields. */
.tx-parametricalsearch .ps-mainimage {
    display: grid;
    grid-template-columns: minmax(200px, 340px) 1fr;
    gap: 2rem;
    align-items: start;
}
.tx-parametricalsearch .ps-mainimage__media {
    position: sticky;
    top: 1rem;
    display: flex;
    justify-content: center;
}
.tx-parametricalsearch .ps-mainimage__image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* CSS-grid table: 5 spec columns + 2 narrow action columns for 3D/datasheet. */
.tx-parametricalsearch .ps-mainimage__table { width: 100%; }
.tx-parametricalsearch .ps-ptable__row {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.3fr 1.1fr 1.1fr auto auto auto;
    gap: .75rem;
    align-items: center;
    padding: .65rem .5rem;
    border-bottom: 1px solid #e5e5e8;
    font-size: .95rem;
}
.tx-parametricalsearch .ps-ptable__row > * {
    min-width: 0;
    overflow-wrap: break-word;
}
.tx-parametricalsearch .ps-ptable__row--head {
    background: var(--ps-ink);
    color: #fff;
    font-weight: 600;
    font-size: 11px;
}
.tx-parametricalsearch .ps-ptable__partnumber {
    font-weight: 600;
    color: var(--ps-ink);
}
.tx-parametricalsearch .ps-ptable__cell--action { text-align: center; width: 3rem; }
.tx-parametricalsearch .ps-ptable__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--ps-ink);
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
}
.tx-parametricalsearch .ps-ptable__icon:hover,
.tx-parametricalsearch .ps-ptable__icon:focus-visible {
    background: var(--ps-ink);
    color: var(--ps-accent);
    text-decoration: none;
}

/* 3D viewer modal. The viewer script lazy-loads Three.js on first open and
   drives a canvas inside .ps-3d-viewer. We fix the viewer's aspect so the
   canvas always has non-zero dimensions before Three.js mounts. */
.tx-parametricalsearch .ps-3d-modal .modal-content { border-radius: 0; border-color: var(--ps-ink); }
.tx-parametricalsearch .ps-3d-modal .modal-header { border-bottom-color: #e5e5e8; }
.tx-parametricalsearch .ps-3d-modal .modal-footer { border-top-color: #e5e5e8; }
.tx-parametricalsearch .ps-3d-viewer {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #fff;
}
.tx-parametricalsearch .ps-3d-viewer canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}
.tx-parametricalsearch .ps-3d-viewer__status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: .9rem;
    pointer-events: none;
}
.tx-parametricalsearch .ps-3d-viewer__status[hidden] { display: none; }

/* Progress bar — sits at the bottom of the canvas while the glb loads. */
.tx-parametricalsearch .ps-3d-viewer__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(42, 42, 65, .1);
    pointer-events: none;
}
.tx-parametricalsearch .ps-3d-viewer__progress[hidden] { display: none; }
.tx-parametricalsearch .ps-3d-viewer__progressBar {
    height: 100%;
    width: 0;
    background: var(--ps-accent);
    transition: width .15s linear;
}

/* Viewer toolbar — floats top-right over the canvas. */
.tx-parametricalsearch .ps-3d-viewer__toolbar {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: flex;
    gap: .375rem;
    z-index: 2;
}
.tx-parametricalsearch .ps-3d-viewer__btn {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(42, 42, 65, .85);
    color: #fff;
    border: 0;
    border-radius: 0;
    font-size: .95rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.tx-parametricalsearch .ps-3d-viewer__btn:hover,
.tx-parametricalsearch .ps-3d-viewer__btn:focus-visible {
    background: var(--ps-ink);
    color: var(--ps-accent);
    outline: 0;
}
.tx-parametricalsearch .ps-3d-viewer__btn.is-active {
    background: var(--ps-accent);
    color: var(--ps-ink);
}

/* Compare button — same square ink/icon look as the 3D/datasheet actions.
   Placed in several contexts (card corner, row actions cluster, table
   partnumber cell, detail button bar) via the --corner/--row/--inline
   modifier. Active state flips the icon to yellow. */
.tx-parametricalsearch .ps-compare-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--ps-ink);
    color: #fff;
    border: 0;
    border-radius: 0;
    font-size: 1rem;
    cursor: pointer;
    transition: color .15s;
    position: relative; /* anchor for the data-ps-compare-limit ::after tooltip */
}
.tx-parametricalsearch .ps-compare-btn:hover,
.tx-parametricalsearch .ps-compare-btn:focus-visible {
    outline: 0;
    color: var(--ps-accent);
}
.tx-parametricalsearch .ps-compare-btn.is-active { color: var(--ps-accent); }
.tx-parametricalsearch .ps-compare-btn--corner {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 50;
    isolation: isolate;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.tx-parametricalsearch .ps-compare-btn--detail {
    /* Match .ps-cta's vertical metrics (padding 10px top/bottom + line-height
       1.5 → ~44px tall) so the compare button stands shoulder-to-shoulder
       with the Datasheet / 3D / Anfrage buttons in the detail action row. */
    width: auto;
    height: auto;
    padding: 15px 14px;
    margin: 10px 0;
    font-size: 1.1rem;
}
.tx-parametricalsearch .ps-compare-btn--inline {
    margin-left: .5rem;
    vertical-align: middle;
}

/* Floating compare tray — bottom-right, sticky. */
.tx-parametricalsearch .ps-compare-tray {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1050;
    background: var(--ps-ink);
    color: #fff;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
    max-width: calc(100vw - 2rem);
    flex-wrap: wrap;
}
.tx-parametricalsearch .ps-compare-tray[hidden] { display: none; }
/* Active filter chips above the result list — anthracite pills with
   a small × on the right. Clicking the chip resets that single filter.
   Hidden via the [hidden] attribute when no filter is active. */
.tx-parametricalsearch .ps-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.tx-parametricalsearch .ps-active-filters[hidden] { display: none; }
.tx-parametricalsearch .ps-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background: var(--ps-ink);
    color: #fff;
    padding: .25rem .5rem .25rem .65rem;
    border: 0;
    border-radius: 0;
    font-size: .8rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.tx-parametricalsearch .ps-chip:hover,
.tx-parametricalsearch .ps-chip:focus-visible {
    background: var(--ps-ink);
    color: var(--ps-accent);
    outline: 0;
}
.tx-parametricalsearch .ps-chip__group {
    color: rgba(255, 255, 255, .65);
    font-weight: 400;
}
.tx-parametricalsearch .ps-chip:hover .ps-chip__group,
.tx-parametricalsearch .ps-chip:focus-visible .ps-chip__group {
    color: rgba(255, 235, 0, .65);
}
.tx-parametricalsearch .ps-chip__value { font-weight: 600; }
.tx-parametricalsearch .ps-chip__x {
    font-size: 1.05rem;
    line-height: 1;
    margin-left: .25rem;
}
.tx-parametricalsearch .ps-chip--clear {
    background: transparent;
    color: var(--ps-ink);
    border: 1px solid var(--ps-ink);
    font-weight: 600;
}
.tx-parametricalsearch .ps-chip--clear:hover,
.tx-parametricalsearch .ps-chip--clear:focus-visible {
    background: var(--ps-ink);
    color: var(--ps-accent);
}

/* Inquiry form modal — TYPO3 cms-form output is rendered into the body,
   so the styling has to cover whatever the form prototype emits.
   Keep neutral defaults; the brand palette only kicks in on the submit. */
.tx-parametricalsearch .ps-inquiry-modal .modal-content { border-radius: 0; border-color: var(--ps-ink); }
.tx-parametricalsearch .ps-inquiry-modal .form-group { margin-bottom: 16px; }
.tx-parametricalsearch .ps-inquiry-modal label { font-weight: 500; }
/* Privacy-Consent-Checkbox: cms-form rendert das input INSIDE des labels mit
   einer veralteten .add-on-Klasse, ohne Bootstrap-5-form-check-input-
   Positionierung. Mit Flex-Layout wird die Checkbox sauber linksbündig
   neben dem mehrzeiligen Label ausgerichtet. */
.tx-parametricalsearch .ps-inquiry-modal .form-check {
    text-align: left;
    padding-left: 0;
}
.tx-parametricalsearch .ps-inquiry-modal .form-check-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    text-align: left;
    cursor: pointer;
}
.tx-parametricalsearch .ps-inquiry-modal .form-check input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0.25em 0 0 0;
    width: 1em;
    height: 1em;
}
.tx-parametricalsearch .ps-inquiry-modal .form-control,
.tx-parametricalsearch .ps-inquiry-modal .form-select {
    border-radius: 0;
}
.tx-parametricalsearch .ps-inquiry-modal .actions .btn,
.tx-parametricalsearch .ps-inquiry-modal button[type="submit"] {
    background: var(--ps-ink);
    color: #fff;
    border: 1px solid var(--ps-ink);
    border-radius: 0;
    padding: .5rem 1.25rem;
    text-transform: uppercase;
    font-weight: 400;
}
.tx-parametricalsearch .ps-inquiry-modal .actions .btn:hover,
.tx-parametricalsearch .ps-inquiry-modal button[type="submit"]:hover {
    background: var(--ps-ink);
    color: var(--ps-accent);
}
.tx-parametricalsearch .ps-inquiry-modal input[readonly],
.tx-parametricalsearch .ps-inquiry-modal input[type="hidden"] + .form-control[readonly] {
    background: #f5f5f7;
    color: var(--ps-ink);
}
.tx-parametricalsearch .ps-inquiry-modal .help-block { color: #6c757d; font-size: .85rem; }
.tx-parametricalsearch .ps-inquiry-modal .alert,
.tx-parametricalsearch .ps-inquiry-modal .typo3-form-confirmation { border-radius: 0; }
.tx-parametricalsearch .ps-inquiry-loading { font-size: .9rem; }

/* Tooltip on inactive compare buttons when the comparison is full.
   Pure CSS, attribute-driven: render() in JS sets data-ps-compare-limit
   on each unselected button as soon as the third product is picked. */
.tx-parametricalsearch .ps-compare-btn[data-ps-compare-limit] { cursor: not-allowed; }
.tx-parametricalsearch .ps-compare-btn[data-ps-compare-limit]:hover::after,
.tx-parametricalsearch .ps-compare-btn[data-ps-compare-limit]:focus-visible::after {
    content: attr(data-ps-compare-limit);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ps-ink);
    color: var(--ps-accent);
    font-size: .78rem;
    font-weight: 600;
    padding: .35rem .6rem;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.tx-parametricalsearch .ps-compare-btn[data-ps-compare-limit]:hover::before,
.tx-parametricalsearch .ps-compare-btn[data-ps-compare-limit]:focus-visible::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: var(--ps-ink);
    pointer-events: none;
    z-index: 100;
}
.tx-parametricalsearch .ps-compare-tray__label {
    font-size: .85rem;
    color: rgba(255, 255, 255, .7);
    display: flex;
    align-items: center;
    gap: .375rem;
}
.tx-parametricalsearch .ps-compare-tray__count {
    background: var(--ps-accent);
    color: var(--ps-ink);
    font-weight: 600;
    padding: .1rem .45rem;
    font-size: .8rem;
}
.tx-parametricalsearch .ps-compare-tray__items {
    list-style: none;
    display: flex;
    gap: .5rem;
    margin: 0;
    padding: 0;
}
.tx-parametricalsearch .ps-compare-tray__item {
    display: flex;
    align-items: center;
    gap: .375rem;
    background: rgba(255, 255, 255, .08);
    padding: .25rem .5rem .25rem .25rem;
    font-size: .85rem;
}
.tx-parametricalsearch .ps-compare-tray__thumb {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    background: #fff;
}
.tx-parametricalsearch .ps-compare-tray__thumb--empty { background: rgba(255, 255, 255, .15); }
.tx-parametricalsearch .ps-compare-tray__remove {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    padding: 0 .25rem;
}
.tx-parametricalsearch .ps-compare-tray__remove:hover { color: var(--ps-accent); }
.tx-parametricalsearch .ps-compare-tray__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}
.tx-parametricalsearch .ps-compare-tray__clear {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .7);
    font-size: .85rem;
    cursor: pointer;
    padding: .25rem .5rem;
}
.tx-parametricalsearch .ps-compare-tray__clear:hover { color: #fff; }
.tx-parametricalsearch .ps-compare-tray__open.is-disabled {
    pointer-events: none;
    opacity: .45;
}

/* Compare page — CSS-grid table. --ps-compare-cols is set inline on the
   container so the grid adapts to the number of products (2 or 3). */
.tx-parametricalsearch .ps-compare__grid {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(var(--ps-compare-cols, 2), minmax(0, 2fr));
    column-gap: 0;
    row-gap: 0;
}
.tx-parametricalsearch .ps-compare__row {
    display: contents;
}
.tx-parametricalsearch .ps-compare__label,
.tx-parametricalsearch .ps-compare__col {
    padding: .75rem 1rem;
    border-bottom: 1px solid #e5e5e8;
    display: flex;
    align-items: center;
}
.tx-parametricalsearch .ps-compare__label {
    color: #6c757d;
    font-weight: 400;
    font-size: .9rem;
    background: #fafafb;
}
.tx-parametricalsearch .ps-compare__row--head .ps-compare__col {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: 1rem;
    background: var(--ps-ink);
    color: #fff;
    border-bottom-color: var(--ps-ink);
    position: relative;
}
.tx-parametricalsearch .ps-compare__media img {
    max-width: 100%;
    height: auto;
    background: #fff;
    padding: .5rem;
}
.tx-parametricalsearch .ps-compare__partnumber { font-weight: 600; font-size: 1.1rem; }
.tx-parametricalsearch .ps-compare__col-actions {
    position: absolute;
    top: .5rem;
    right: .5rem;
}
.tx-parametricalsearch .ps-compare__remove {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    padding: .25rem .5rem;
}
.tx-parametricalsearch .ps-compare__remove:hover { color: var(--ps-accent); }

/* Responsive collapse: on narrow screens keep the 2-column (label/value)
   layout but stack the product-group blocks vertically per product. */
@media (max-width: 575.98px) {
    .tx-parametricalsearch .ps-compare__grid {
        grid-template-columns: 1fr;
    }
    .tx-parametricalsearch .ps-compare__label {
        font-weight: 600;
        background: transparent;
        border-bottom: 0;
        padding-bottom: 0;
    }
}

/* Fullscreen — make the viewer fill the whole element so canvas + toolbar
   keep their relative positioning. */
.tx-parametricalsearch .ps-3d-viewer:fullscreen {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    background: #fff;
}
.tx-parametricalsearch .ps-3d-viewer:fullscreen canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Stack both columns and pivot the table into labeled rows on mobile. */
@media (max-width: 767.98px) {
    .tx-parametricalsearch .ps-mainimage {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .tx-parametricalsearch .ps-mainimage__media { position: static; }
    .tx-parametricalsearch .ps-ptable__row--head { display: none; }
    .tx-parametricalsearch .ps-ptable__row {
        grid-template-columns: 1fr auto;
        gap: .5rem .75rem;
    }
    .tx-parametricalsearch .ps-ptable__cell--action { width: auto; }
}