/*--------------------------------------------------------------
# MP Cart — Shared Components (.mepr-ds-*)
#
# Reusable, token-only component classes for the cart surface.
# Values verified against the Figma component library.
#
# Rules:
# - Additive only: applied alongside existing classes or on new
#   markup. NEVER replaces/renames an existing class.
# - Not for elements whose classes JS rewrites (admin status
#   badges) — retokenize those in place.
# - Mobile-first; flat specificity (single class); no !important.
# - Lean: components are added on first real use, not
#   speculatively.
--------------------------------------------------------------*/

/*------------------------------------------------
# Button — Figma Button/{Primary,Secondary,Tertiary,Destructive}
# 40px height: 10px block padding + 20px line-height.
# Disabled pattern (all variants): opacity .5.
------------------------------------------------*/
.mepr-ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mepr-cart-space-2);
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--mepr-cart-radius-md);
    box-shadow: var(--mepr-cart-shadow-xs);
    font-family: inherit;
    font-size: var(--mepr-cart-font-size-base);
    font-weight: var(--mepr-cart-font-weight-semibold);
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--mepr-cart-transition),
        border-color var(--mepr-cart-transition),
        color var(--mepr-cart-transition);
}

.mepr-ds-btn:focus-visible {
    outline: none;
    box-shadow: var(--mepr-cart-focus-ring);
}

.mepr-ds-btn:disabled,
.mepr-ds-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.mepr-ds-btn--primary {
    background: var(--mepr-cart-color-primary);
    color: var(--mepr-cart-color-on-primary);
}

.mepr-ds-btn--primary:hover:not(:disabled) {
    background: var(--mepr-cart-color-primary-hover);
    color: var(--mepr-cart-color-on-primary);
}

.mepr-ds-btn--secondary {
    background: var(--mepr-cart-color-surface);
    border-color: var(--mepr-cart-color-border);
    color: var(--mepr-cart-color-text-secondary);
}

.mepr-ds-btn--secondary:hover:not(:disabled) {
    background: var(--mepr-cart-color-surface-hover);
    color: var(--mepr-cart-color-text);
}

.mepr-ds-btn--tertiary {
    background: transparent;
    box-shadow: none;
    color: var(--mepr-cart-color-text-secondary);
}

.mepr-ds-btn--tertiary:hover:not(:disabled) {
    background: var(--mepr-cart-color-surface-hover);
    color: var(--mepr-cart-color-text);
}

.mepr-ds-btn--destructive {
    background: var(--mepr-cart-color-error);
    color: var(--mepr-cart-color-on-primary);
}

.mepr-ds-btn--destructive:hover:not(:disabled) {
    background: var(--mepr-cart-color-error-hover);
    color: var(--mepr-cart-color-on-primary);
}

/*------------------------------------------------
# Input — Figma Input/Field
# 40px height: 8px block padding + 24px line-height.
# Focus: brand border + 3px ring (1px border kept to
# avoid layout shift; Figma draws it 2px).
------------------------------------------------*/
.mepr-ds-input {
    display: block;
    width: 100%;
    padding: var(--mepr-cart-space-2) var(--mepr-cart-space-3);
    border: 1px solid var(--mepr-cart-color-border);
    border-radius: var(--mepr-cart-radius-md);
    box-shadow: var(--mepr-cart-shadow-xs);
    font-family: inherit;
    font-size: var(--mepr-cart-font-size-md);
    line-height: 24px;
    color: var(--mepr-cart-color-text);
    background: var(--mepr-cart-color-surface);
    box-sizing: border-box;
    transition: border-color var(--mepr-cart-transition),
        box-shadow var(--mepr-cart-transition);
    appearance: none;
}

.mepr-ds-input::placeholder {
    color: var(--mepr-cart-color-text-muted);
}

.mepr-ds-input:focus {
    outline: none;
    border-color: var(--mepr-cart-color-primary);
    box-shadow: var(--mepr-cart-focus-ring);
}

.mepr-ds-input.is-error {
    border-color: var(--mepr-cart-color-error);
}

