/* MBH SOT Revision: components_11.css
 * Live Path: /admin/modules/site_designer/assets/css/components.css
 * Shared smart bakery components. Used by both builder canvas and preview.
 */

.builder-element--category_cards,
.builder-element--product_grid,
.builder-element--product_scroller,
.builder-element--blog_articles {
    min-width: 180px;
    min-height: 120px;
    padding: 0;
    overflow: visible;
    border-color: transparent;
    background: transparent;
}

.smart-component {
    position: absolute;
    inset: 0;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    --smart-grid-shadow-bleed: 24px;
    color: #202833;
    font-family: inherit;
}

.smart-component__viewport,
.smart-scroller__viewport {
    position: absolute;
    inset: 0;
    min-width: 0;
    min-height: 0;
}

/* Normal Category Cards and Product Grids must not become nested scroll
   containers. The viewport is expanded past the component bounds so shadows
   still have room to paint, then clipped at that bleed edge without consuming
   wheel or middle-button page scrolling. */
.smart-component__viewport {
    inset: calc(var(--smart-grid-shadow-bleed) * -1);
    overflow: clip;
    padding: var(--smart-grid-shadow-bleed);
}

/* Product Scroller intentionally owns scrolling in manual/static modes. */
.smart-scroller__viewport {
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

.smart-component__items {
    width: 100%;
    min-height: 0;
    gap: var(--smart-gap, 16px);
    padding: 2px;
}

.smart-component.is-orientation-horizontal .smart-component__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--smart-scaled-card-width, 190px));
    grid-auto-rows: max-content;
    justify-content: start;
    align-content: start;
    align-items: stretch;
}

.smart-component.is-orientation-horizontal .smart-component__items .smart-card {
    width: var(--smart-scaled-card-width, var(--smart-card-width, 190px));
    max-width: var(--smart-card-width, 190px);
    height: var(--smart-uniform-card-height, auto);
}

.smart-component.is-orientation-horizontal .smart-component__items.has-fixed-line-count {
    width: 100%;
    grid-template-columns: repeat(var(--smart-fixed-line-count, 1), var(--smart-scaled-card-width, 190px));
}

.smart-component.is-orientation-vertical .smart-component__items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.smart-component.is-orientation-vertical .smart-component__items.has-fixed-line-count {
    display: grid;
    grid-template-rows: repeat(var(--smart-fixed-line-count, 1), max-content);
    grid-auto-flow: column;
    grid-auto-columns: var(--smart-scaled-card-width, 190px);
    justify-content: start;
    align-content: start;
    align-items: stretch;
}

