/**
 * MCE Product Page - minimalny CSS layoutu.
 *
 * Odtwarza geometrie obecnego layoutu z Divi (sekcje, kontener, uklad 1/2 + 1/2,
 * sekcje full-width). NIE stylujemy galerii / atrybutow / cart - to wnosza
 * wlasne moduly MCE_*.
 *
 * Breakpoint mobile dopasowany do Divi (980 px).
 *
 * @package my-custom-elements
 * @since   1.3.0
 */

.mce-product-page {
    width: 100%;
    box-sizing: border-box;
}

.mce-product-page * {
    box-sizing: border-box;
}

/* Sekcje */
.mce-pp-section {
    width: 100%;
    padding: 0 15px;
}

.mce-pp-section--top {
    padding-top: 0;
    padding-bottom: 0;
}

.mce-pp-section--main {
    padding-top: 0;
}

.mce-pp-section--description {
    padding-top: 24px;
    padding-bottom: 24px;
}

.mce-pp-section--fullwidth {
    padding: 0;
}

.mce-pp-section--packaging {
    padding-top: 0;
    padding-bottom: 0;
}

/* Kontener (Divi default 1080 px) */
.mce-pp-container {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
}

/* Wiersze i kolumny */
.mce-pp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
}

.mce-pp-row--2col > .mce-pp-col--left,
.mce-pp-row--2col > .mce-pp-col--right {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
}

.mce-pp-col {
    min-width: 0;
}

.mce-pp-col--12 {
    flex: 0 0 100%;
    max-width: 100%;
}

.mce-pp-text-center {
    text-align: center;
}

/* Tytul produktu - styl zblizony do dotychczasowego et_pb_wc_title */
.mce-pp-title {
    margin: 0 0 10px;
    font-weight: 500;
    line-height: 1.2;
}

/* Krotki opis */
.mce-pp-short-desc {
    margin-bottom: 18px;
}

/* Mobile - kolumny 1/2 ukladaja sie jedna pod druga, jak w Divi */
@media (max-width: 980px) {
    .mce-pp-row {
        gap: 20px;
    }

    .mce-pp-row--2col > .mce-pp-col--left,
    .mce-pp-row--2col > .mce-pp-col--right {
        flex: 0 0 100%;
        max-width: 100%;
    }
}