.mepr-ds-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/*------------------------------------------------
# Checkbox — Figma Checkbox: 18px box, radius 5, 1.5px border;
# checked = brand fill + white check. Uses appearance:none so it
# beats WP's native admin checkbox without a specificity war.
------------------------------------------------*/
.mepr-ds-checkbox {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid var(--mepr-cart-color-border);
    border-radius: 5px;
    background: var(--mepr-cart-color-surface);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--mepr-cart-transition),
        border-color var(--mepr-cart-transition);
}

.mepr-ds-checkbox:checked {
    background: var(--mepr-cart-color-primary);
    border-color: var(--mepr-cart-color-primary);
}

/* White check mark (SVG) shown when checked. */
.mepr-ds-checkbox:checked::after {
    content: "";
    width: 10px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.5 9.5 3.5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mepr-ds-checkbox:focus-visible {
    outline: none;
    box-shadow: var(--mepr-cart-focus-ring);
}

.mepr-ds-field-label {
    display: block;
    margin-block-end: 6px;
    font-size: var(--mepr-cart-font-size-base);
    font-weight: var(--mepr-cart-font-weight-medium);
    line-height: 20px;
    color: var(--mepr-cart-color-text-secondary);
}

.mepr-ds-field-hint {
    margin-block-start: 6px;
    font-size: var(--mepr-cart-font-size-base);
    color: var(--mepr-cart-color-text-muted);
}

.mepr-ds-field-error {
    margin-block-start: 6px;
    font-size: var(--mepr-cart-font-size-base);
    color: var(--mepr-cart-color-error);
}

/*------------------------------------------------
# Badge — Figma Badge/{Pill,Square}/{sm,md}
# sm = 22px, md = 24px height; 1px border; medium weight.
------------------------------------------------*/
.mepr-ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--mepr-cart-space-1);
    padding: 2px var(--mepr-cart-space-2);
    border: 1px solid transparent;
    border-radius: var(--mepr-cart-radius-sm);
    font-size: var(--mepr-cart-font-size-xs);
    font-weight: var(--mepr-cart-font-weight-medium);
    line-height: 18px;
    white-space: nowrap;
}

.mepr-ds-badge--pill {
    border-radius: var(--mepr-cart-radius-pill);
}

.mepr-ds-badge--md {
    padding: 2px 10px;
    font-size: var(--mepr-cart-font-size-base);
    line-height: 20px;
}

.mepr-ds-badge--success {
    background: var(--mepr-cart-badge-success-bg);
    border-color: var(--mepr-cart-badge-success-border);
    color: var(--mepr-cart-badge-success-text);
}

.mepr-ds-badge--error {
    background: var(--mepr-cart-badge-error-bg);
    border-color: var(--mepr-cart-badge-error-border);
    color: var(--mepr-cart-badge-error-text);
}

.mepr-ds-badge--neutral {
    background: var(--mepr-cart-badge-neutral-bg);
    border-color: var(--mepr-cart-badge-neutral-border);
    color: var(--mepr-cart-badge-neutral-text);
}

.mepr-ds-badge--brand {
    background: var(--mepr-cart-badge-brand-bg);
    border-color: var(--mepr-cart-badge-brand-border);
    color: var(--mepr-cart-badge-brand-text);
}

/*------------------------------------------------
# Card — Figma Card: 16px radius, 1px border, shadow-xs
------------------------------------------------*/
.mepr-ds-card {
    background: var(--mepr-cart-color-surface);
    border: 1px solid var(--mepr-cart-color-border);
    border-radius: var(--mepr-cart-radius-lg);
    box-shadow: var(--mepr-cart-shadow-xs);
    padding: var(--mepr-cart-space-6);
}

.mepr-ds-card__title {
    margin: 0 0 var(--mepr-cart-space-3);
    font-size: var(--mepr-cart-font-size-lg);
    font-weight: var(--mepr-cart-font-weight-semibold);
    color: var(--mepr-cart-color-text);
}

