/* LuxaLife Flex Showcase: all selectors scoped to the composer.
 * Styles load in the Gutenberg iframe and on the frontend from block.json.
 * Native core content honors explicit Gutenberg inline formatting.
 */
.luxa-flex-showcase {
    --luxa-flex-text: var(--luxa-block-ink, #26211d);
    --luxa-flex-muted: var(--luxa-block-muted, #645951);
    overflow: clip;
}
.luxa-flex-showcase .luxa-block__container {
    container-type: inline-size;
}
.luxa-flex-showcase .luxa-flex__columns {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: var(--luxa-flex-cols-gap, 28px);
    min-width: 0;
    width: 100%;
}
.luxa-flex-showcase.luxa-flex--align-start .luxa-flex__columns { align-items: flex-start; }
.luxa-flex-showcase.luxa-flex--align-end .luxa-flex__columns { align-items: flex-end; }
.luxa-flex-showcase.luxa-flex--align-stretch .luxa-flex__columns { align-items: stretch; }
.luxa-flex-showcase .luxa-flex__column {
    display: flex;
    flex: var(--luxa-flex-weight, 2) 1 0%;
    flex-direction: column;
    justify-content: center;
    gap: var(--luxa-flex-gap, 18px);
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: var(--luxa-flex-pad, 0px);
    border: 1px solid transparent;
    border-radius: var(--luxa-flex-radius, 16px);
    box-sizing: border-box;
}
.luxa-flex-showcase .luxa-flex__column--align-start { justify-content: flex-start; }
.luxa-flex-showcase .luxa-flex__column--align-end { justify-content: flex-end; }
.luxa-flex-showcase .luxa-flex__column--align-stretch { justify-content: stretch; }
.luxa-flex-showcase .luxa-flex__column--soft {
    background: #f5efe6;
}
.luxa-flex-showcase.luxa-block--warm .luxa-flex__column--soft {
    background: #ebe2d5;
}
.luxa-flex-showcase.luxa-block--dark .luxa-flex__column--soft {
    background: #332a23;
}
.luxa-flex-showcase .luxa-flex__column--outlined {
    border-color: rgb(155 126 86 / .32);
}
.luxa-flex-showcase .luxa-flex__column > :where(*) { min-width: 0; margin-block: 0; }

/* Core Gutenberg elements: use shared type tokens, preserving block-level
 * style overrides from core typography controls (inline styles win). */
.luxa-flex-showcase :where(h1.wp-block-heading, h2.wp-block-heading),
.luxa-flex-showcase .luxa-flex__column > :where(h1, h2) {
    font-family: var(--luxa-type-override-heading-font, var(--luxa-type-h2-font, var(--luxa-font-heading, Georgia, serif)));
    font-size: var(--luxa-type-override-heading-size-desktop, var(--luxa-type-h2-size-desktop, clamp(30px, 3.5vw, 56px)));
    font-weight: var(--luxa-type-override-heading-weight, var(--luxa-type-h2-weight, 700));
    line-height: var(--luxa-type-override-heading-line-height, var(--luxa-type-h2-line-height, 1.12));
    letter-spacing: var(--luxa-type-override-heading-tracking, var(--luxa-type-h2-tracking, -.03em));
    color: var(--luxa-type-override-heading-color, var(--luxa-type-h2-color, var(--luxa-flex-text)));
    overflow-wrap: anywhere;
}
.luxa-flex-showcase :where(h3.wp-block-heading),
.luxa-flex-showcase .luxa-flex__column > h3 {
    font-family: var(--luxa-type-override-card-font, var(--luxa-type-h3-font, var(--luxa-font-heading, Georgia, serif)));
    font-size: var(--luxa-type-override-card-size-desktop, var(--luxa-type-h3-size-desktop, 24px));
    font-weight: var(--luxa-type-override-card-weight, var(--luxa-type-h3-weight, 650));
    line-height: var(--luxa-type-override-card-line-height, var(--luxa-type-h3-line-height, 1.25));
    color: var(--luxa-type-override-card-color, var(--luxa-type-h3-color, var(--luxa-flex-text)));
    overflow-wrap: anywhere;
}
.luxa-flex-showcase .luxa-flex__column > p {
    font-family: var(--luxa-type-override-body-font, var(--luxa-type-body-font, var(--luxa-font-body, system-ui, sans-serif)));
    font-size: var(--luxa-type-override-body-size-desktop, var(--luxa-type-body-size-desktop, 16px));
    font-weight: var(--luxa-type-override-body-weight, var(--luxa-type-body-weight, 400));
    line-height: var(--luxa-type-override-body-line-height, var(--luxa-type-body-line-height, 1.65));
    letter-spacing: var(--luxa-type-override-body-tracking, var(--luxa-type-body-tracking, normal));
    color: var(--luxa-type-override-body-color, var(--luxa-type-body-color, var(--luxa-flex-muted)));
    overflow-wrap: anywhere;
}
.luxa-flex-showcase .luxa-flex__column > :where(ul, ol) {
    padding-inline-start: 1.4em;
    color: var(--luxa-flex-text);
}
.luxa-flex-showcase .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.luxa-flex-showcase .wp-block-button__link {
    font-family: var(--luxa-type-override-button-font, var(--luxa-type-button-font, var(--luxa-font-body, system-ui, sans-serif)));
    font-size: var(--luxa-type-override-button-size-desktop, var(--luxa-type-button-size-desktop, 14px));
    font-weight: var(--luxa-type-override-button-weight, var(--luxa-type-button-weight, 700));
    line-height: var(--luxa-type-override-button-line-height, var(--luxa-type-button-line-height, 1.4));
    letter-spacing: var(--luxa-type-override-button-tracking, var(--luxa-type-button-tracking, normal));
}
.luxa-flex-showcase .wp-block-button__link:focus-visible,
.luxa-flex-showcase .luxa-flex-offer__button:focus-visible {
    outline: 3px solid #b9904e;
    outline-offset: 4px;
}

/* Media: contain/cover, local image or video, and optional anchored offer. */
.luxa-flex-showcase .luxa-flex-media {
    position: relative;
    isolation: isolate;
    min-width: 0;
    width: 100%;
    margin: 0;
}
.luxa-flex-showcase .luxa-flex-media__visual {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--luxa-flex-media-radius, 16px);
    background: #ede7dc;
}
.luxa-flex-showcase .luxa-flex-media--ratio-16-9 .luxa-flex-media__visual { aspect-ratio: 16 / 9; }
.luxa-flex-showcase .luxa-flex-media--ratio-1-1 .luxa-flex-media__visual { aspect-ratio: 1 / 1; }
.luxa-flex-showcase .luxa-flex-media--ratio-3-4 .luxa-flex-media__visual { aspect-ratio: 3 / 4; }
.luxa-flex-showcase .luxa-flex-media__picture,
.luxa-flex-showcase .luxa-flex-media__image,
.luxa-flex-showcase .luxa-flex-media__video {
    display: block;
    width: 100%;
    height: 100%;
}
.luxa-flex-showcase .luxa-flex-media__image,
.luxa-flex-showcase .luxa-flex-media__video {
    object-fit: contain;
}
.luxa-flex-showcase .luxa-flex-media--fit-cover :where(.luxa-flex-media__image, .luxa-flex-media__video) {
    object-fit: cover;
}
.luxa-flex-showcase .luxa-flex-media__video { background: #221c17; }
.luxa-flex-showcase .luxa-flex-media__overlay {
    position: absolute;
    z-index: 2;
    bottom: 16px;
    left: 16px;
    width: min(85%, 250px);
}
.luxa-flex-showcase .luxa-flex-media--offer-bottom-right .luxa-flex-media__overlay {
    left: auto;
    right: 16px;
}
.luxa-flex-showcase .luxa-flex-media--offer-top-left .luxa-flex-media__overlay {
    bottom: auto;
    top: 16px;
}
.luxa-flex-showcase .luxa-flex-media--offer-top-right .luxa-flex-media__overlay {
    bottom: auto;
    left: auto;
    top: 16px;
    right: 16px;
}
.luxa-flex-showcase .luxa-flex-media__caption {
    margin: 10px 2px 0;
    color: var(--luxa-flex-muted);
    font: 400 13px/1.5 var(--luxa-font-body, system-ui, sans-serif);
    overflow-wrap: anywhere;
}

/* Reorderable USP cards. */
.luxa-flex-showcase .luxa-flex-usp {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 14px;
    padding: 18px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: #f4eee5;
    color: var(--luxa-flex-text);
}
.luxa-flex-showcase.luxa-block--warm .luxa-flex-usp--soft { background: #eae0d2; }
.luxa-flex-showcase.luxa-block--dark .luxa-flex-usp--soft { background: #332a23; }
.luxa-flex-showcase .luxa-flex-usp--outlined {
    border-color: rgb(155 126 86 / .32);
    background: transparent;
}
.luxa-flex-showcase .luxa-flex-usp--minimal { padding: 7px 0; background: transparent; }
.luxa-flex-showcase .luxa-flex-usp__icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 1px solid rgb(161 119 61 / .35);
    border-radius: 12px;
    background: rgb(214 182 111 / .14);
    color: #8e682c;
    font: 650 21px/1 Georgia, serif;
}
.luxa-flex-showcase.luxa-block--dark .luxa-flex-usp__icon { color: #e2c27d; }
.luxa-flex-showcase .luxa-flex-usp__content { min-width: 0; flex: 1; }
.luxa-flex-showcase :where(.luxa-flex-usp__eyebrow, .luxa-flex-offer__label) {
    display: block;
    margin: 0 0 8px;
    color: var(--luxa-type-override-label-color, var(--luxa-type-label-color, #946d32));
    font-family: var(--luxa-type-override-label-font, var(--luxa-type-label-font, var(--luxa-font-body, system-ui, sans-serif)));
    font-size: var(--luxa-type-override-label-size-desktop, var(--luxa-type-label-size-desktop, 12px));
    font-weight: var(--luxa-type-override-label-weight, var(--luxa-type-label-weight, 750));
    line-height: var(--luxa-type-override-label-line-height, var(--luxa-type-label-line-height, 1.4));
    letter-spacing: var(--luxa-type-override-label-tracking, var(--luxa-type-label-tracking, .1em));
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.luxa-flex-showcase :where(.luxa-flex-usp__title, .luxa-flex-offer__title) {
    margin: 0;
    color: var(--luxa-type-override-card-color, var(--luxa-type-h3-color, var(--luxa-flex-text)));
    font-family: var(--luxa-type-override-card-font, var(--luxa-type-h3-font, var(--luxa-font-heading, Georgia, serif)));
    font-size: var(--luxa-type-override-card-size-desktop, var(--luxa-type-h3-size-desktop, 22px));
    font-weight: var(--luxa-type-override-card-weight, var(--luxa-type-h3-weight, 650));
    line-height: var(--luxa-type-override-card-line-height, var(--luxa-type-h3-line-height, 1.25));
    letter-spacing: var(--luxa-type-override-card-tracking, var(--luxa-type-h3-tracking, -.02em));
    overflow-wrap: anywhere;
}
.luxa-flex-showcase :where(.luxa-flex-usp__body, .luxa-flex-offer__body) {
    margin: 9px 0 0;
    color: var(--luxa-type-override-body-color, var(--luxa-type-body-color, var(--luxa-flex-muted)));
    font-family: var(--luxa-type-override-body-font, var(--luxa-type-body-font, var(--luxa-font-body, system-ui, sans-serif)));
    font-size: var(--luxa-type-override-body-size-desktop, var(--luxa-type-body-size-desktop, 15px));
    font-weight: var(--luxa-type-override-body-weight, var(--luxa-type-body-weight, 400));
    line-height: var(--luxa-type-override-body-line-height, var(--luxa-type-body-line-height, 1.6));
    letter-spacing: var(--luxa-type-override-body-tracking, var(--luxa-type-body-tracking, normal));
    overflow-wrap: anywhere;
}

/* Promotion card is valid both inside a column and over the image.
 * No price or discount is invented by the renderer. */
.luxa-flex-showcase .luxa-flex-offer {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 7px;
    padding: clamp(17px, 2vw, 26px);
    border: 1px solid rgb(165 126 71 / .21);
    border-radius: 16px;
    background: #fffdf9;
    color: #261f19;
    box-shadow: 0 14px 36px rgb(40 27 14 / .12);
}
.luxa-flex-showcase .luxa-flex-offer--dark {
    background: #29221d;
    border-color: rgb(226 194 125 / .28);
    color: #f8f3eb;
}
.luxa-flex-showcase .luxa-flex-offer--dark .luxa-flex-offer__title { color: #f8f3eb; }
.luxa-flex-showcase .luxa-flex-offer--dark .luxa-flex-offer__body { color: #e3d7c8; }
.luxa-flex-showcase .luxa-flex-offer__prices {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 12px;
    margin-top: 6px;
}
.luxa-flex-showcase .luxa-flex-offer__price {
    color: #2e241a;
    font: 750 clamp(18px, 2vw, 27px)/1.25 var(--luxa-font-body, system-ui, sans-serif);
}
.luxa-flex-showcase .luxa-flex-offer--dark .luxa-flex-offer__price { color: #f4e1ba; }
.luxa-flex-showcase .luxa-flex-offer__was {
    color: #8a7c6a;
    font-size: 13px;
}
.luxa-flex-showcase .luxa-flex-offer__button {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: 8px;
    color: var(--luxa-type-override-button-color, var(--luxa-type-button-color, #91682e));
    font-family: var(--luxa-type-override-button-font, var(--luxa-type-button-font, var(--luxa-font-body, system-ui, sans-serif)));
    font-size: var(--luxa-type-override-button-size-desktop, var(--luxa-type-button-size-desktop, 14px));
    font-weight: var(--luxa-type-override-button-weight, var(--luxa-type-button-weight, 750));
    line-height: var(--luxa-type-override-button-line-height, var(--luxa-type-button-line-height, 1.4));
    letter-spacing: var(--luxa-type-override-button-tracking, var(--luxa-type-button-tracking, normal));
    text-decoration: none;
}
.luxa-flex-showcase .luxa-flex-offer--dark .luxa-flex-offer__button { color: #e9c989; }
.luxa-flex-showcase .luxa-flex-offer__button:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Gutenberg authoring affordances that never appear on the storefront. */
.luxa-flex-showcase.luxa-flex-editor .luxa-flex__columns { min-height: 120px; }
.luxa-flex-showcase.luxa-flex-editor .luxa-flex__column {
    outline: 1px dashed rgb(155 126 86 / .24);
    outline-offset: -1px;
    min-height: 150px;
}
.luxa-flex-showcase.luxa-flex-editor .luxa-flex-media__placeholder {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 24px;
    border: 1px dashed #bfae92;
    border-radius: 14px;
    color: #736250;
    background: #f1ebdf;
    text-align: center;
    font-size: 13px;
}
.luxa-flex-showcase.luxa-flex-editor .luxa-flex__preset-panel {
    width: 100%;
    padding: 26px;
    border: 1px dashed #bfae92;
    border-radius: 16px;
    background: #faf6ee;
    text-align: center;
    color: #2b241e;
}
.luxa-flex-showcase.luxa-flex-editor .luxa-flex__preset-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}
.luxa-flex-showcase.luxa-flex-editor .luxa-flex__column > .block-editor-inner-blocks,
.luxa-flex-showcase.luxa-flex-editor .luxa-flex__column > .block-editor-block-list__layout {
    min-width: 0;
    width: 100%;
}
.luxa-flex-showcase.luxa-flex-editor .luxa-flex__column .block-editor-block-list__layout {
    display: flex;
    flex-direction: column;
    gap: var(--luxa-flex-gap, 18px);
}
.luxa-flex-showcase.luxa-flex-editor .luxa-flex__column .block-editor-block-list__layout > * {
    margin-block: 0;
}
/* Editor responsive canvas: WordPress sidebars may shrink the block despite a
 * wide browser viewport, so container queries handle layout as well. */
@container (max-width: 820px) {
    .luxa-flex-showcase .luxa-flex__columns {
        flex-direction: column;
        align-items: stretch;
        gap: clamp(22px, 5cqw, var(--luxa-flex-cols-gap, 28px));
    }
    .luxa-flex-showcase .luxa-flex__column { flex: 0 0 auto; width: 100%; }
}
@media (max-width: 780px) {
    .luxa-flex-showcase .luxa-flex__columns {
        flex-direction: column;
        align-items: stretch;
        gap: clamp(22px, 5vw, var(--luxa-flex-cols-gap, 28px));
    }
    .luxa-flex-showcase .luxa-flex__column {
        flex: 0 0 auto;
        order: var(--luxa-flex-mobile-order, 1);
        width: 100%;
    }
    .luxa-flex-showcase .luxa-flex-media__overlay {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        max-width: 100%;
        margin: -24px 14px 0;
    }
    .luxa-flex-showcase .luxa-flex-media__overlay .luxa-flex-offer {
        position: relative;
        padding: 20px;
    }
    .luxa-flex-showcase .luxa-flex__column > p,
    .luxa-flex-showcase :where(.luxa-flex-usp__body, .luxa-flex-offer__body) {
        font-size: var(--luxa-type-override-body-size-mobile, var(--luxa-type-body-size-mobile, var(--luxa-type-override-body-size-desktop, var(--luxa-type-body-size-desktop, 15px))));
    }
    .luxa-flex-showcase :where(h1.wp-block-heading, h2.wp-block-heading),
    .luxa-flex-showcase .luxa-flex__column > :where(h1, h2) {
        font-size: var(--luxa-type-override-heading-size-mobile, var(--luxa-type-h2-size-mobile, var(--luxa-type-override-heading-size-desktop, var(--luxa-type-h2-size-desktop, 33px))));
    }
    .luxa-flex-showcase :where(h3.wp-block-heading, .luxa-flex-usp__title, .luxa-flex-offer__title) {
        font-size: var(--luxa-type-override-card-size-mobile, var(--luxa-type-h3-size-mobile, var(--luxa-type-override-card-size-desktop, var(--luxa-type-h3-size-desktop, 21px))));
    }
    .luxa-flex-showcase :where(.luxa-flex-usp__eyebrow, .luxa-flex-offer__label) {
        font-size: var(--luxa-type-override-label-size-mobile, var(--luxa-type-label-size-mobile, var(--luxa-type-override-label-size-desktop, var(--luxa-type-label-size-desktop, 12px))));
    }
    .luxa-flex-showcase :where(.luxa-flex-offer__button, .wp-block-button__link) {
        font-size: var(--luxa-type-override-button-size-mobile, var(--luxa-type-button-size-mobile, var(--luxa-type-override-button-size-desktop, var(--luxa-type-button-size-desktop, 14px))));
    }
}
@media (prefers-reduced-motion: reduce) {
    .luxa-flex-showcase * { scroll-behavior: auto; transition: none; }
}