.smart-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--smart-border-width, 1px) solid var(--smart-border-color, #d7dde5);
    border-radius: var(--smart-radius, 10px);
    background: var(--smart-card-background, #fff);
    box-shadow: var(--smart-card-shadow, 0 7px 20px rgba(24, 32, 42, 0.10));
    color: inherit;
    text-decoration: none;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.smart-component.is-orientation-vertical .smart-component__items .smart-card {
    width: min(100%, var(--smart-scaled-card-width, var(--smart-card-width, 190px)));
    max-width: var(--smart-card-width, 190px);
    height: var(--smart-uniform-card-height, auto);
}

.smart-card__image {
    width: 100%;
    height: var(--smart-image-height, 150px);
    display: block;
    flex: 0 0 auto;
    object-fit: var(--smart-image-fit, cover);
    background: #f2f4f7;
}

.smart-card__body {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--smart-body-gap, 7px);
    padding: var(--smart-body-padding, 12px);
    background: var(--smart-body-background, #fff);
    transition: background-color 150ms ease;
}


/* Fixed card height is an intentional design override. The card itself remains
   exact while body overflow is clipped, so longer descriptions cannot force a
   single card or the whole component taller than the baker-selected height. */
.smart-component[data-card-height-mode="fixed"] .smart-card__body {
    min-height: 0;
    overflow: hidden;
}

.smart-component[data-card-height-mode="fixed"] .smart-card__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.smart-component[data-card-height-mode="fixed"] .smart-card__description {
    min-height: 0;
    flex: 0 1 auto;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--smart-description-lines, 3);
}

.smart-card__title {
    overflow-wrap: anywhere;
    color: var(--smart-title-color, #202833);
    font-family: var(--smart-title-font-family, inherit);
    font-size: var(--smart-title-size, 16px);
    font-style: var(--smart-title-font-style, normal);
    font-weight: var(--smart-title-font-weight, 800);
    line-height: var(--smart-title-line-height, 1.16);
    transition: color 150ms ease;
}

/* Product cards reserve exactly two title lines so descriptions start on the
   same baseline even when a product name only needs one line. */
.smart-card--product .smart-card__title {
    min-height: var(--smart-title-two-line-height, 37.12px);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.smart-card__description {
    display: block;
    overflow: visible;
    color: var(--smart-description-color, #66717e);
    font-family: var(--smart-description-font-family, inherit);
    font-size: var(--smart-description-size, 12px);
    font-style: var(--smart-description-font-style, normal);
    font-weight: var(--smart-description-font-weight, 400);
    line-height: var(--smart-description-line-height, 1.4);
    transition: color 150ms ease;
}

.smart-card__meta {
    min-width: 0;
    min-height: 1.35em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: max(4px, var(--smart-body-gap, 7px));
    margin-top: auto;
}

.smart-card__price {
    min-width: 0;
    color: var(--smart-price-color, #202833);
    font-family: var(--smart-price-font-family, inherit);
    font-size: var(--smart-price-size, 13px);
    font-style: var(--smart-price-font-style, normal);
    font-weight: var(--smart-price-font-weight, 800);
    line-height: 1.2;
}

.smart-card__action {
    margin-top: auto;
    color: var(--smart-title-color, #202833);
    font-family: var(--smart-action-font-family, inherit);
    font-size: var(--smart-action-size, 11px);
    font-style: var(--smart-action-font-style, normal);
    font-weight: var(--smart-action-font-weight, 800);
}

.smart-card__status {
    flex: 0 0 auto;
    padding: var(--smart-status-pad-y, 3px) var(--smart-status-pad-x, 6px);
    border-radius: 999px;
    background: #f4e8e8;
    color: #923939;
    font-size: var(--smart-status-size, 9px);
    font-weight: 850;
    line-height: 1.1;
    text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
    .smart-card:hover {
        border-color: var(--smart-hover-border-color, #aeb8c4);
        box-shadow: var(--smart-hover-shadow, 0 12px 30px rgba(24, 32, 42, 0.20));
        transform: scale(var(--smart-hover-scale, 1));
    }

    .smart-card:hover .smart-card__body {
        background: var(--smart-hover-background, #fff);
    }

    .smart-card:hover .smart-card__title,
    .smart-card:hover .smart-card__action {
        color: var(--smart-hover-title-color, #202833);
    }

    .smart-card:hover .smart-card__description {
        color: var(--smart-hover-description-color, var(--smart-description-color, #66717e));
    }
}

.smart-component__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    border: 1px dashed #cbd3dd;
    border-radius: 8px;
    background: rgba(248, 250, 252, 0.82);
    color: #73808d;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* Product scroller. It still needs a clipping viewport so off-screen products
   stay hidden, but an internal bleed area gives card shadows room to render. */
.smart-component--product-scroller {
    --smart-shadow-bleed: 22px;
    background: transparent;
}

.smart-scroller__viewport {
    overflow: hidden;
    padding: var(--smart-shadow-bleed);
    background: transparent;
}

.smart-scroller__track,
.smart-scroller__segment {
    background: transparent;
}

.smart-component.is-scroller-auto .smart-scroller__track {
    top: var(--smart-shadow-bleed);
    left: var(--smart-shadow-bleed);
}

.smart-component.is-scroller-auto.is-orientation-horizontal .smart-scroller__track,
.smart-component.is-scroller-auto.is-orientation-horizontal .smart-scroller__segment {
    align-items: flex-start;
}

.smart-component.is-scroller-auto.is-orientation-vertical .smart-scroller__track,
.smart-component.is-scroller-auto.is-orientation-vertical .smart-scroller__segment {
    width: calc(100% - (var(--smart-shadow-bleed) * 2));
    align-items: stretch;
}

.smart-component.is-scroller-manual .smart-scroller__viewport,
.smart-component.is-scroller-static .smart-scroller__viewport {
    overflow: auto;
}

.smart-component.is-scroller-manual .smart-scroller__viewport {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.smart-component.is-scroller-manual .smart-scroller__viewport::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* The builder canvas disables touch gestures on movable elements. Preview
   restores touch panning for product scrollers so manual mode can be swiped
   without exposing a native scrollbar. */
.storefront-preview-page .builder-element--product_scroller {
    touch-action: pan-x pan-y;
}

.smart-scroller__track {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    gap: var(--smart-gap, 16px);
    animation-duration: var(--smart-scroll-duration, 14s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.smart-scroller__segment {
    display: flex;
    flex: 0 0 auto;
    gap: var(--smart-gap, 16px);
}

.smart-component.is-orientation-horizontal .smart-scroller__track,
.smart-component.is-orientation-horizontal .smart-scroller__segment {
    flex-direction: row;
    align-items: flex-start;
}

.smart-component.is-orientation-horizontal .smart-scroller__segment .smart-card {
    width: var(--smart-scaled-card-width, var(--smart-card-width, 190px));
    height: var(--smart-uniform-card-height, auto);
    flex: 0 0 var(--smart-scaled-card-width, var(--smart-card-width, 190px));
}

.smart-component.is-orientation-vertical .smart-scroller__track,
.smart-component.is-orientation-vertical .smart-scroller__segment {
    width: 100%;
    flex-direction: column;
}

.smart-component.is-orientation-vertical .smart-scroller__segment .smart-card {
    width: 100%;
    height: var(--smart-uniform-card-height, auto);
    flex: 0 0 auto;
}

.smart-component.is-scroller-auto.is-orientation-horizontal .smart-scroller__track {
    animation-name: smart-scroll-x-forward;
}

.smart-component.is-scroller-auto.is-orientation-horizontal.is-flow-reverse .smart-scroller__track {
    animation-name: smart-scroll-x-reverse;
}

.smart-component.is-scroller-auto.is-orientation-vertical .smart-scroller__track {
    animation-name: smart-scroll-y-forward;
}

.smart-component.is-scroller-auto.is-orientation-vertical.is-flow-reverse .smart-scroller__track {
    animation-name: smart-scroll-y-reverse;
}

.smart-component.is-scroller-manual .smart-scroller__track,
.smart-component.is-scroller-static .smart-scroller__track {
    position: relative;
    animation: none;
}

.smart-component.is-scroller-manual.is-orientation-horizontal .smart-scroller__track,
.smart-component.is-scroller-static.is-orientation-horizontal .smart-scroller__track {
    width: max-content;
}

.smart-component.is-scroller-manual.is-orientation-vertical .smart-scroller__track,
.smart-component.is-scroller-static.is-orientation-vertical .smart-scroller__track {
    width: 100%;
}

.smart-scroller__control {
    position: absolute;
    z-index: 4;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(112, 124, 138, 0.45);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 4px 12px rgba(24, 32, 42, 0.13);
    color: #202833;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.smart-component.is-orientation-horizontal .smart-scroller__control {
    top: 50%;
    transform: translateY(-50%);
}

.smart-component.is-orientation-horizontal .smart-scroller__control--previous { left: 7px; }
.smart-component.is-orientation-horizontal .smart-scroller__control--next { right: 7px; }

.smart-component.is-orientation-vertical .smart-scroller__control {
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}

.smart-component.is-orientation-vertical .smart-scroller__control--previous { top: 7px; }
.smart-component.is-orientation-vertical .smart-scroller__control--next { bottom: 7px; }

@keyframes smart-scroll-x-forward {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - var(--smart-half-gap, 8px))); }
}

@keyframes smart-scroll-x-reverse {
    from { transform: translateX(calc(-50% - var(--smart-half-gap, 8px))); }
    to { transform: translateX(0); }
}

@keyframes smart-scroll-y-forward {
    from { transform: translateY(0); }
    to { transform: translateY(calc(-50% - var(--smart-half-gap, 8px))); }
}

@keyframes smart-scroll-y-reverse {
    from { transform: translateY(calc(-50% - var(--smart-half-gap, 8px))); }
    to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .smart-scroller__track {
        animation: none !important;
        transform: none !important;
    }
}

/* Product system-template controls. These are safe visual placeholders in the
   Designer/Preview. The live Product renderer later binds the same roles to
   the existing storefront purchase form and cart logic. */
.builder-element--product_options,
.builder-element--product_quantity {
    min-width: 150px;
    min-height: 80px;
    overflow: hidden;
}

.product-system-options,
.product-system-quantity {
    width: 100%;
    height: 100%;
    min-width: 0;
    color: inherit;
    font-family: inherit;
    pointer-events: none;
}

.product-system-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-system-options__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid currentColor;
    border-bottom-color: color-mix(in srgb, currentColor 18%, transparent);
}

.product-system-options__header > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-system-options__header strong,
.product-system-options__header b {
    font-size: 14px;
}

.product-system-options__header small,
.product-system-option small,
.product-system-quantity small {
    opacity: 0.72;
    font-size: 10px;
}

.product-system-options__list {
    min-height: 0;
    display: grid;
    gap: 7px;
    overflow: hidden;
}

.product-system-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, currentColor 4%, transparent);
}

.product-system-option.is-selected {
    border-color: color-mix(in srgb, currentColor 58%, transparent);
}

.product-system-option__radio {
    position: relative;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 50%;
    opacity: 0.58;
}

.product-system-option.is-selected .product-system-option__radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: currentColor;
}

.product-system-option__details {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.product-system-option__details strong,
.product-system-option__price {
    font-size: 12px;
    font-weight: 800;
}

.product-system-quantity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}

.product-system-quantity > strong {
    font-size: 11px;
}

.product-system-quantity__control {
    width: max-content;
    display: grid;
    grid-template-columns: 32px 44px 32px;
    min-height: 34px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 7px;
}

.product-system-quantity__control button,
.product-system-quantity__control span {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 800;
}

.product-system-quantity__control span {
    border-inline: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    font-size: 12px;
}

.builder-element--product_add_to_cart {
    min-width: 140px;
    min-height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: default;
}

.builder-element--product_add_to_cart .builder-element__content {
    display: grid;
    place-items: center;
    text-align: center;
}

/* Blog Articles is a system-owned repeating collection. The baker controls
   presentation of the repeated article summaries without editing individual
   article records from the Site Designer. */
.blog-articles {
    overflow: visible;
}

.blog-articles__items {
    width: 100%;
    display: grid;
    gap: var(--blog-gap, 16px);
    align-items: stretch;
}

.blog-articles.is-layout-grid .blog-articles__items {
    grid-template-columns: repeat(var(--blog-columns, 2), minmax(0, 1fr));
}

.blog-articles.is-layout-list .blog-articles__items,
.blog-articles.is-layout-compact .blog-articles__items {
    grid-template-columns: minmax(0, 1fr);
}

.blog-article-card {
    min-width: 0;
    display: flex;
    overflow: hidden;
    border: var(--blog-border-width, 1px) solid var(--blog-border-color, #d7dde5);
    border-radius: var(--blog-radius, 10px);
    background: var(--blog-card-background, #fff);
    box-shadow: var(--blog-shadow, 0 7px 20px rgba(24, 32, 42, 0.10));
    color: inherit;
    text-decoration: none;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.blog-articles.is-layout-grid .blog-article-card {
    flex-direction: column;
}

.blog-articles.is-layout-list .blog-article-card,
.blog-articles.is-layout-compact .blog-article-card {
    flex-direction: row;
}

.blog-article-card__image {
    display: block;
    flex: 0 0 auto;
    object-fit: var(--blog-image-fit, cover);
    background: #f2f4f7;
}

.blog-articles.is-layout-grid .blog-article-card__image {
    width: 100%;
    height: var(--blog-image-height, 150px);
}

.blog-articles.is-layout-list .blog-article-card__image {
    width: min(32%, 240px);
    min-width: 120px;
    height: var(--blog-image-height, 150px);
}

.blog-articles.is-layout-compact .blog-article-card__image {
    width: 88px;
    height: 88px;
    margin: 10px 0 10px 10px;
    border-radius: max(0px, calc(var(--blog-radius, 10px) - 3px));
}

.blog-article-card__body {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 7px;
    padding: var(--blog-body-padding, 12px);
    background: var(--blog-body-background, #fff);
    transition: background-color 150ms ease;
}

.blog-articles.is-layout-compact .blog-article-card__body {
    justify-content: center;
    padding-top: var(--blog-body-padding, 12px);
    padding-bottom: var(--blog-body-padding, 12px);
}

.blog-article-card__title {
    overflow-wrap: anywhere;
    color: var(--blog-title-color, #202833);
    font-family: var(--blog-title-font-family, inherit);
    font-size: var(--blog-title-size, 16px);
    font-style: var(--blog-title-font-style, normal);
    font-weight: var(--blog-title-font-weight, 800);
    line-height: var(--blog-title-line-height, 1.16);
    transition: color 150ms ease;
}

.blog-article-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--blog-excerpt-lines, 2);
    color: var(--blog-description-color, #66717e);
    font-family: var(--blog-description-font-family, inherit);
    font-size: var(--blog-description-size, 12px);
    font-style: var(--blog-description-font-style, normal);
    font-weight: var(--blog-description-font-weight, 400);
    line-height: var(--blog-description-line-height, 1.4);
    transition: color 150ms ease;
}

.blog-article-card__meta {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: auto;
    color: var(--blog-meta-color, #202833);
    font-family: var(--blog-meta-font-family, inherit);
    font-style: var(--blog-meta-font-style, normal);
    font-weight: var(--blog-meta-font-weight, 800);
    font-size: 12px;
}

.blog-article-card__date {
    font-weight: 500;
    opacity: .78;
}

.blog-article-card__action {
    margin-left: auto;
}

@media (hover: hover) and (pointer: fine) {
    .blog-article-card:hover {
        border-color: var(--blog-hover-border-color, #9bb9ef);
        box-shadow: var(--blog-hover-shadow, 0 12px 30px rgba(24, 32, 42, 0.20));
        transform: scale(var(--blog-hover-scale, 1));
    }
    .blog-article-card:hover .blog-article-card__body {
        background: var(--blog-hover-background, #f8fafc);
    }
    .blog-article-card:hover .blog-article-card__title {
        color: var(--blog-hover-title-color, #202833);
    }
    .blog-article-card:hover .blog-article-card__excerpt {
        color: var(--blog-hover-description-color, #66717e);
    }
}

@media (max-width: 760px) {
    .blog-articles.is-layout-grid .blog-articles__items {
        grid-template-columns: minmax(0, 1fr);
    }
    .blog-articles.is-layout-list .blog-article-card {
        flex-direction: column;
    }
    .blog-articles.is-layout-list .blog-article-card__image {
        width: 100%;
        min-width: 0;
    }
}


/* Dynamic Blog Article body. The document HTML comes from the existing Blog
   renderer; these rules preserve its structural/media behavior while allowing
   the Designer Paragraph typography to remain the visual source of truth. */
.builder-element--blog_article_body {
    min-width: 280px;
    min-height: 160px;
    padding: 0;
    overflow: visible;
    border-color: transparent;
    background: transparent;
}

.blog-article-rich-content {
    display: flow-root;
    width: 100%;
    min-width: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    overflow-wrap: anywhere;
}

.blog-article-rich-content > :first-child { margin-top: 0; }
.blog-article-rich-content > :last-child { margin-bottom: 0; }
.blog-article-rich-content p { margin: 0 0 1.1em; }
.blog-article-rich-content h1,
.blog-article-rich-content h2,
.blog-article-rich-content h3,
.blog-article-rich-content h4,
.blog-article-rich-content h5,
.blog-article-rich-content h6 {
    clear: both;
    margin: 1.4em 0 0.55em;
    color: inherit;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.2;
}
.blog-article-rich-content h1 { font-size: 2em; }
.blog-article-rich-content h2 { font-size: 1.7em; }
.blog-article-rich-content h3 { font-size: 1.4em; }
.blog-article-rich-content h4 { font-size: 1.18em; }
.blog-article-rich-content h5 { font-size: 1.02em; }
.blog-article-rich-content h6 { font-size: 0.92em; }
.blog-article-rich-content ul,
.blog-article-rich-content ol {
    clear: both;
    margin: 0 0 1.15em;
    padding-left: 1.6em;
}
.blog-article-rich-content li + li { margin-top: 0.35em; }
.blog-article-rich-content li > p { margin: 0; }
.blog-article-rich-content blockquote {
    clear: both;
    margin: 1.35em 0;
    padding: 10px 16px;
    border-left: 4px solid currentColor;
    background: rgba(127, 127, 127, 0.08);
}
.blog-article-rich-content blockquote p:last-child { margin-bottom: 0; }
.blog-article-rich-content hr {
    clear: both;
    margin: 1.8em 0;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.25;
}
.blog-article-rich-content a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.blog-article-rich-content .blog-inline-code {
    border-radius: 4px;
    background: rgba(127, 127, 127, 0.12);
    padding: 0.12em 0.32em;
    font-family: "Courier New", monospace;
    font-size: 0.92em;
}
.blog-article-rich-content .blog-code-block {
    clear: both;
    overflow: auto;
    margin: 1.25em 0;
    padding: 15px 17px;
    border-radius: 9px;
    background: #111827;
    color: #f8fafc;
    line-height: 1.55;
    tab-size: 4;
}
.blog-article-rich-content .blog-code-block code {
    color: inherit;
    font-family: "Courier New", monospace;
    font-size: 0.88em;
    white-space: pre;
}
.blog-article-rich-content .blog-task-list {
    clear: both;
    margin: 0 0 1.15em;
    padding-left: 0;
    list-style: none;
}
.blog-article-rich-content .blog-task-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0.4em;
}
.blog-article-rich-content .blog-task-item__check { flex: 0 0 auto; margin-top: 0.2em; }
.blog-article-rich-content .blog-task-item__content { flex: 1 1 auto; min-width: 0; }
.blog-article-rich-content .blog-task-item__content > :last-child { margin-bottom: 0; }
.blog-article-rich-content .blog-table-scroll {
    clear: both;
    overflow-x: auto;
    margin: 1.35em 0;
    -webkit-overflow-scrolling: touch;
}
.blog-article-rich-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}
.blog-article-rich-content th,
.blog-article-rich-content td {
    padding: 8px 10px;
    border: 1px solid currentColor;
    vertical-align: top;
}
.blog-article-rich-content .blog-article-media {
    display: block;
    width: min(var(--blog-image-width, 40%), 100%);
    max-width: 100%;
    margin-top: 0.25em;
    margin-bottom: 0.85em;
}
.blog-article-rich-content .blog-article-media--left { float: left; clear: left; margin-right: 1.15em; }
.blog-article-rich-content .blog-article-media--right { float: right; clear: right; margin-left: 1.15em; }
.blog-article-rich-content .blog-article-media--center { float: none; clear: both; margin-right: auto; margin-left: auto; }
.blog-article-rich-content .blog-article-media__link { display: block; }
.blog-article-rich-content .blog-article-image,
.blog-article-rich-content .blog-editor-media-image {
    display: block;
    max-width: 100%;
    height: auto;
}
.blog-article-rich-content .blog-article-media .blog-article-image { width: 100%; margin: 0; border-radius: 9px; }
.blog-article-rich-content .blog-article-media__caption {
    display: block;
    margin-top: 6px;
    font-size: 0.82em;
    line-height: 1.45;
    text-align: center;
}
.blog-article-rich-content iframe,
.blog-article-rich-content video,
.blog-article-rich-content audio { max-width: 100%; }
.blog-article-rich-content img.mbh-blog-wrap-left { float: left; margin: 0 18px 12px 0; }
.blog-article-rich-content img.mbh-blog-wrap-right { float: right; margin: 0 0 12px 18px; }
.blog-article-rich-content img.mbh-blog-full-width {
    display: block;
    float: none;
    clear: both;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 700px) {
    .blog-article-rich-content .blog-article-media--left,
    .blog-article-rich-content .blog-article-media--right,
    .blog-article-rich-content .blog-article-media--center {
        float: none;
        width: min(100%, max(var(--blog-image-width, 100%), 65%));
        margin: 1em auto;
    }
    .blog-article-rich-content img.mbh-blog-wrap-left,
    .blog-article-rich-content img.mbh-blog-wrap-right {
        display: block;
        float: none !important;
        max-width: 100%;
        margin: 1em auto !important;
    }
}

.blog-article-rich-content .blog-text-align--left { text-align: left; }
.blog-article-rich-content .blog-text-align--center { text-align: center; }
.blog-article-rich-content .blog-text-align--right { text-align: right; }
.blog-article-rich-content .blog-text-align--justify { text-align: justify; }
.blog-article-rich-content .blog-indent--1 { margin-left: 2em !important; }
.blog-article-rich-content .blog-indent--2 { margin-left: 4em !important; }
.blog-article-rich-content .blog-indent--3 { margin-left: 6em !important; }
.blog-article-rich-content .blog-indent--4 { margin-left: 8em !important; }
.blog-article-rich-content .blog-indent--5 { margin-left: 10em !important; }
.blog-article-rich-content .blog-indent--6 { margin-left: 12em !important; }
.blog-article-rich-content .blog-indent--7 { margin-left: 14em !important; }
.blog-article-rich-content .blog-indent--8 { margin-left: 16em !important; }
.blog-article-rich-content .blog-video-embed { clear: both; margin: 1.35em 0; }
.blog-article-rich-content .blog-video-embed__frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    background: #111827;
}
.blog-article-rich-content .blog-video-embed__frame iframe,
.blog-article-rich-content .blog-video-embed__frame video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
}
.blog-article-rich-content .blog-video-embed__caption {
    display: block;
    margin-top: 7px;
    font-size: 0.84em;
    line-height: 1.45;
    text-align: center;
}
.blog-article-rich-content > .blog-article-image { width: min(var(--blog-image-width, 40%), 100%); height: auto; margin-top: 0.25em; margin-bottom: 0.75em; }
.blog-article-rich-content .blog-article-image--left { float: left; margin-right: 1.15em; }
.blog-article-rich-content .blog-article-image--right { float: right; margin-left: 1.15em; }
.blog-article-rich-content .blog-article-image--center { display: block; float: none; margin-right: auto; margin-left: auto; }
@media (max-width: 700px) {
    .blog-article-rich-content .blog-indent--2,
    .blog-article-rich-content .blog-indent--3,
    .blog-article-rich-content .blog-indent--4,
    .blog-article-rich-content .blog-indent--5,
    .blog-article-rich-content .blog-indent--6,
    .blog-article-rich-content .blog-indent--7,
    .blog-article-rich-content .blog-indent--8 { margin-left: 2em !important; }
    .blog-article-rich-content .blog-article-image--left,
    .blog-article-rich-content .blog-article-image--right { float: none; width: min(100%, max(var(--blog-image-width, 100%), 65%)); margin: 1em auto; }
}

/* Reusable Information Card runtime. The saved card document always uses its
   fixed 190 x 300 design coordinate system, while the host supplies the actual
   placement geometry. The shared renderer scales the complete document into
   that host so Editor, Preview and live use the same saved design. */
.builder-element--info_card {
    min-width: 60px;
    min-height: 80px;
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    background: transparent !important;
}


.builder-element--info_card.is-info-card-placement-link,
.smart-card--info-card.is-info-card-placement-link,
.blog-article-card--info-card.is-info-card-placement-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.builder-element--info_card.is-info-card-placement-link:focus-visible,
.smart-card--info-card.is-info-card-placement-link:focus-visible,
.blog-article-card--info-card.is-info-card-placement-link:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

.info-card-runtime-host,
.info-card-runtime {
    position: absolute;
    inset: 0;
    min-width: 0;
    min-height: 0;
}

.info-card-runtime {
    overflow: hidden;
    border-radius: inherit;
    background-color: #fff;
    background-repeat: no-repeat;
}

.info-card-runtime__canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
}

.info-card-runtime__section {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.info-card-runtime__node {
    position: absolute;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.info-card-runtime__node--heading,
.info-card-runtime__node--paragraph {
    padding: 0;
}

.info-card-runtime__text {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    white-space: pre-wrap;
}

.info-card-runtime__node--button,
.info-card-runtime__node--badge {
    display: grid;
    place-items: center;
}

.info-card-runtime__node--button .info-card-runtime__text,
.info-card-runtime__node--badge .info-card-runtime__text {
    display: grid;
    place-items: center;
}

.info-card-runtime__node--image {
    padding: 0;
}

.info-card-runtime__image {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    user-select: none;
    pointer-events: none;
}

.info-card-runtime__node--divider {
    display: grid;
    place-items: center;
    padding: 0;
}

.info-card-runtime__divider-line {
    display: block;
    box-sizing: border-box;
}

.info-card-runtime__node--divider.is-horizontal .info-card-runtime__divider-line {
    width: 100%;
    height: 0;
    border-top: var(--info-card-divider-thickness, 1px) var(--info-card-divider-style, solid) var(--info-card-divider-color, #cbd3dd);
}

.info-card-runtime__node--divider.is-vertical .info-card-runtime__divider-line {
    width: 0;
    height: 100%;
    border-left: var(--info-card-divider-thickness, 1px) var(--info-card-divider-style, solid) var(--info-card-divider-color, #cbd3dd);
}

.info-card-runtime__node--content_box {
    overflow: hidden;
}

.info-card-runtime__content-box-inner {
    position: absolute;
    overflow: visible;
    border-radius: inherit;
}

.info-card-runtime__missing {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 10px;
    background: #f7f7f7;
    color: #6f7780;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.smart-card--info-card {
    position: relative;
    min-height: var(--smart-info-card-natural-height, 300px);
    padding: 0;
}

.smart-component[data-card-height-mode="fixed"] .smart-card--info-card {
    min-height: 0;
}

.smart-card--info-card .info-card-runtime-host,
.blog-article-card--info-card .info-card-runtime-host {
    overflow: hidden;
    border-radius: inherit;
}

.blog-article-card--info-card {
    position: relative;
    min-height: 300px;
    display: block;
    padding: 0;
}

@media (hover: hover) and (pointer: fine) {
    .info-card-runtime__node--button:hover {
        background: var(--info-card-hover-background) !important;
        color: var(--info-card-hover-color) !important;
        border-color: var(--info-card-hover-border-color) !important;
        box-shadow: var(--info-card-hover-shadow) !important;
    }
}