/*------------------------------------------------
# Table — Figma Table/HeaderRow + Table/Row
# Header: 44px, subtle bg, 12px medium uppercase muted.
# Rows: 52px, 14px; primary cell strong, links brand.
------------------------------------------------*/
.mepr-ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mepr-cart-font-size-base);
}

.mepr-ds-table th {
    padding: var(--mepr-cart-space-3) var(--mepr-cart-space-6);
    background: var(--mepr-cart-color-surface-subtle);
    border-bottom: 1px solid var(--mepr-cart-color-border);
    font-size: var(--mepr-cart-font-size-xs);
    font-weight: var(--mepr-cart-font-weight-medium);
    text-transform: uppercase;
    text-align: start;
    color: var(--mepr-cart-color-text-muted);
}

.mepr-ds-table td {
    padding: var(--mepr-cart-space-4) var(--mepr-cart-space-6);
    border-bottom: 1px solid var(--mepr-cart-color-border);
    color: var(--mepr-cart-color-text-secondary);
}

.mepr-ds-table tbody tr:hover {
    background: var(--mepr-cart-color-surface-subtle);
}

/*------------------------------------------------
# List table — self-contained card-style data table for admin
# list screens (funnels list, cart orders list). Add alongside
# WP's `wp-list-table widefat striped` classes; the rules below
# neutralize WP's borders/zebra so the design owns the look.
# Header 44px #FAFAFA, rows 56px, #EFEFEF dividers, 8px radius.
------------------------------------------------*/
.mepr-ds-list-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--mepr-cart-color-surface);
    border: 1px solid var(--mepr-cart-color-border-subtle);
    border-radius: var(--mepr-cart-radius-md);
    overflow: hidden; /* clips header bg to the rounded corners */
    font-family: var(--mepr-cart-font-family);
}

/* Neutralize WP widefat/striped visuals. */
.mepr-ds-list-table.widefat {
    box-shadow: none;
}

.mepr-ds-list-table.striped > tbody > tr:nth-child(odd),
.mepr-ds-list-table.striped > tbody > tr:nth-child(even),
.mepr-ds-list-table > tbody > tr {
    background: transparent;
}

.mepr-ds-list-table thead th {
    height: 44px;
    padding: 0 var(--mepr-cart-space-6);
    background: var(--mepr-cart-color-surface-subtle);
    border: 0;
    font-size: var(--mepr-cart-font-size-xs);
    font-weight: var(--mepr-cart-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: start;
    color: var(--mepr-cart-color-text-muted);
    vertical-align: middle;
}

.mepr-ds-list-table tbody td {
    height: 56px;
    padding: 0 var(--mepr-cart-space-6);
    border: 0;
    border-top: 1px solid var(--mepr-cart-color-divider);
    font-size: var(--mepr-cart-font-size-base);
    color: var(--mepr-cart-color-text);
    vertical-align: middle;
}

/* Title (primary) column — brand-blue semibold link. */
.mepr-ds-list-table td.column-primary strong,
.mepr-ds-list-table td.column-title strong {
    display: block;
    margin: 0;
    line-height: 1.3;
}

.mepr-ds-list-table td.column-primary strong a,
.mepr-ds-list-table td.column-title strong a {
    color: var(--mepr-cart-color-primary);
    font-weight: var(--mepr-cart-font-weight-semibold);
    text-decoration: none;
}

.mepr-ds-list-table td.column-primary strong a:hover,
.mepr-ds-list-table td.column-title strong a:hover {
    text-decoration: underline;
}

/* Row actions take no space when idle, so the title stays vertically centered
   in the row; on hover they drop into flow (the title shifts up to make room). */
.mepr-ds-list-table .row-actions {
    position: absolute;
    left: -9999px;
    margin-top: 2px;
    padding: 0;
    line-height: 1.4;
}

.mepr-ds-list-table tr:hover .row-actions,
.mepr-ds-list-table .row-actions.visible {
    position: static;
    left: auto;
}

.mepr-ds-list-table tfoot th {
    display: none; /* design has no footer header row */
}

/* Borderless status pill used in list rows. */
.mepr-ds-list-status {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--mepr-cart-space-3);
    border-radius: var(--mepr-cart-radius-pill);
    font-size: var(--mepr-cart-font-size-xs);
    font-weight: var(--mepr-cart-font-weight-medium);
    line-height: 1.4;
    white-space: nowrap;
}

