/* MyWebStore section and block-pattern foundation. */

:where(.mws-section) {
    padding-block: clamp(3rem, 7vw, 6.5rem);
    padding-inline: var(--mws-space-md);
}


:where(.mws-section + .mws-section) {
    padding-top: var(--mws-space-xl);
}

:where(.mws-section.alignfull) {
    box-sizing: border-box;
    margin-inline: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
    overflow-x: clip;
}

:where(.mws-pattern.alignfull, .mws-mini-trust-strip.alignfull) {
    box-sizing: border-box;
}

:where(
    .mws-pattern__inner,
    .mws-pattern > .alignwide,
    .mws-pattern > .wp-block-columns.alignwide,
    .mws-pattern > .wp-block-group.alignwide,
    .mws-section > .alignwide,
    .mws-section > .wp-block-columns.alignwide,
    .mws-section > .wp-block-group.alignwide,
    .mws-mini-trust-strip > .alignwide,
    .mws-mini-trust-strip > .wp-block-columns.alignwide,
    .mws-mini-trust-strip > .wp-block-group.alignwide
) {
    box-sizing: border-box;
    max-width: var(--mws-container);
    width: var(--mws-content-safe-width);
    margin-inline: auto;
}

:where(.mws-pattern__inner--narrow) {
    max-width: 900px;
}

:where(
    .mws-pattern > :not(.alignfull):not(.alignwide):not(.mws-pattern__inner):not(.wp-block-spacer),
    .mws-section > :not(.alignfull):not(.alignwide):not(.mws-pattern__inner):not(.wp-block-spacer),
    .mws-newsletter-section > :not(.alignfull):not(.alignwide):not(.mws-pattern__inner),
    .mws-section--surface > .wp-block-heading:first-child,
    .mws-mini-trust-strip > :not(.alignfull):not(.alignwide):not(.mws-pattern__inner):not(.wp-block-spacer)
) {
    box-sizing: border-box;
    max-width: var(--mws-container);
    width: var(--mws-content-safe-width);
    margin-inline: auto;
}

:where(.mws-pattern-actions) {
    width: auto;
    max-width: 100%;
}

:where(.mws-pattern-actions .wp-block-button, .mws-pattern-actions .wp-block-button__link, .mws-pattern-actions .wp-element-button) {
    width: auto;
    max-width: 100%;
}

:where(.mws-buttons--full-mobile) {
    width: 100%;
}

:where(.mws-section > .wp-block-heading:first-child) {
    margin-top: 0;
}

.mws-section--surface {
    background: var(--mws-color-surface);
}

.mws-section--intro,
.mws-section--posts,
.mws-section--products {
    background: var(--mws-color-bg);
}

/* Product grids carry their own visual weight through cards, so they use a
 * slightly tighter vertical rhythm than long-form content sections.
 */
.mws-section--products {
    padding-block: var(--mws-section-products-padding-block, clamp(1.75rem, 3vw, 3rem));
}

