/**
 * MMPVT Frontend Styles
 *
 * Uses CSS custom properties (set via wp_head when Design Mode = Custom)
 * with sensible fallback defaults for Design Mode = Default.
 */

/* -----------------------------------------------------------------
   Section Title
   ----------------------------------------------------------------- */
.mmpvt-section-title {
    margin: 1.5em 0 0.75em;
    font-size: 1.3em;
    text-align: center !important;
}

/* -----------------------------------------------------------------
   Outer Wrapper
   ----------------------------------------------------------------- */
.mmpvt_init_variation_table {
    margin: 0 0 2em;
    clear: both;
}

/* -----------------------------------------------------------------
   Scroll Container
   ----------------------------------------------------------------- */
.mmpvt_variant_table_block {
    position: relative;
}

.mmpvt_variant_table_block.mmpvt-scroll-x {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.mmpvt_variant_table_block.mmpvt-scroll-y {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Sticky header in scroll mode */
.mmpvt_variant_table_block.mmpvt-scroll-y .mmpvt-table thead th {
    position: sticky !important;
    top: 0;
    z-index: 2 !important;
}

/* -----------------------------------------------------------------
   Table Base
   ----------------------------------------------------------------- */
.mmpvt-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-size: 14px;
    line-height: 1.4;
    border: var(--mmpvt-border-width, 1px) solid var(--mmpvt-border-color, #eee);
}

/* Fit Content width mode - wrapper sizes to table, centered in container */
.mmpvt_init_variation_table.mmpvt-width-fit {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.mmpvt_init_variation_table.mmpvt-width-fit .mmpvt-table {
    width: 100%;
}

/* -----------------------------------------------------------------
   Table Header
   ----------------------------------------------------------------- */
.mmpvt-table thead th {
    background: var(--mmpvt-header-bg, #f8f8f8);
    color: var(--mmpvt-header-text, #6d6d6d);
    text-align: var(--mmpvt-header-align, left) !important;
    padding: var(--mmpvt-header-padding, 12px) !important;
    border-bottom: var(--mmpvt-border-width, 1px) solid var(--mmpvt-border-color, #eee);
    font-weight: 600;
    font-size: 14px;
    text-transform: none;
    white-space: nowrap !important;
    position: relative;
    vertical-align: middle !important;
}

/* -----------------------------------------------------------------
   Sortable Headers
   ----------------------------------------------------------------- */
.mmpvt-table thead th.mmpvt-sortable {
    cursor: pointer !important;
    user-select: none !important;
    padding-right: calc(var(--mmpvt-header-padding, 12px) + 16px);
}

.mmpvt-table thead th.mmpvt-sortable:hover {
    background: color-mix(in srgb, var(--mmpvt-header-bg, #f8f8f8), #000 5%);
}

/* Sort arrow indicator */
.mmpvt-sort-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0.3;
    border-bottom: 5px solid var(--mmpvt-header-arrow, #666);
}

th.mmpvt-sort-asc .mmpvt-sort-arrow {
    opacity: 1;
    border-bottom: 5px solid var(--mmpvt-header-arrow, #666);
    border-top: none;
}

th.mmpvt-sort-desc .mmpvt-sort-arrow {
    opacity: 1;
    border-top: 5px solid var(--mmpvt-header-arrow, #666);
    border-bottom: none;
}

/* -----------------------------------------------------------------
   Table Body
   ----------------------------------------------------------------- */
.mmpvt-table tbody td {
    padding: var(--mmpvt-body-padding, 12px) !important;
    color: var(--mmpvt-body-text, #6d6d6d);
    text-align: var(--mmpvt-body-align, left);
    border-bottom: var(--mmpvt-border-width, 1px) solid var(--mmpvt-border-color, #eee);
    vertical-align: middle !important;
    line-height: 1.5;
}

/* Row striping */
.mmpvt-table tbody tr.mmpvt-row-odd {
    background: var(--mmpvt-body-bg-odd, #fbfbfb);
}

.mmpvt-table tbody tr.mmpvt-row-even {
    background: var(--mmpvt-body-bg-even, #fff);
}

.mmpvt-table tbody tr.mmpvt-row:hover {
    background: color-mix(in srgb, var(--mmpvt-body-bg-even, #fff), #000 3%);
}

/* -----------------------------------------------------------------
   Search/Filter/Pagination - hidden rows
   Class-based hide so it overrides the mobile card layout's
   `display: block !important` rule on tr.mmpvt-row.
   ----------------------------------------------------------------- */
.mmpvt-table tbody tr.mmpvt-row.mmpvt-row-filtered-out {
    display: none !important;
}

/* -----------------------------------------------------------------
   Qty Input - Clamp-to-Max Visual Acknowledgment
   Pulses the qty wrapper border when the user's entry was clamped
   to the in-stock maximum. Class is added in mmpvt-frontend.js on
   blur and self-removes when the animation ends.

   Targets the wrapper (not the input) because:
     1. The wrapper has a full 4-side border; the input only has
        left/right borders.
     2. box-shadow on the wrapper renders outside its own box,
        so wrapper's `overflow: hidden` does not clip it.
   ----------------------------------------------------------------- */
@keyframes mmpvt-qty-clamp-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(230, 162, 60, 0.75); border-color: #e6a23c; }
    50%  { box-shadow: 0 0 0 5px rgba(230, 162, 60, 0.25); border-color: #e6a23c; }
    100% { box-shadow: 0 0 0 0   rgba(230, 162, 60, 0);    border-color: #dcdcde; }
}

.mmpvt-qty-wrapper.mmpvt-qty-clamped {
    animation: mmpvt-qty-clamp-pulse 900ms ease-out;
}

/* -----------------------------------------------------------------
   Restricted Rows
   ----------------------------------------------------------------- */
.mmpvt-table tbody tr.mmpvt-restricted {
    opacity: 0.65;
}

.mmpvt-restriction-notation {
    display: block;
    font-size: 12px;
    color: #b32d2e;
    margin-top: 4px;
    font-style: italic;
}

/* Attribute label suppress - hides "Flavor: " span per context */
.mmpvt-attr-suppress-desktop .mmpvt-attr-label {
    display: none;
}

/* -----------------------------------------------------------------
   Column-Specific Styles
   ----------------------------------------------------------------- */

/* Image */
.mmpvt-col-image {
    width: 80px;
}

.mmpvt-col-image.mmpvt-col-image-large {
    width: 120px;
}

.mmpvt-table th.mmpvt-col-image,
.mmpvt-table td.mmpvt-col-image {
    text-align: center;
}

.mmpvt-image {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.mmpvt-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 3px;
    border: 1px solid #eee;
    box-sizing: border-box !important;
}

/* SKU */
.mmpvt-col-sku {
    white-space: nowrap !important;
    font-family: monospace;
    font-size: 14px;
}

/* Attributes */
.mmpvt-col-attr {
    white-space: nowrap !important;
}

/* Description */
.mmpvt-col-desc {
    min-width: 120px;
    max-width: 250px;
}

/* Availability / Stock */
.mmpvt-col-avail .stock {
    margin: 0;
    font-size: 14px;
}

.mmpvt-col-avail .stock.in-stock {
    color: #0f834d;
}

.mmpvt-col-avail .stock.out-of-stock {
    color: #b32d2e;
}

/* Price */
.mmpvt-col-price {
    white-space: nowrap !important;
}

.mmpvt-col-price del {
    font-size: 0.9em;
    margin-right: 4px;
}

.mmpvt-col-price ins.mmpvt-wholesale-price {
    text-decoration: none;
    font-weight: 600;
}

/* Quantity */
.mmpvt-col-qty {
    white-space: nowrap !important;
}

/* Max/Min/Step */
.mmpvt-col-qty-rules {
    white-space: nowrap !important;
    font-size: 0.85em;
    color: #50575e;
}

/* Extended */
.mmpvt-col-subtotal {
    white-space: nowrap !important;
    font-weight: 600;
}

/* Action */
.mmpvt-col-action {
    white-space: nowrap !important;
}

/* Center-align these columns in both header and body */
.mmpvt-table th.mmpvt-col-qty,
.mmpvt-table td.mmpvt-col-qty,
.mmpvt-table th.mmpvt-col-subtotal,
.mmpvt-table td.mmpvt-col-subtotal,
.mmpvt-table th.mmpvt-col-action,
.mmpvt-table td.mmpvt-col-action {
    text-align: center !important;
}

/* -----------------------------------------------------------------
   Quantity Input
   ----------------------------------------------------------------- */
.mmpvt-qty-wrapper {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    overflow: hidden !important;
    background: #fff;
    width: auto !important;
    vertical-align: middle;
}

/* Defensive: some themes (XStore for one) apply aggressive width rules to
   descendants of the summary form or to elements inside a .quantity wrapper.
   Lock our children to their intended intrinsic widths so +/- buttons and
   the input stay on one horizontal line regardless of theme interference. */
.mmpvt-qty-wrapper > .mmpvt-qty-btn,
.mmpvt-qty-wrapper > .mmpvt-qty-input {
    flex: 0 0 auto !important;
}

.mmpvt-qty-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 34px !important;
    background: #f8f8f8;
    border: none !important;
    cursor: pointer !important;
    font-size: 16px;
    font-weight: 600;
    color: #50575e;
    line-height: 1;
    padding: 0 !important;
    transition: background 0.15s;
}

.mmpvt-qty-btn:hover {
    background: #e8e8e8;
    color: #1d2327;
}

.mmpvt-qty-btn:active {
    background: #ddd;
}

.mmpvt-qty-input,
.mmpvt-qty-wrapper .mmpvt-qty-input {
    width: 52px !important;
    height: 34px !important;
    text-align: center !important;
    border: none !important;
    border-left: 1px solid #dcdcde !important;
    border-right: 1px solid #dcdcde !important;
    font-size: 14px;
    padding: 0 4px !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
    background: #fff;
    color: #1d2327;
}

.mmpvt-qty-input::-webkit-outer-spin-button,
.mmpvt-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.mmpvt-qty-input[readonly] {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

/* -----------------------------------------------------------------
   Stacked Columns
   ----------------------------------------------------------------- */
.mmpvt-col-stacked {
    vertical-align: middle;
}

.mmpvt-table td.mmpvt-col-stacked {
    padding: 2px 4px !important;
}

.mmpvt-stacked-field {
    padding: 2px 0;
}

.mmpvt-stacked-field + .mmpvt-stacked-field {
    margin-top: 2px;
    padding-top: 4px;
}

/* Stacked image should constrain */
.mmpvt-stacked-field.mmpvt-stacked-image_link img {
    max-width: 50px;
    height: auto;
    border: 1px solid #eee;
    border-radius: 3px;
}

.mmpvt-stacked-field.mmpvt-stacked-image_link .mmpvt-image-large img {
    max-width: 80px;
}

/* -----------------------------------------------------------------
   Cart Button (per-row)
   ----------------------------------------------------------------- */
.mmpvt-cart-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px;
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer !important;
    white-space: nowrap !important;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.mmpvt-cart-btn .mmpvt-cart-icon {
    flex-shrink: 0;
    vertical-align: middle;
}

.mmpvt-cart-btn.mmpvt-loading {
    opacity: 0.6;
    pointer-events: none !important;
}

.mmpvt-cart-btn.mmpvt-btn-disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.mmpvt-oos-text {
    color: #b32d2e;
    font-size: 14px;
    font-style: italic;
}

/* -----------------------------------------------------------------
   Checkbox Column (Bulk Checkbox Mode)
   ----------------------------------------------------------------- */
.mmpvt-col-checkbox {
    width: 36px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.mmpvt-table th.mmpvt-col-checkbox,
.mmpvt-table td.mmpvt-col-checkbox {
    text-align: center;
}

.mmpvt-col-checkbox input[type="checkbox"] {
    margin: 0;
}

/* -----------------------------------------------------------------
   Attribute Filters
   ----------------------------------------------------------------- */
.mmpvt-attribute-filters {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    align-items: center;
}

.mmpvt-filter-group {
    display: inline-flex;
    align-items: center;
}

.mmpvt-attr-filter {
    min-width: 140px;
    padding: 6px 10px;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    color: #1d2327;
}

/* -----------------------------------------------------------------
   Search Input
   ----------------------------------------------------------------- */
.mmpvt-search-wrapper {
    margin-bottom: 12px;
}

.mmpvt-search-input {
    width: 100% !important;
    max-width: 350px !important;
    padding: 8px 12px;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
}

.mmpvt-search-input:focus {
    border-color: #2271b1;
    outline: none;
    box-shadow: 0 0 0 1px #2271b1;
}

/* -----------------------------------------------------------------
   Bulk Cart Area
   ----------------------------------------------------------------- */
.mmpvt-bulk-cart-area {
    padding: 12px 0;
}

.mmpvt-bulk-cart-area.mmpvt-bulk-top {
    padding-bottom: 12px;
    border-bottom: none;
}

.mmpvt-bulk-cart-area.mmpvt-bulk-bottom {
    padding-top: 12px;
}

.mmpvt-bulk-controls {
    display: flex !important;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Bulk alignment */
.mmpvt-bulk-align-left .mmpvt-bulk-controls {
    justify-content: flex-start;
}

.mmpvt-bulk-align-right .mmpvt-bulk-controls {
    justify-content: flex-end;
}

/* Button on outside edge: first when left, last when right */
.mmpvt-bulk-align-left .mmpvt-bulk-cart-btn {
    order: -1;
}

.mmpvt-bulk-align-right .mmpvt-bulk-cart-btn {
    order: 99;
}

.mmpvt-bulk-info {
    font-size: 14px;
    color: #50575e;
}

.mmpvt-bulk-count {
    font-weight: 600;
}

.mmpvt-bulk-total {
    font-weight: 600;
}

.mmpvt-bulk-cart-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer !important;
    white-space: nowrap !important;
    border-radius: 4px;
}

.mmpvt-bulk-cart-btn .mmpvt-cart-icon {
    flex-shrink: 0;
}

.mmpvt-bulk-cart-btn.mmpvt-loading {
    opacity: 0.6;
    pointer-events: none !important;
}

.mmpvt-bulk-note {
    font-size: 14px;
    color: #646970;
    margin: 0 0 8px;
    font-style: italic;
}

/* -----------------------------------------------------------------
   Variation Totals (Live Cart mode)
   ----------------------------------------------------------------- */
.mmpvt-variation-totals {
    padding: 10px 0;
    text-align: right;
}

.mmpvt-variation-totals-top {
    padding-bottom: 10px;
}

.mmpvt-variation-totals-bottom {
    padding-top: 10px;
}

.mmpvt-vt-info {
    font-size: 14px;
    color: var(--mmpvt-footer-text, #50575e);
}

.mmpvt-vt-count {
    font-weight: 600;
}

.mmpvt-vt-total {
    font-weight: 600;
}

/* -----------------------------------------------------------------
   Pagination (tfoot)
   ----------------------------------------------------------------- */
.mmpvt-table tfoot {
    background: var(--mmpvt-footer-bg, #fff);
}

.mmpvt-pagination-cell {
    padding: 10px !important;
    text-align: center !important;
    border-bottom: none !important;
}

.mmpvt-pagination {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}

.mmpvt-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #dcdcde;
    border-radius: 3px;
    text-decoration: none;
    font-size: 14px;
    color: var(--mmpvt-page-color, var(--mmpvt-footer-text, #222));
    background: #fff;
    transition: all 0.15s;
}

.mmpvt-page-link:hover {
    border-color: #8c8f94;
    color: #1d2327;
    background: #f6f7f7;
    text-decoration: none;
}

.mmpvt-page-link.mmpvt-page-active {
    background: var(--mmpvt-page-active-bg, #abb8c3);
    color: var(--mmpvt-page-active-color, #fff);
    border-color: var(--mmpvt-page-active-bg, #abb8c3);
    font-weight: 600;
    cursor: default;
}

.mmpvt-page-ellipsis {
    padding: 0 4px;
    color: #999;
}

/* -----------------------------------------------------------------
   Cart Notices
   ----------------------------------------------------------------- */
.mmpvt-notice {
    margin: 0 0 15px;
}

/* -----------------------------------------------------------------
   Available Options Scroll-To Button
   ----------------------------------------------------------------- */
.mmpvt-available-options-btn {
    display: inline-block;
    margin-top: 10px;
}

/* -----------------------------------------------------------------
   Field-Level Styling (Custom Properties)
   Uses --mmpvt-fs-d / --mmpvt-fw-d / --mmpvt-color-d for desktop,
   --mmpvt-fs-m / --mmpvt-fw-m / --mmpvt-color-m for mobile
   (switched via media query).
   ----------------------------------------------------------------- */
.mmpvt-field-styled {
    font-size: var(--mmpvt-fs-d, inherit);
    font-weight: var(--mmpvt-fw-d, inherit);
    color: var(--mmpvt-color-d, inherit);
}

.mmpvt-field-label {
    font-weight: 600;
    /* color: inherit lets the per-field color picker reach the mobile label.
       Matches the behavior of .mmpvt-attr-label, which has no color rule and
       inherits naturally from the .mmpvt-field-styled wrapper. When no
       per-field color is set, inheritance falls through to the td's
       --mmpvt-body-text. */
    color: inherit;
    opacity: 0.75;
    font-size: 0.9em;
}

/* Desktop-only / mobile-only visibility helpers */
.mmpvt-mobile-only {
    display: none !important;
}

.mmpvt-desktop-only {
    display: inline !important;
}

/* Fields in mobile layout but not desktop - hidden on desktop, shown on mobile */
.mmpvt-desktop-hidden {
    display: none !important;
}

/* Extra left-column content injected for mobile consolidation - hidden on desktop */
.mmpvt-mobile-left-appended {
    display: none !important;
}

/* -----------------------------------------------------------------
   Responsive Two-Column Card Layout (< 768px)
   ----------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    /* Mobile base font size */
    .mmpvt-table {
        font-size: 16px;
    }

    .mmpvt-table thead th {
        font-size: 16px;
    }

    .mmpvt-col-sku {
        font-size: 16px;
    }

    .mmpvt-col-avail .stock {
        font-size: 16px;
    }

    .mmpvt-qty-input {
        font-size: 16px;
    }

    .mmpvt-add-to-cart {
        font-size: 16px;
    }

    .mmpvt-oos-text {
        font-size: 16px;
    }

    /* Only apply mobile layout if not explicitly disabled */
    .mmpvt-table:not(.mmpvt-no-breakdown) thead {
        display: none !important;
    }

    /* Reset the inline min-width that the admin "Table min-width" option
       writes onto the <table> element (used to force horizontal scroll on
       desktop). In mobile card mode the table is transformed into block-
       level cards and the min-width would prevent the layout from
       shrinking to viewport width. Scoped to card mode so keep_desktop
       preserves min-width for its horizontal-scroll purpose. */
    .mmpvt-table:not(.mmpvt-no-breakdown) {
        min-width: 0 !important;
    }

    /* Base card styles shared by all mobile layout modes */
    .mmpvt-table:not(.mmpvt-no-breakdown) tbody tr {
        display: block !important;
        position: relative;
        margin-bottom: 12px;
        border: var(--mmpvt-border-width, 1px) solid var(--mmpvt-border-color, #eee);
        border-radius: 4px;
        overflow: hidden;
    }

    .mmpvt-table:not(.mmpvt-no-breakdown) tbody td {
        display: block !important;
        padding: 2px 4px !important;
        border: none;
    }

    /* Hidden fields on mobile */
    .mmpvt-table:not(.mmpvt-no-breakdown) tbody td.mmpvt-mobile-hidden {
        display: none !important;
    }

    /* -------------------------------------------------------
       TWO-COLUMN mode: left panel floats left, row height
       expands to contain whichever side is taller.
    ------------------------------------------------------- */
    .mmpvt-mobile-two-col:not(.mmpvt-no-breakdown) tbody tr {
        overflow: hidden; /* clearfix for float */
        min-height: 80px;
        text-align: right !important; /* positions inline-block children (action + checkbox) */
    }

    /* Left column - floated, fixed width, full height of content */
    .mmpvt-mobile-two-col:not(.mmpvt-no-breakdown) tbody td.mmpvt-mobile-left {
        float: left !important;
        width: 130px !important;
        display: block !important;
        text-align: left !important;
        padding: 6px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* All non-left, non-hidden cells sit beside the float */
    .mmpvt-mobile-two-col:not(.mmpvt-no-breakdown) tbody td:not(.mmpvt-mobile-left):not(.mmpvt-mobile-hidden) {
        margin-left: 130px !important;
    }

    /* Extra left-column fields injected into the first left cell */
    /* In two-col mode: left-align to match the left panel default */
    /* In one-col mode: inherits text-align from parent td (centered by default) */
    .mmpvt-mobile-two-col .mmpvt-mobile-left-appended {
        text-align: left;
    }
    .mmpvt-mobile-left-appended {
        display: block !important;
        padding: 4px 0 0;
        width: 100%;
    }

    /* Normalize <p> margins inside the mobile-left column. WooCommerce's
       wc_get_stock_html() wraps availability in <p class="stock">, which
       inherits the browser default margin: 1em 0 and creates a visible gap
       between availability and any following appended field (e.g. MMC
       excise tax). Desktop hides this behind the 12px td padding; mobile's
       tight padding exposes it. */
    .mmpvt-mobile-two-col:not(.mmpvt-no-breakdown) tbody td.mmpvt-mobile-left p,
    .mmpvt-mobile-left-appended p {
        margin: 0 !important;
    }

    .mmpvt-mobile-two-col:not(.mmpvt-no-breakdown) tbody td.mmpvt-mobile-left .mmpvt-image {
        width: 100%;
    }

    .mmpvt-mobile-two-col:not(.mmpvt-no-breakdown) tbody td.mmpvt-mobile-left img {
        width: 100%;
        height: auto;
        border: 1px solid #eee;
        border-radius: 3px;
        box-sizing: border-box;
    }

    /* Large image mobile card - wider left panel */
    .mmpvt-table-image-large.mmpvt-mobile-two-col:not(.mmpvt-no-breakdown) tbody tr {
        min-height: 130px;
    }
    .mmpvt-table-image-large.mmpvt-mobile-two-col:not(.mmpvt-no-breakdown) tbody td.mmpvt-mobile-left {
        width: 170px !important;
    }
    .mmpvt-table-image-large.mmpvt-mobile-two-col:not(.mmpvt-no-breakdown) tbody td:not(.mmpvt-mobile-left):not(.mmpvt-mobile-hidden) {
        margin-left: 170px !important;
    }

    /* Right column in two-col mode - right-aligned by default */
    .mmpvt-mobile-two-col:not(.mmpvt-no-breakdown) tbody td.mmpvt-mobile-right {
        text-align: right !important;
    }

    /* -------------------------------------------------------
       ONE-COLUMN modes: no absolute positioning, full width,
       normal block flow, left-aligned by default
    ------------------------------------------------------- */
    .mmpvt-mobile-left-only:not(.mmpvt-no-breakdown) tbody tr,
    .mmpvt-mobile-right-only:not(.mmpvt-no-breakdown) tbody tr {
        padding-left: 0;
        min-height: 0;
        text-align: center !important;
    }

    .mmpvt-mobile-left-only:not(.mmpvt-no-breakdown) tbody td.mmpvt-mobile-left,
    .mmpvt-mobile-right-only:not(.mmpvt-no-breakdown) tbody td.mmpvt-mobile-right {
        position: static !important;
        width: auto !important;
        display: block !important;
        text-align: center !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Mobile text-align overrides - apply to all modes */
    .mmpvt-table:not(.mmpvt-no-breakdown) tbody td[data-mobile-align="left"] {
        text-align: left !important;
    }
    .mmpvt-table:not(.mmpvt-no-breakdown) tbody td[data-mobile-align="center"] {
        text-align: center !important;
    }
    .mmpvt-table:not(.mmpvt-no-breakdown) tbody td[data-mobile-align="right"] {
        text-align: right !important;
    }

    /* Remove data-title labels in card mode */
    .mmpvt-table:not(.mmpvt-no-breakdown) tbody td::before {
        display: none;
    }

    /* Stacked fields in mobile should be compact */
    .mmpvt-table:not(.mmpvt-no-breakdown) .mmpvt-stacked-field {
        padding: 1px 0;
    }

    /* Checkbox + Action inline on mobile - share a line, right-justified */
    .mmpvt-table:not(.mmpvt-no-breakdown) td.mmpvt-col-action {
        display: inline-block !important;
        vertical-align: middle !important;
        padding: 6px 10px;
    }

    .mmpvt-table:not(.mmpvt-no-breakdown) td.mmpvt-col-checkbox {
        display: inline-block !important;
        vertical-align: middle !important;
        border: none;
        padding: 6px 4px 6px 0;
    }

    .mmpvt-table:not(.mmpvt-no-breakdown) td.mmpvt-col-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    /* Follow mobile right-column alignment override for action+checkbox row */
    .mmpvt-table:not(.mmpvt-no-breakdown) tbody tr[data-mobile-row-align="left"] {
        text-align: left !important;
    }

    .mmpvt-table:not(.mmpvt-no-breakdown) tbody tr[data-mobile-row-align="center"] {
        text-align: center !important;
    }

    /* Tfoot in mobile */
    .mmpvt-table:not(.mmpvt-no-breakdown) tfoot tr {
        display: block !important;
        padding-left: 0;
        min-height: 0;
    }

    .mmpvt-table:not(.mmpvt-no-breakdown) tfoot td {
        display: block !important;
    }

    /* Attribute filters stack vertically */
    .mmpvt-attribute-filters {
        flex-direction: column !important;
        align-items: stretch;
    }

    .mmpvt-attr-filter {
        width: 100% !important;
    }

    /* Search full width */
    .mmpvt-search-input {
        max-width: 100% !important;
    }

    /* Bulk controls stack */
    .mmpvt-bulk-controls {
        flex-direction: column !important;
        align-items: stretch;
        text-align: center;
    }

    .mmpvt-bulk-cart-btn {
        justify-content: center;
    }

    /* Field-level styling: switch to mobile custom properties */
    .mmpvt-field-styled {
        font-size: var(--mmpvt-fs-m, var(--mmpvt-fs-d, inherit));
        font-weight: var(--mmpvt-fw-m, var(--mmpvt-fw-d, inherit));
        color: var(--mmpvt-color-m, var(--mmpvt-color-d, inherit));
    }

    /* Swap desktop/mobile visibility */
    .mmpvt-desktop-only {
        display: none !important;
    }

    .mmpvt-mobile-only {
        display: inline !important;
    }

    /* Attribute label suppress on mobile */
    .mmpvt-attr-suppress-mobile .mmpvt-attr-label {
        display: none;
    }

    /* Show mobile-only fields (hidden on desktop) */
    .mmpvt-table:not(.mmpvt-no-breakdown) td.mmpvt-desktop-hidden {
        display: block !important;
    }

    /* Mobile display mode: Show All - remove scroll constraints */
    .mmpvt_variant_table_block[data-mobile-display="show_all"] {
        max-height: none !important;
        overflow-y: visible !important;
    }

    /* Mobile display mode: Scroll - use mobile scroll height */
    .mmpvt_variant_table_block[data-mobile-display="scroll"] {
        max-height: var(--mmpvt-mobile-scroll-height, 850px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Hide pagination on mobile */
    .mmpvt-pagination-cell {
        display: none !important;
    }
}

/* =========================================================================
   Cart Quantity Indicator - Badge
   ========================================================================= */

.mmpvt-qty-cell-wrapper {
    position: relative;
    display: inline-block;
    text-align: inherit;
}

.mmpvt-cart-badge {
    position: absolute !important;
    top: -8px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #2271b1;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 9px;
    z-index: 1 !important;
}

/* =========================================================================
   Cart Quantity Indicator - Text
   ========================================================================= */

.mmpvt-cart-text {
    display: block;
    font-size: 11px;
    color: #888;
    text-align: inherit;
    white-space: nowrap;
}

.mmpvt-cart-remove {
    display: inline-block;
    background: none !important;
    border: none !important;
    padding: 2px;
    cursor: pointer !important;
    color: #b32d2e;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    line-height: 1;
    vertical-align: middle;
}

.mmpvt-cart-remove:hover {
    opacity: 1;
}

.mmpvt-cart-remove-link {
    color: #b32d2e;
    text-decoration: none;
    font-size: 11px;
}

.mmpvt-cart-remove-link:hover {
    text-decoration: underline;
}

/* =========================================================================
   In-Cart Row Highlight
   ========================================================================= */

/* 3px left bar reads as a row-start accent on variable-product <tr> rows,
   but runs the full height of the summary column on the simple-product
   <div class="mmpvt-row mmpvt-simple-row"> stack. Scope to variable only. */
.mmpvt-row.mmpvt-in-cart:not(.mmpvt-simple-row) {
    border-left: 3px solid var(--mmpvt-in-cart-accent, #2271b1) !important;
}

/* =========================================================================
   Live Cart - Row Syncing State
   ========================================================================= */

.mmpvt-row.mmpvt-row-syncing {
    opacity: 0.6;
    pointer-events: none !important;
    transition: opacity 0.2s ease;
}

/* Never show syncing state on restricted or OOS rows */
.mmpvt-row.mmpvt-restricted.mmpvt-row-syncing,
.mmpvt-row[data-stock-status="outofstock"].mmpvt-row-syncing {
    opacity: 1;
    pointer-events: auto;
}

.mmpvt-row.mmpvt-row-syncing .mmpvt-qty-wrapper {
    position: relative;
}

.mmpvt-row.mmpvt-row-syncing .mmpvt-qty-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -24px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid #dcdcde;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: mmpvt-spin 0.6s linear infinite;
}

/* No spinner on restricted or OOS rows */
.mmpvt-row.mmpvt-restricted.mmpvt-row-syncing .mmpvt-qty-wrapper::after,
.mmpvt-row[data-stock-status="outofstock"].mmpvt-row-syncing .mmpvt-qty-wrapper::after {
    display: none;
}

/* Hide native number input spinner on readonly/disabled inputs */
.mmpvt-qty-input[readonly]::-webkit-inner-spin-button,
.mmpvt-qty-input[readonly]::-webkit-outer-spin-button,
.mmpvt-qty-input[disabled]::-webkit-inner-spin-button,
.mmpvt-qty-input[disabled]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mmpvt-qty-input[readonly],
.mmpvt-qty-input[disabled] {
    -moz-appearance: textfield;
}

@keyframes mmpvt-spin {
    to { transform: rotate(360deg); }
}

/* =========================================================================
   Cart Status Popup
   ========================================================================= */

.mmpvt-cart-status-popup {
    position: fixed !important;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    max-width: 400px;
    width: calc(100% - 32px);
    background: var(--mmpvt-popup-bg, #1d2327);
    color: var(--mmpvt-popup-text, #f0f0f1);
    padding: 12px 20px;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
    z-index: 99999 !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    line-height: 1.4;
    transition: transform 0.3s ease;
}

.mmpvt-cart-status-popup.mmpvt-popup-visible {
    transform: translateX(-50%) translateY(0);
}

.mmpvt-popup-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.mmpvt-popup-count {
    font-weight: 700;
}

.mmpvt-popup-total {
    font-weight: 600;
}

.mmpvt-popup-note {
    display: block;
    width: 100%;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.7;
    margin-top: 0;
}

.mmpvt-popup-view-cart {
    color: var(--mmpvt-popup-link, #72aee6);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.15s;
}

.mmpvt-popup-view-cart:hover {
    color: color-mix(in srgb, var(--mmpvt-popup-link, #72aee6), #ffffff 35%);
}

.mmpvt-popup-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
    flex-shrink: 0;
}

.mmpvt-popup-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--mmpvt-popup-text, #fff) 30%, transparent);
    border-top-color: var(--mmpvt-popup-text, #fff);
    border-radius: 50%;
    animation: mmpvt-spin 0.7s linear infinite;
}

.mmpvt-popup-spinner.mmpvt-spinner-active {
    display: inline-block;
}

@keyframes mmpvt-spin {
    to { transform: rotate(360deg); }
}

/* Mobile: full-width bar */
@media (max-width: 600px) {
    .mmpvt-cart-status-popup {
        max-width: none;
        width: 100%;
        left: 0;
        transform: translateY(100%);
        border-radius: 0;
        padding: 22px 20px;
        font-size: 14px;
    }
    .mmpvt-cart-status-popup.mmpvt-popup-visible {
        transform: translateY(0);
    }
}

/* =========================================================================
   Image Zoom
   ========================================================================= */

/* Zoomable figure - cursor + magnifier badge */
.mmpvt-image.mmpvt-image-zoomable {
    position: relative;
    cursor: zoom-in;
}

/* Magnifier badge - hidden by default, shown only when zoom is active for that context */
.mmpvt-image.mmpvt-image-zoomable::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: rgba(0,0,0,0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/14px no-repeat;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

/* Show badge on desktop hover (desktop zoom enabled) */
.mmpvt-image.mmpvt-zoom-desktop:hover::after {
    opacity: 1;
}

/* Always show badge on mobile (no hover, tap hint) */
@media (max-width: 767px) {
    .mmpvt-image.mmpvt-zoom-mobile::after {
        opacity: 1;
    }
}

/* Lightbox overlay */
.mmpvt-zoom-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    align-items: center;
    justify-content: center;
}

.mmpvt-zoom-overlay.mmpvt-zoom-visible {
    display: flex !important;
}

.mmpvt-zoom-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.82);
}

.mmpvt-zoom-content {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mmpvt-zoom-img {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    display: block;
}

.mmpvt-zoom-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 32px;
    height: 32px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    color: #1d2327;
    transition: background 0.15s;
    z-index: 2;
}

.mmpvt-zoom-close:hover {
    background: #f0f0f0;
}

/* Prevent body scroll when lightbox open */
body.mmpvt-zoom-open {
    overflow: hidden !important;
}

/* =========================================================================
   Image Hover Zoom Popup
   ========================================================================= */

.mmpvt-hover-zoom-popup {
    position: fixed !important;
    z-index: 99998 !important;
    pointer-events: auto !important;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
    background: #fff;
    padding: 4px;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
    line-height: 0;
}

.mmpvt-hover-zoom-popup.mmpvt-hover-zoom-visible {
    opacity: 1;
    transform: scale(1);
}

.mmpvt-hover-zoom-popup img {
    display: block;
    max-width: 320px;
    max-height: 320px;
    width: auto;
    height: auto;
    border-radius: 3px;
}

/* =========================================================================
   New Badge - Recent Variation Indicator
   ========================================================================= */

.mmpvt-new-badge {
    display: inline-block;
    padding: 2px 6px;
    margin-left: 4px;
    border-radius: 3px;
    background-color: #2e7d32;
    color: #fff;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}

/* =========================================================================
   Simple Product Stack - Summary Column Takeover
   =========================================================================

   The simple-product render is split across two zones that map to native
   WC summary hook priorities 10 (Pre-Cart Zone) and 30 (Cart Zone). Each
   zone is a separate .mmpvt-simple-section container and theme/plugin
   callbacks hooked between priorities 11 and 29 render between them.

   Field content emits native WC summary markup where an equivalent exists
   (p.price, p.stock, div.woocommerce-product-details__short-description)
   so theme CSS applies automatically. The quantity input uses LVT's own
   .mmpvt-qty-wrapper (no outer .quantity div) since that container was a
   collision point with heavy themes like XStore that forced it into
   column layout.

   CSS discipline: no !important on decorative properties. Theme wins.
   ========================================================================= */

.mmpvt-simple-stack {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Inter-field spacing only. No borders, no backgrounds - parity with theme
   is the goal, decoration would fight the theme's summary styling. */
.mmpvt-simple-stack .mmpvt-simple-field {
    margin: 0 0 0.75em;
}

.mmpvt-simple-stack .mmpvt-simple-field:last-child {
    margin-bottom: 0;
}

/* Fields with no native WC summary equivalent: sku, weight_html, dimensions_html.
   Minimal label + value pattern, inherits body text color and font. */
.mmpvt-simple-stack .mmpvt-simple-field-label {
    font-weight: 600;
    margin-right: 0.35em;
}

.mmpvt-simple-stack .mmpvt-simple-field-value {
    font-weight: normal;
}

/* The native WC quantity/button wrap. Class `cart` is on the wrapper so plugin
   and theme CSS that targets `.cart` inside a product summary still matches.
   No decorative rules here - theme styling for form.cart flows through. */
.mmpvt-simple-stack .mmpvt-simple-cart-wrap {
    /* Structural: keep qty + button on one line where theme allows. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
}

/* Cart status indicator (Standard cart mode only). Sits below the qty/button
   row. Full-width block so badge + trash icon, or text + Remove link, have
   room to breathe. JS toggles the visibility of the contained elements. */
.mmpvt-simple-stack .mmpvt-simple-cart-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.5em;
    min-height: 1.2em; /* reserve the line so layout does not jump on populate */
}

/* =========================================================================
   Color Scheme Elevation
   =========================================================================

   When a named preset or Custom scheme is active, the LVT container carries
   the .mmpvt-scheme-active class. These scoped rules add one class of
   specificity so they beat typical theme rules targeting semantic elements
   (.woocommerce p.stock, p.price, .description) without using !important.

   On Default scheme, the class is absent from all containers - none of
   these rules match and today's theme-dominant behavior is preserved.

   See spec §7.3 and §8 for the mechanism.
   ========================================================================= */

/* Stock status */
.mmpvt-scheme-active .mmpvt-col-avail .stock.in-stock {
    color: var(--mmpvt-stock-in-stock, #0f834d);
}

.mmpvt-scheme-active .mmpvt-col-avail .stock.out-of-stock,
.mmpvt-scheme-active .mmpvt-oos-text {
    color: var(--mmpvt-stock-out-of-stock, #b32d2e);
}

/* Price column - everything inside the td (p.price wrappers, del, ins,
   wholesale-ins, any theme-injected spans) inherits the td's body_text
   color. Specificity (0,2,2) beats theme rules targeting .woocommerce
   p.price and also beats the now-colorless default .mmpvt-col-price
   del / ins.mmpvt-wholesale-price rules. The td itself is deliberately
   NOT targeted - it keeps getting --mmpvt-body-text from the normal
   .mmpvt-table tbody td rule. */
.mmpvt-scheme-active td.mmpvt-col-price * {
    color: inherit;
}

/* Short description - same pattern: target children only so the td keeps
   inheriting body_text via the normal tbody td rule. */
.mmpvt-scheme-active td.mmpvt-col-short-desc * {
    color: inherit;
}

/* Restriction warning */
.mmpvt-scheme-active .mmpvt-restriction-notation {
    color: var(--mmpvt-restriction-text, #b32d2e);
}

/* Cart buttons - LVT's own buttons (per-row add-to-cart, simple-product
   add-to-cart via render_cart_button(), and bulk cart). Filled style
   throughout with darken-on-hover. The post-add "View cart" link is
   handled separately below with an outlined-at-rest / filled-on-hover
   inverse treatment to distinguish primary from follow-up action.
   External WC notice buttons (top-of-page .woocommerce-message) are
   deliberately left theme-controlled. !important is necessary because
   themes commonly target .woocommerce button.button.alt at specificity
   (0,3,1) which would otherwise beat us. Functionality is untouched -
   colors only, no layout or event changes. */
.mmpvt-scheme-active .mmpvt-cart-btn,
.mmpvt-scheme-active .mmpvt-bulk-cart-btn {
    background-color: var(--mmpvt-button-bg, #2271b1) !important;
    color: var(--mmpvt-button-text, #ffffff) !important;
    border-color: var(--mmpvt-button-bg, #2271b1) !important;
}

/* Hover darkens the button background by ~12% via color-mix, matching
   the popup-link hover pattern. No separate catalog picker needed. */
.mmpvt-scheme-active .mmpvt-cart-btn:hover,
.mmpvt-scheme-active .mmpvt-bulk-cart-btn:hover {
    background-color: color-mix(in srgb, var(--mmpvt-button-bg, #2271b1), #000 12%) !important;
    color: var(--mmpvt-button-text, #ffffff) !important;
    border-color: color-mix(in srgb, var(--mmpvt-button-bg, #2271b1), #000 12%) !important;
}

/* Post-add "View cart" link (WC injects a.added_to_cart.wc-forward next
   to the add-to-cart button after AJAX add). Rendered as an OUTLINED /
   secondary button at rest to distinguish it from the filled primary
   add-to-cart sitting beside it - this visual contrast is a usability
   cue ("you already added; this is the follow-up action"). On hover,
   flips to filled for an explicit action affordance. Reuses the same
   button_bg / button_text vars; no extra catalog entries. */
.mmpvt-scheme-active .added_to_cart {
    display: inline-block !important;
    margin-left: 8px;
    text-align: center !important;
    background-color: transparent !important;
    color: var(--mmpvt-button-bg, #2271b1) !important;
    border-color: var(--mmpvt-button-bg, #2271b1) !important;
}

.mmpvt-scheme-active .added_to_cart:hover {
    background-color: var(--mmpvt-button-bg, #2271b1) !important;
    color: var(--mmpvt-button-text, #ffffff) !important;
    border-color: var(--mmpvt-button-bg, #2271b1) !important;
}

/* NEW badge */
.mmpvt-scheme-active .mmpvt-new-badge {
    background-color: var(--mmpvt-new-badge-bg, #2e7d32);
    color: var(--mmpvt-new-badge-text, #ffffff);
}

/* Available Options title - LVT's h2 above the table. No default-scheme
   rule; on Default the theme's h2 color wins (today's appearance). On
   named-preset / Custom the scheme supplies its own title color so the
   heading harmonizes with the palette below it. */
.mmpvt-scheme-active .mmpvt-section-title {
    color: var(--mmpvt-section-title, inherit);
}