.mepr-ds-list-status--success {
    background: var(--mepr-cart-badge-success-bg);
    color: var(--mepr-cart-color-success);
}

.mepr-ds-list-status--neutral {
    background: var(--mepr-cart-neutral-100);
    color: var(--mepr-cart-admin-text-muted);
}

/* Pagination bar under a list table (WP tablenav-pages markup, DS-styled).
   Scoped under .mepr-ds-list-tablenav so it only affects our list screens. */
.mepr-ds-list-tablenav {
    height: auto;
    margin-top: var(--mepr-cart-space-4);
    padding: 0;
    font-family: var(--mepr-cart-font-family);
}

.mepr-ds-list-tablenav .tablenav-pages {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mepr-cart-space-3);
    float: none;
    margin: 0;
}

.mepr-ds-list-tablenav .displaying-num {
    font-size: var(--mepr-cart-font-size-base);
    color: var(--mepr-cart-color-text-muted);
}

.mepr-ds-list-tablenav .pagination-links {
    display: inline-flex;
    align-items: center;
    gap: var(--mepr-cart-space-1);
}

.mepr-ds-list-tablenav .pagination-links .button,
.mepr-ds-list-tablenav .pagination-links .tablenav-pages-navspan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--mepr-cart-space-2);
    border: 1px solid var(--mepr-cart-color-border);
    border-radius: var(--mepr-cart-radius-md);
    background: var(--mepr-cart-color-surface);
    box-shadow: none;
    color: var(--mepr-cart-color-text-secondary);
    font-size: var(--mepr-cart-font-size-base);
    line-height: 1;
}

.mepr-ds-list-tablenav .pagination-links a.button:hover {
    background: var(--mepr-cart-color-surface-hover);
    border-color: var(--mepr-cart-color-border);
    color: var(--mepr-cart-color-text);
}

.mepr-ds-list-tablenav .pagination-links .button.disabled,
.mepr-ds-list-tablenav .pagination-links .tablenav-pages-navspan.disabled {
    opacity: 0.5;
}

.mepr-ds-list-tablenav .paging-input,
.mepr-ds-list-tablenav .tablenav-paging-text {
    font-size: var(--mepr-cart-font-size-base);
    color: var(--mepr-cart-color-text-secondary);
}

/*------------------------------------------------
# Modal — Figma Modal/Shell: 16px radius, layered shadow,
# navy overlay.
------------------------------------------------*/
.mepr-ds-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--mepr-cart-color-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mepr-cart-space-4);
    z-index: 100000; /* above #wpadminbar (99999) */
}

/* display:flex above beats UA/theme [hidden]{display:none} — restore hide. */
.mepr-ds-modal-overlay[hidden] {
    display: none;
}

.mepr-ds-modal {
    background: var(--mepr-cart-color-surface);
    border-radius: var(--mepr-cart-radius-lg);
    box-shadow: var(--mepr-cart-shadow-lg);
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow: auto;
}

.mepr-ds-modal__header,
.mepr-ds-modal__body,
.mepr-ds-modal__footer {
    padding: var(--mepr-cart-space-6);
}

.mepr-ds-modal__header {
    border-bottom: 1px solid var(--mepr-cart-color-border);
}

.mepr-ds-modal__title {
    margin: 0;
    font-size: var(--mepr-cart-font-size-lg);
    font-weight: var(--mepr-cart-font-weight-semibold);
    color: var(--mepr-cart-color-text);
}

.mepr-ds-modal__footer {
    border-top: 1px solid var(--mepr-cart-color-border);
    display: flex;
    gap: var(--mepr-cart-space-3);
    justify-content: flex-end;
}

