/* ========================================================================== 
   MegaPets Product Content — frontend product-description grid

   The description remains complete server-rendered HTML. These styles enhance
   only plugin-owned classes; without JavaScript, normal H2/text content and
   the optional media source stay visible in their natural source order.
   ========================================================================== */

.mpc-product-content-description--enhanced,
.mpc-product-content-description--enhanced *,
.mpc-product-content-audio,
.mpc-product-content-audio *,
.mpc-product-content-media-source,
.mpc-product-content-media-source * {
    box-sizing: border-box;
}

.mpc-product-content-description--enhanced {
    width: 100%;
    max-width: 1320px;
    margin: 28px auto;
    padding: 18px;
    border: 0;
    border-radius: 22px;
    background: transparent;
    box-shadow: none;
    container: mpc-product-content-description / inline-size;
}

.mpc-product-content-description--enhanced .mpc-product-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Four to six editorial text-and-media rows. Text always precedes its related
   medium in the DOM; the saved row setting controls only its desktop side. */
.mpc-product-content-description--enhanced .mpc-product-content-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "text media";
    align-items: stretch;
    gap: 16px;
    width: 100%;
    min-width: 0;
    height: min(320px, calc(33.333333cqw - 5.333333px));
    margin: 0;
    padding: 0;
}

.mpc-product-content-description--enhanced
.mpc-product-content-row--media-left {
    grid-template-areas: "media text";
}

.mpc-product-content-description--enhanced
.mpc-product-content-row > .mpc-product-content-card {
    grid-area: text;
    align-self: stretch;
    height: 100%;
    aspect-ratio: auto;
}

.mpc-product-content-description--enhanced
.mpc-product-content-row > .mpc-product-content-media {
    grid-area: media;
    align-self: stretch;
    height: 100%;
    aspect-ratio: auto;
}

.mpc-product-content-description--enhanced
.mpc-product-content-row.is-text-only {
    grid-template-areas: "text text";
}

.mpc-product-content-description--enhanced
.mpc-product-content-row.is-media-only {
    grid-template-areas: ". media";
}

.mpc-product-content-description--enhanced
.mpc-product-content-row.is-media-only.mpc-product-content-row--media-left {
    grid-template-areas: "media .";
}

.mpc-product-content-description--enhanced .mpc-product-content-card,
.mpc-product-content-description--enhanced .mpc-product-content-media,
.mpc-product-content-media-source .mpc-product-content-media {
    min-width: 0;
    margin: 0;
    border: 1px solid rgba(166, 118, 61, 0.18);
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
}

.mpc-product-content-description--enhanced .mpc-product-content-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-self: start;
    width: 100%;
    min-height: 0;
    aspect-ratio: auto;
    padding: 24px 26px 23px;
    overflow: hidden;
    color: #705d53;
    font-family: var(
        --mp-font-body,
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif
    );
    transition:
        border-color var(--mp-duration-normal, 240ms)
            var(--mp-ease, ease),
        box-shadow var(--mp-duration-normal, 240ms)
            var(--mp-ease, ease),
        transform var(--mp-duration-normal, 240ms)
            var(--mp-ease, ease);
}

.mpc-product-content-description--enhanced .mpc-product-content-card {
    border-color: transparent;
    border-radius: 0;
    background: transparent;
}

.mpc-product-content-description--enhanced .mpc-product-content-card::before,
.mpc-product-content-description--enhanced .mpc-product-content-card::after {
    content: none;
}

.mpc-product-content-description--enhanced .mpc-product-content-card.is-targeted {
    border-color: rgba(189, 135, 61, 0.58);
    box-shadow:
        0 0 0 3px rgba(189, 135, 61, 0.14),
        0 10px 24px rgba(91, 64, 51, 0.08);
    transform: translateY(-1px);
}

.mpc-product-content-description--enhanced .mpc-product-content-card__kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 0;
    color: #946328;
    font-family: var(
        --mp-font-body,
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif
    );
    font-size: 12px;
    font-weight: var(--mp-font-weight-medium, 500);
    line-height: 1.35;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.mpc-product-content-description--enhanced .mpc-product-content-card__kicker-dot {
    display: block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #946328;
}

.mpc-product-content-description--enhanced .mpc-product-content-card__heading {
    min-width: 0;
    margin: 0 0 10px;
    padding: 0;
    color: #5b4033;
    font-family: var(
        --mp-font-accent,
        "Source Serif 4",
        Georgia,
        "Times New Roman",
        serif
    );
    font-size: 25px;
    font-style: normal;
    font-weight: var(--mp-font-weight-medium, 500);
    line-height: 1.18;
    letter-spacing: 0;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    text-wrap: balance;
    overflow-wrap: anywhere;
    scroll-margin-top:
        calc(
            var(--mp-site-header-sticky-offset-desktop, 96px)
            + 18px
        );
}

