/* Einbettung des procavallo-Konfigurators in das Shopware-Layout. Das Aussehen des Konfigurators selbst kommt
   unverändert aus pc_neu.css. */
.cms-element-pcv-designer-configurator {
    width: 100%;
    overflow-x: auto;
}

.cms-element-pcv-designer-configurator .pcv-configurator-buy-form {
    display: none;
}

/* Designer ohne Umriss-Vorschau (BBH): Produktbild im Vorschau-Feld */
.cms-element-pcv-designer-configurator .pcv-configurator-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* pc_neu.css legt die Handy-Ansicht auf feste 520 px an – auf Telefonen (≈ 360–430 px) lag „In den Warenkorb“ dann
   außerhalb des Bildschirms. Hier fließend bis höchstens 520 px; Aufbau und Reihenfolge bleiben wie im Original. */
@media only screen and (max-width: 900px) {
    .cms-element-pcv-designer-configurator .pc-title,
    .cms-element-pcv-designer-configurator .pc-description,
    .cms-element-pcv-designer-configurator .pc-page-labels,
    .cms-element-pcv-designer-configurator .pc-pages,
    .cms-element-pcv-designer-configurator .pc-right,
    .cms-element-pcv-designer-configurator .pc-preview,
    .cms-element-pcv-designer-configurator .pc-info,
    .cms-element-pcv-designer-configurator .pc-price {
        width: 100%;
        max-width: 520px;
    }

    .cms-element-pcv-designer-configurator .pc-page-label {
        width: calc(50% - 2px);
    }

    /* Die Pixi-Vorschau übernimmt beim Start Breite und Höhe dieses Rahmens – Seitenverhältnis wie die 520 × 360 px */
    .cms-element-pcv-designer-configurator .pc-preview {
        height: auto;
        aspect-ratio: 520 / 360;
    }

    .cms-element-pcv-designer-configurator .pc-preview canvas {
        max-width: 100%;
    }
}