/* Close chip — Figma Modal/Shell × control (32px, soft surface). */
.mepr-ds-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--mepr-cart-radius-md);
    background: var(--mepr-cart-neutral-100);
    color: var(--mepr-cart-color-text-secondary);
    font-size: 20px;
    font-weight: var(--mepr-cart-font-weight-medium);
    line-height: 1;
    cursor: pointer;
    transition: color var(--mepr-cart-transition), background var(--mepr-cart-transition);
}

.mepr-ds-modal__close:hover {
    color: var(--mepr-cart-color-text);
    background: var(--mepr-cart-color-surface-hover);
}

.mepr-ds-modal__close:focus-visible {
    outline: none;
    box-shadow: var(--mepr-cart-focus-ring);
}

/*------------------------------------------------
# Pagination — Figma Pagination: 36px targets, 8px radius,
# semibold; current = brand.
------------------------------------------------*/
.mepr-ds-pagination {
    display: flex;
    align-items: center;
    gap: var(--mepr-cart-space-1);
    flex-wrap: wrap;
}

.mepr-ds-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--mepr-cart-space-2);
    background: var(--mepr-cart-color-surface);
    border: 1px solid var(--mepr-cart-color-border);
    border-radius: var(--mepr-cart-radius-md);
    font-size: var(--mepr-cart-font-size-base);
    font-weight: var(--mepr-cart-font-weight-semibold);
    color: var(--mepr-cart-color-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--mepr-cart-transition);
}

.mepr-ds-pagination__item:hover {
    background: var(--mepr-cart-color-surface-hover);
}

.mepr-ds-pagination__item.is-current {
    background: var(--mepr-cart-color-primary);
    border-color: var(--mepr-cart-color-primary);
    color: var(--mepr-cart-color-on-primary);
    cursor: default;
}

/*------------------------------------------------
# Qty stepper — Figma StepperBg (shop / cart)
#   width: 96px; height: 40px;
#   background: #FFF; border: 1px solid #DDD; radius: 8px
# Additive alongside existing hooks (.mepr-shop-stepper,
# .mepr-cart-qty-stepper, sidebar qty buttons). Center segment
# may be an <input> (__input) or <span> (__value).
# Use .mepr-ds-qty-stepper--sm for compact checkout sidebar.
------------------------------------------------*/
.mepr-ds-qty-stepper {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    flex: none;
    width: 96px;
    height: 40px;
    background: var(--mepr-cart-color-surface); /* #FFFFFF */
    border: 1px solid var(--mepr-cart-color-border); /* #DDDDDD */
    border-radius: var(--mepr-cart-radius-md); /* 8px */
    overflow: hidden;
}

.mepr-ds-qty-stepper__btn {
    box-sizing: border-box;
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 40px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--mepr-cart-color-surface);
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: var(--mepr-cart-font-size-md);
    line-height: 1;
    color: var(--mepr-cart-color-text);
    cursor: pointer;
    transition: background var(--mepr-cart-transition);
}

/* Inset 24px dividers between segments (Figma DivL/DivR). */
.mepr-ds-qty-stepper__btn--minus::after,
.mepr-ds-qty-stepper__btn--plus::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background: var(--mepr-cart-color-border);
}

.mepr-ds-qty-stepper__btn--minus::after {
    right: 0;
}

.mepr-ds-qty-stepper__btn--plus::before {
    left: 0;
}

.mepr-ds-qty-stepper__btn:hover:not(:disabled) {
    background: var(--mepr-cart-color-surface-hover);
}

/*
 * Beat ReadyLaunch theme `button:hover|active|focus { border-color: ... }`
 * (and UA outline). Parent overflow:hidden clips per-button rings into a
 * false left edge — keep chrome borderless and ring the stepper instead.
 */
.mepr-ds-qty-stepper__btn:hover,
.mepr-ds-qty-stepper__btn:active,
.mepr-ds-qty-stepper__btn:focus,
.mepr-ds-qty-stepper__btn:focus-visible {
    border: 0;
    outline: none;
    box-shadow: none;
}