.mpc-product-content-description--enhanced .mpc-product-content-card__heading::before,
.mpc-product-content-description--enhanced .mpc-product-content-card__heading::after {
    content: none;
}

.mpc-product-content-description--enhanced .mpc-product-content-card__body {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 9px 0 0;
    border: 0;
    background: transparent;
    color: #705d53;
    font-family: var(
        --mp-font-body,
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif
    );
    font-size: 14px;
    font-style: normal;
    font-weight: var(--mp-font-weight-regular, 400);
    line-height: 1.68;
    text-align: left;
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: anywhere;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color:
        var(--mp-scrollbar-thumb-color, rgb(199 154 87 / 42%))
        var(--mp-scrollbar-track-color, transparent);
    -webkit-overflow-scrolling: touch;
}

.mpc-product-content-description--enhanced
.mpc-product-content-card__body::-webkit-scrollbar {
    width: var(--mp-scrollbar-size, 7px);
    height: var(--mp-scrollbar-size, 7px);
}

.mpc-product-content-description--enhanced
.mpc-product-content-card__body::-webkit-scrollbar-track {
    background: var(--mp-scrollbar-track-color, transparent);
}

.mpc-product-content-description--enhanced
.mpc-product-content-card__body::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: var(--mp-radius-pill, 999px);
    background: var(--mp-scrollbar-thumb-color, rgb(199 154 87 / 42%));
    box-shadow: none;
}

.mpc-product-content-description--enhanced
.mpc-product-content-card__body:hover::-webkit-scrollbar-thumb,
.mpc-product-content-description--enhanced
.mpc-product-content-card__body:focus::-webkit-scrollbar-thumb,
.mpc-product-content-description--enhanced
.mpc-product-content-card__body:focus-within::-webkit-scrollbar-thumb {
    background: var(
        --mp-scrollbar-thumb-hover-color,
        rgb(199 154 87 / 42%)
    );
}

.mpc-product-content-description--enhanced
.mpc-product-content-card__body::-webkit-scrollbar-thumb:active {
    background: var(
        --mp-scrollbar-thumb-active-color,
        rgb(199 154 87 / 42%)
    );
}

.mpc-product-content-description--enhanced
.mpc-product-content-card__body::-webkit-scrollbar-corner {
    background: transparent;
}

.mpc-product-content-description--enhanced
.mpc-product-content-card__body.is-scrollable:focus-visible {
    border-radius: var(--mp-radius-small, 4px);
    outline: 2px solid var(--mp-color-gold, #c79a57);
    outline-offset: 3px;
}

.mpc-product-content-description--enhanced
.mpc-product-content-card__body > :first-child {
    margin-top: 0;
}

.mpc-product-content-description--enhanced
.mpc-product-content-card__body > :last-child {
    margin-bottom: 0;
}

.mpc-product-content-description--enhanced .mpc-product-content-card__body p,
.mpc-product-content-description--enhanced .mpc-product-content-card__body ul,
.mpc-product-content-description--enhanced .mpc-product-content-card__body ol,
.mpc-product-content-description--enhanced .mpc-product-content-card__body blockquote {
    margin-top: 0;
    margin-bottom: 12px;
}

.mpc-product-content-description--enhanced .mpc-product-content-card__body ul,
.mpc-product-content-description--enhanced .mpc-product-content-card__body ol {
    padding-left: 1.35em;
}

.mpc-product-content-description--enhanced .mpc-product-content-card__body a {
    color: #946328;
    text-decoration-thickness: 1px;
    text-underline-offset: .16em;
}

.mpc-product-content-description--enhanced .mpc-product-content-card__body img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
}