.mws-section--cta {
    background: var(--mws-color-primary);
    color: var(--mws-color-primary-contrast, #ffffff);
}

.mws-section--cta :where(h1, h2, h3, h4, h5, h6, p, a:not(.wp-block-button__link)):not(.has-text-color) {
    color: inherit;
}

.mws-section--cta .wp-block-button__link,
.mws-section--cta .wp-element-button {
    background: var(--mws-color-primary-contrast, #ffffff);
    color: var(--mws-color-primary);
    border-color: var(--mws-color-primary-contrast, #ffffff);
}

.mws-section--cta .wp-block-button__link:hover,
.mws-section--cta .wp-element-button:hover {
    background: var(--mws-color-surface);
    color: var(--mws-color-primary-hover);
    border-color: var(--mws-color-surface);
}

.mws-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.82;
}

.mws-card-grid {
    align-items: stretch;
    margin-top: var(--mws-space-lg);
}

.mws-card-grid:not(.wp-block-columns) {
    display: grid;
    gap: var(--mws-space-md);
}

.mws-card-grid .wp-block-column {
    display: flex;
}

.mws-card-grid .mws-card {
    width: 100%;
}

.mws-card {
    border: 1px solid var(--mws-color-border);
    border-radius: var(--mws-radius-lg);
    padding: var(--mws-space-md);
    background: var(--mws-color-bg);
    box-shadow: var(--mws-shadow-sm);
}

.mws-query-grid .wp-block-post-template {
    gap: var(--mws-space-md);
}

.mws-query-grid .wp-block-post-featured-image img {
    border-radius: var(--mws-radius-lg);
}

.wp-block-woocommerce-product-collection.mws-products,
.mws-section--products .wp-block-woocommerce-product-collection,
.mws-section--products .wc-block-grid {
    margin-top: var(--mws-space-lg);
}

.mws-section--products .wc-block-grid__products,
.mws-section--products .wp-block-woocommerce-product-template {
    gap: var(--mws-space-md);
}

/* Block-pattern page canvases. */
.mws-site-main--front,
.mws-site-main--block-canvas {
    max-width: none;
    width: 100%;
    padding-block: 0;
}

.mws-site-main--front .mws-page,
.mws-site-main--front .mws-entry-content,
.mws-site-main--block-canvas .mws-page,
.mws-site-main--block-canvas .mws-entry-content {
    width: 100%;
}

.mws-site-main--front .mws-entry-content,
.mws-site-main--block-canvas .mws-entry-content,
.mws-site-main--front .mws-entry-content > :first-child,
.mws-site-main--block-canvas .mws-entry-content > :first-child {
    margin-top: 0;
}

.mws-site-main--block-canvas .mws-entry-content > .alignfull {
    box-sizing: border-box;
    margin-inline: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

.mws-site-main--block-canvas .mws-entry-content > .alignfull + .alignfull {
    margin-top: 0;
}

.mws-site-main--block-canvas .mws-entry-content > :not(.alignfull):not(.alignwide) {
    max-width: var(--mws-content-readable-width);
}

.mws-site-main--block-canvas .mws-entry-content > .alignwide {
    max-width: var(--mws-content-safe-width);
}



/* Backward-compatible pattern text safety.
 * Inserted block patterns are static content, so older pages may not receive
 * newer mws-pattern__inner classes until the pattern is reinserted. These
 * rules protect legacy MyWebStore section markup as well as new patterns.
 */
:where(.mws-section.alignfull, .mws-mini-trust-strip.alignfull) > :where(.wp-block-columns.alignwide, .wp-block-group.alignwide, .wp-block-query.alignwide) {
    box-sizing: border-box;
    max-width: var(--mws-container);
    width: var(--mws-content-safe-width);
    margin-inline: auto;
}

:where(.mws-section.alignfull, .mws-mini-trust-strip.alignfull) > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, .wp-block-buttons, .wp-block-details, .wp-block-shortcode) {
    box-sizing: border-box;
    max-width: var(--mws-content-narrow-width);
    margin-inline: auto;
}

:where(.mws-section.alignfull) > :where(.mws-media-placeholder, .mws-form-placeholder) {
    box-sizing: border-box;
    max-width: var(--mws-container);
    width: var(--mws-content-safe-width);
    margin-inline: auto;
}

/* Shared pattern expansion primitives. */
.mws-pattern-header {
    margin-bottom: var(--mws-space-lg);
}

.mws-pattern-header > :first-child,
.mws-promo-banner__copy > :first-child,
.mws-newsletter-section > :first-child,
.mws-section--surface > .mws-eyebrow:first-child {
    margin-top: 0;
}

.mws-feature-grid {
    gap: var(--mws-space-md);
    margin-top: var(--mws-space-lg);
}

.mws-feature-grid .wp-block-column {
    display: flex;
}

.mws-feature-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-height: 100%;
    border: 1px solid var(--mws-color-border);
    border-radius: var(--mws-radius-lg);
    padding: var(--mws-space-md);
    background: var(--mws-color-bg);
    box-shadow: var(--mws-shadow-sm);
}

.mws-feature-card > :first-child,
.mws-card > :first-child {
    margin-top: 0;
}

.mws-feature-card > :last-child,
.mws-card > :last-child,
.mws-feature-card .wp-block-buttons:last-child,
.mws-card .wp-block-buttons:last-child {
    margin-bottom: 0;
}

.mws-feature-card .wp-block-buttons {
    margin-top: auto;
}

.mws-feature-card .wp-block-heading,
.mws-card .wp-block-heading {
    margin-bottom: var(--mws-space-xs);
}

.mws-mini-trust-strip {
    background: var(--mws-color-surface);
    border-block: 1px solid var(--mws-color-border);
    padding-block: var(--mws-space-md);
    padding-inline: var(--mws-space-md);
}

.mws-mini-trust-strip.alignfull {
    margin-inline: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

.mws-mini-trust-strip__grid {
    gap: var(--mws-space-md);
    margin-block: 0;
}

.mws-mini-trust-strip__grid p {
    margin-block: 0;
    color: var(--mws-color-secondary-text);
    font-size: var(--mws-font-size-small);
}

.mws-mini-trust-strip__grid strong {
    color: var(--mws-color-heading);
    font-size: var(--mws-font-size-body);
}

.mws-promo-banner {
    background: var(--mws-color-primary);
    color: var(--mws-color-primary-contrast, #ffffff);
}

.mws-promo-banner :where(h1, h2, h3, h4, h5, h6, p, a:not(.wp-block-button__link)):not(.has-text-color) {
    color: inherit;
}

.mws-promo-banner__inner {
    gap: var(--mws-space-lg);
}

.mws-promo-banner__copy {
    max-width: 720px;
}

.mws-promo-banner .wp-block-button__link,
.mws-promo-banner .wp-element-button {
    background: var(--mws-color-primary-contrast, #ffffff);
    color: var(--mws-color-primary);
    border-color: var(--mws-color-primary-contrast, #ffffff);
}

.mws-promo-banner .wp-block-button__link:hover,
.mws-promo-banner .wp-element-button:hover {
    background: var(--mws-color-surface);
    color: var(--mws-color-primary-hover);
    border-color: var(--mws-color-surface);
}

.mws-split-section {
    gap: clamp(var(--mws-space-lg), 5vw, var(--mws-space-xl));
}

.mws-media-placeholder,
.mws-form-placeholder {
    border: 1px dashed var(--mws-color-border);
    border-radius: var(--mws-radius-lg);
    padding: clamp(var(--mws-space-lg), 5vw, var(--mws-space-xl));
    background: var(--mws-color-bg);
    color: var(--mws-color-secondary-text);
}

.mws-media-placeholder {
    display: grid;
    min-height: clamp(260px, 34vw, 460px);
    place-items: center;
}

.mws-media-placeholder > *,
.mws-form-placeholder > * {
    max-width: 640px;
}

.mws-form-placeholder {
    margin-top: var(--mws-space-md);
}

.mws-newsletter-section {
    background: var(--mws-color-bg);
}

.mws-check-list {
    display: grid;
    gap: var(--mws-space-xs);
    margin-block: var(--mws-space-md) 0;
    padding: 0;
    list-style: none;
}

.mws-check-list li {
    position: relative;
    padding-left: 1.75rem;
}

.mws-check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 999px;
    background: var(--mws-color-primary);
}

.mws-brand-strip {
    gap: clamp(var(--mws-space-lg), 5vw, var(--mws-space-xl));
}

.mws-faq-list {
    display: grid;
    gap: var(--mws-space-sm);
    margin-top: var(--mws-space-lg);
}

.mws-faq-list .wp-block-details {
    border: 1px solid var(--mws-color-border);
    border-radius: var(--mws-radius-lg);
    padding: var(--mws-space-md);
    background: var(--mws-color-bg);
    box-shadow: var(--mws-shadow-sm);
}

.mws-faq-list .wp-block-details summary {
    color: var(--mws-color-heading);
    cursor: pointer;
    font-weight: 700;
}

.mws-faq-list .wp-block-details > :last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .mws-promo-banner__inner {
        align-items: flex-start;
    }

    .mws-mini-trust-strip__grid,
    .mws-feature-grid,
    .mws-split-section,
    .mws-brand-strip {
        gap: var(--mws-space-sm);
    }

    .mws-feature-card,
    .mws-faq-list .wp-block-details {
        padding: var(--mws-space-sm);
    }

    .mws-pattern.alignfull {
        padding-inline: 0;
    }

    .mws-mini-trust-strip.alignfull {
        padding-inline: 0;
    }

    .mws-pattern__inner,
    .mws-pattern > .alignwide,
    .mws-pattern > .wp-block-columns.alignwide,
    .mws-pattern > .wp-block-group.alignwide,
    .mws-section > .alignwide,
    .mws-section > .wp-block-columns.alignwide,
    .mws-section > .wp-block-group.alignwide,
    .mws-mini-trust-strip > .alignwide,
    .mws-mini-trust-strip > .wp-block-columns.alignwide,
    .mws-mini-trust-strip > .wp-block-group.alignwide,
    .mws-pattern > :not(.alignfull):not(.alignwide):not(.mws-pattern__inner):not(.wp-block-spacer),
    .mws-section > :not(.alignfull):not(.alignwide):not(.mws-pattern__inner):not(.wp-block-spacer),
    .mws-newsletter-section > :not(.alignfull):not(.alignwide):not(.mws-pattern__inner),
    .mws-section--surface > .wp-block-heading:first-child,
    .mws-mini-trust-strip > :not(.alignfull):not(.alignwide):not(.mws-pattern__inner):not(.wp-block-spacer) {
        width: var(--mws-content-safe-width);
        max-width: var(--mws-container);
    }


    .mws-section.alignfull > .wp-block-columns,
    .mws-mini-trust-strip.alignfull > .wp-block-columns {
        margin-inline: auto;
    }

    .mws-section.alignfull > .wp-block-columns:not(.alignfull),
    .mws-mini-trust-strip.alignfull > .wp-block-columns:not(.alignfull) {
        box-sizing: border-box;
        width: var(--mws-content-safe-width);
        max-width: var(--mws-container);
    }

    .mws-section .wp-block-buttons,
    .mws-promo-banner .wp-block-buttons,
    .mws-pattern-actions {
        gap: var(--mws-space-xs);
        width: auto;
        max-width: 100%;
    }

    .mws-pattern-actions .wp-block-button,
    .mws-pattern-actions .wp-block-button__link,
    .mws-pattern-actions .wp-element-button {
        width: auto;
        max-width: 100%;
    }

    .mws-buttons--full-mobile,
    .mws-buttons--full-mobile .wp-block-button,
    .mws-buttons--full-mobile .wp-block-button__link,
    .mws-buttons--full-mobile .wp-element-button {
        width: 100%;
    }
}