.mepr-ds-qty-stepper:has(.mepr-ds-qty-stepper__btn:focus-visible),
.mepr-ds-qty-stepper:has(.mepr-ds-qty-stepper__input:focus-visible) {
    box-shadow: var(--mepr-cart-focus-ring);
}

.mepr-ds-qty-stepper__btn:disabled {
    color: var(--mepr-cart-color-text-subtle);
    background: var(--mepr-cart-color-surface);
    cursor: default;
    opacity: 1;
}

.mepr-ds-qty-stepper__input,
.mepr-ds-qty-stepper__value {
    box-sizing: border-box;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--mepr-cart-color-surface);
    box-shadow: none;
    font-family: inherit;
    font-size: var(--mepr-cart-font-size-base);
    font-weight: var(--mepr-cart-font-weight-regular);
    line-height: 1;
    color: var(--mepr-cart-color-text);
    text-align: center;
}

.mepr-ds-qty-stepper__input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.mepr-ds-qty-stepper__input::-webkit-inner-spin-button,
.mepr-ds-qty-stepper__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mepr-ds-qty-stepper__input:focus {
    outline: none;
    background: var(--mepr-cart-color-primary-soft);
}

.mepr-ds-qty-stepper__input:disabled {
    color: var(--mepr-cart-color-text-subtle);
    cursor: default;
}

/* Compact variant — checkout sidebar (same chrome, smaller footprint). */
.mepr-ds-qty-stepper--sm {
    width: 72px;
    height: 28px;
}

.mepr-ds-qty-stepper--sm .mepr-ds-qty-stepper__btn {
    width: 24px;
    height: 28px;
    font-size: var(--mepr-cart-font-size-xs);
}

.mepr-ds-qty-stepper--sm .mepr-ds-qty-stepper__btn--minus::after,
.mepr-ds-qty-stepper--sm .mepr-ds-qty-stepper__btn--plus::before {
    height: 16px;
}

.mepr-ds-qty-stepper--sm .mepr-ds-qty-stepper__input,
.mepr-ds-qty-stepper--sm .mepr-ds-qty-stepper__value {
    width: 24px;
    height: 28px;
    font-size: var(--mepr-cart-font-size-xs);
}

/*------------------------------------------------
# ATC message — Figma toast-gift-error (error = red, warning = amber)
# Markup injected by shop.js (.mepr-shop-card__atc-message). Shared by
# shop cards and the cart product page; placement (overlay vs under ATC)
# stays in the surface stylesheet.
------------------------------------------------*/
.mepr-shop-card__atc-message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--mepr-cart-space-3);
    box-sizing: border-box;
    min-height: 64px;
    padding: 14px;
    background: var(--mepr-cart-toast-error-bg);
    border: 1px solid var(--mepr-cart-toast-error-border);
    border-radius: 12px;
    box-shadow: var(--mepr-cart-toast-shadow);
    color: var(--mepr-cart-toast-error-text);
    text-align: start;
    word-break: break-word;
}

.mepr-shop-card__atc-message--error {
    background: var(--mepr-cart-toast-error-bg);
    border-color: var(--mepr-cart-toast-error-border);
    color: var(--mepr-cart-toast-error-text);
}

.mepr-shop-card__atc-message--warning {
    background: var(--mepr-cart-toast-warning-bg);
    border-color: var(--mepr-cart-toast-warning-border);
    color: var(--mepr-cart-toast-warning-text);
}

.mepr-shop-card__atc-message__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--mepr-cart-radius-pill);
    background: var(--mepr-cart-toast-error-icon);
    color: var(--mepr-cart-color-on-primary);
}

.mepr-shop-card__atc-message--warning .mepr-shop-card__atc-message__icon {
    background: var(--mepr-cart-toast-warning-icon);
}

.mepr-shop-card__atc-message__icon svg {
    display: block;
}

.mepr-shop-card__atc-message__text {
    flex: 1;
    min-width: 0;
    font-family: var(--mepr-cart-font-family);
    font-size: var(--mepr-cart-font-size-sm);
    font-weight: var(--mepr-cart-font-weight-medium);
    line-height: 1.4;
    color: inherit;
}