.mpc-product-content-description--enhanced
.mpc-product-content-card__body :is(
    .wp-block-image,
    .wp-block-gallery,
    figure
) {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Server-rendered audio description stays usable without JavaScript. */

.mpc-product-content-audio {
    display: grid;
    grid-template-columns:
        44px
        minmax(150px, .55fr)
        minmax(260px, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(166, 118, 61, 0.18);
    border-radius: 16px;
    background: #fff;
    color: #705d53;
    font-family: var(
        --mp-font-body,
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif
    );
    box-shadow: 0 6px 18px rgba(91, 64, 51, 0.045);
}

.mpc-product-content-audio__caption {
    display: grid;
    grid-column: 1 / 3;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.mpc-product-content-audio__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border: 1px solid rgba(148, 99, 40, 0.2);
    border-radius: 50%;
    background: #f8ecdc;
    color: #946328;
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.42);
}

.mpc-product-content-audio__icon svg {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.mpc-product-content-audio__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin: 0;
}

.mpc-product-content-audio__eyebrow {
    display: block;
    margin: 0;
    color: #946328;
    font-size: 10px;
    font-weight: var(--mp-font-weight-medium, 500);
    line-height: 1.35;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.mpc-product-content-audio__title {
    display: block;
    min-width: 0;
    margin: 0;
    color: #5b4033;
    font-family: var(
        --mp-font-accent,
        "Source Serif 4",
        Georgia,
        "Times New Roman",
        serif
    );
    font-size: 17px;
    font-style: normal;
    font-weight: var(--mp-font-weight-medium, 500);
    line-height: 1.22;
    overflow-wrap: anywhere;
}

.mpc-product-content-audio__player {
    display: block;
    grid-column: 3;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #f4e9dc;
    color-scheme: light;
    accent-color: #946328;
    box-shadow: none;
}

/* Server-rendered media before enhancement is intentionally visible. */

.mpc-product-content-media-source {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    width: 100%;
    margin: 28px 0;
    padding: 0;
}

.mpc-product-content-description--enhanced .mpc-product-content-media,
.mpc-product-content-media-source .mpc-product-content-media {
    position: relative;
    display: flex;
    align-self: start;
    width: 100%;
    min-height: 0;
    aspect-ratio: 3 / 2;
    padding: 0;
    overflow: hidden;
}

.mpc-product-content-description--enhanced .mpc-product-content-media__image,
.mpc-product-content-media-source .mpc-product-content-media__image,
.mpc-product-content-description--enhanced .mpc-product-content-media__video,
.mpc-product-content-media-source .mpc-product-content-media__video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
    box-shadow: none;
}

.mpc-product-content-description--enhanced .mpc-product-content-media__image,
.mpc-product-content-media-source .mpc-product-content-media__image {
    cursor: default;
    transform: none;
    transition: none;
}

#tab-description img,
.woocommerce-Tabs-panel--description img,
.woocommerce-product-details__description img {
    cursor: default;
}

/* Compatibility with description markup from earlier child-theme builds. */
body.mp-single-product-page
div.product
.mp-product-detail-media__image,
body.mp-single-product-page
div.product
.mp-product-detail-media:hover
.mp-product-detail-media__image {
    transform: none;
    transition: none;
}

.mpc-product-content-description--enhanced .mpc-product-content-media__video,
.mpc-product-content-media-source .mpc-product-content-media__video {
    background: #2f2926;
}

@supports not (aspect-ratio: 3 / 2) {
    .mpc-product-content-description--enhanced .mpc-product-content-card,
    .mpc-product-content-description--enhanced .mpc-product-content-media,
    .mpc-product-content-media-source .mpc-product-content-media {
        height: 238px;
    }
}

.mpc-product-content-description--enhanced .mpc-product-content-media figcaption,
.mpc-product-content-media-source .mpc-product-content-media figcaption {
    position: absolute;
    right: 12px;
    bottom: 10px;
    left: 12px;
    z-index: 1;
    margin: 0;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(255, 250, 245, 0.9);
    color: #5b4033;
    font-family: var(
        --mp-font-body,
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif
    );
    font-size: 12px;
    line-height: 1.4;
    backdrop-filter: blur(4px);
}

@container mpc-product-content-description (min-width: 1080px) {

    .mpc-product-content-description--enhanced .mpc-product-content-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas: "text text media";
        height: min(320px, calc(22.222222cqw - 7.111111px));
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row--media-left {
        grid-template-areas: "media text text";
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row.is-text-only {
        grid-template-areas: "text text text";
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row.is-media-only {
        grid-template-areas: ". . media";
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row.is-media-only.mpc-product-content-row--media-left {
        grid-template-areas: "media . .";
    }
}

@container mpc-product-content-description (max-width: 600px) {

    .mpc-product-content-description--enhanced .mpc-product-content-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "text"
            "media";
        gap: 12px;
        height: auto;
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row--media-left {
        grid-template-areas:
            "text"
            "media";
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row.is-text-only {
        grid-template-areas: "text";
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row.is-media-only,
    .mpc-product-content-description--enhanced
    .mpc-product-content-row.is-media-only.mpc-product-content-row--media-left {
        grid-template-areas: "media";
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row > .mpc-product-content-card {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row > .mpc-product-content-media {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-card__body {
        flex: 0 0 auto;
        padding-right: 0;
        overflow: visible;
        scrollbar-gutter: auto;
        -webkit-overflow-scrolling: auto;
    }

}

@media (max-width: 640px) {

    .mpc-product-content-description--enhanced {
        padding: 10px;
        border-radius: 17px;
    }

    .mpc-product-content-description--enhanced .mpc-product-content-grid,
    .mpc-product-content-description--enhanced .mpc-product-content-row,
    .mpc-product-content-media-source {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row,
    .mpc-product-content-description--enhanced
    .mpc-product-content-row--media-left {
        grid-template-areas:
            "text"
            "media";
        height: auto;
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row.is-text-only {
        grid-template-areas: "text";
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row.is-media-only,
    .mpc-product-content-description--enhanced
    .mpc-product-content-row.is-media-only.mpc-product-content-row--media-left {
        grid-template-areas: "media";
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row > .mpc-product-content-card {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row > .mpc-product-content-media {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .mpc-product-content-description--enhanced .mpc-product-content-card {
        padding: 21px 20px 20px;
    }

    .mpc-product-content-description--enhanced .mpc-product-content-card__heading {
        margin-bottom: 10px;
        font-size: 23px;
        scroll-margin-top:
            calc(
                var(--mp-site-header-clearance-mobile, 86px)
                + 12px
            );
    }

    .mpc-product-content-description--enhanced .mpc-product-content-card__body {
        flex: 0 0 auto;
        padding-right: 0;
        font-size: 14px;
        line-height: 1.68;
        overflow: visible;
        scrollbar-gutter: auto;
        -webkit-overflow-scrolling: auto;
    }

    .mpc-product-content-audio {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
        border-radius: 14px;
    }

    .mpc-product-content-audio__caption {
        grid-column: 1 / -1;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
    }

    .mpc-product-content-audio__icon {
        width: 42px;
        height: 42px;
    }

    .mpc-product-content-audio__title {
        font-size: 16px;
    }

    .mpc-product-content-audio__player {
        grid-column: 1 / -1;
        height: 42px;
    }

}

@media (min-width: 1440px) {

    /* Fallback for browsers without container-query support. */
    @supports not (container-type: inline-size) {
        .mpc-product-content-description--enhanced .mpc-product-content-row {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-template-areas: "text text media";
            height: 280px;
        }

        .mpc-product-content-description--enhanced
        .mpc-product-content-row--media-left {
            grid-template-areas: "media text text";
        }

        .mpc-product-content-description--enhanced
        .mpc-product-content-row.is-media-only {
            grid-template-areas: ". . media";
        }

        .mpc-product-content-description--enhanced
        .mpc-product-content-row.is-media-only.mpc-product-content-row--media-left {
            grid-template-areas: "media . .";
        }
    }
}

@media (min-width: 1080px) {

    /* Keep the no-JavaScript media fallback consistent with the final grid. */
    .mpc-product-content-media-source {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/*
 * A row without media follows its text instead of reserving the height of a
 * 3:2 media card. Sixteen-pixel vertical card padding plus the grid gap keeps
 * consecutive text-only sections separated by a calm 48px rhythm.
 */
@media (min-width: 641px) {

    .mpc-product-content-description--enhanced
    .mpc-product-content-row.is-text-only {
        height: auto;
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row.is-text-only
    > .mpc-product-content-card {
        align-self: start;
        height: auto;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-row.is-text-only
    .mpc-product-content-card__body {
        flex: 0 0 auto;
        padding-right: 0;
        overflow: visible;
        scrollbar-gutter: auto;
        -webkit-overflow-scrolling: auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    .mpc-product-content-description--enhanced .mpc-product-content-card {
        transition: none;
    }

    .mpc-product-content-description--enhanced .mpc-product-content-card.is-targeted {
        transform: none;
    }
}

@media (forced-colors: active) {

    .mpc-product-content-description--enhanced .mpc-product-content-card,
    .mpc-product-content-description--enhanced .mpc-product-content-media,
    .mpc-product-content-media-source .mpc-product-content-media,
    .mpc-product-content-audio,
    .mpc-product-content-audio__icon {
        border-color: CanvasText;
    }

    .mpc-product-content-audio,
    .mpc-product-content-audio__icon,
    .mpc-product-content-audio__player {
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-card__body {
        scrollbar-color: auto;
    }

    .mpc-product-content-description--enhanced
    .mpc-product-content-card__body.is-scrollable:focus-visible {
        outline-color: Highlight;
    }

    .mpc-product-content-description--enhanced .mpc-product-content-card.is-targeted {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }
}
