/* Maysynthel Variation Image Selector v0.1.12 */
.mvis-first-row > th.label {
    display: none !important;
}

.mvis-first-row > td.value {
    width: 100% !important;
    padding-left: 0 !important;
}

.mvis-selector,
.mvis-simple-selector {
    margin: 2px 0 20px;
    width: 100%;
}

/* Selected first-attribute value only: no Color/Style/Type label. */
.mvis-current-value {
    min-height: 1.45em;
    margin: 0 0 10px;
    font-family: "Futura PT", Futura, "Century Gothic", Arial, sans-serif !important;
    font-size: 17px;
    line-height: 1.45;
    font-weight: 300 !important;
    letter-spacing: 0;
    color: inherit;
}

.mvis-current-value.is-empty {
    color: transparent;
    user-select: none;
}

.mvis-swatch-reset-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/*
 * frontend.js owns the exact responsive width. Desktop keeps the approved
 * 52px geometry; v0.1.12 lets phone tiles grow responsively up to 64px while
 * keeping five per row where possible and four on narrower phones.
 */
.mvis-swatches {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: fit-content;
    min-width: 0 !important;
    max-width: calc(100% - 48px);
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* The reset X is a sibling of the whole swatch grid, not of an individual row.
 * Parent align-items:center keeps it vertically centered whether the swatches
 * occupy one line or wrap onto several lines. The parent gap gives an exact
 * 24px separation from the swatch grid. */
.mvis-swatch-reset-row > .mvis-reset-variations {
    flex: 0 0 42px !important;
    align-self: center !important;
    margin: 0 !important;
}

/*
 * These 52px values are the desktop/no-JS fallback. frontend.js can override
 * them inline on compact/mobile layouts, while keeping hover/focus/active
 * geometry identical so selecting a variation never moves a tile.
 */
.mvis-swatch,
.mvis-swatch:hover,
.mvis-swatch:focus,
.mvis-swatch:active {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative;
    display: inline-flex !important;
    flex: 0 0 52px !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 1px !important;
    overflow: hidden;
    border: 1px solid #d6d6d6 !important;
    border-radius: 2px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: inherit;
    line-height: 1 !important;
    vertical-align: top;
    cursor: pointer;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
}

/* Suppress theme/button ripple or decorative pseudo-elements on the image tiles. */
.mvis-selector button.mvis-swatch::before,
.mvis-selector button.mvis-swatch::after,
form.variations_form .mvis-selector button.mvis-swatch::before,
form.variations_form .mvis-selector button.mvis-swatch::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    transform: none !important;
}

/* Higher-specificity guard against ShopEngine/theme button motion rules. */
form.variations_form .mvis-selector button.mvis-swatch,
form.variations_form .mvis-selector button.mvis-swatch:hover,
form.variations_form .mvis-selector button.mvis-swatch:focus,
form.variations_form .mvis-selector button.mvis-swatch:active {
    top: auto !important;
    left: auto !important;
    box-sizing: border-box !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 1px !important;
    border: 1px solid #d6d6d6 !important;
    border-radius: 2px !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    box-shadow: none !important;
}

form.variations_form .mvis-selector button.mvis-swatch.is-selected,
form.variations_form .mvis-selector button.mvis-swatch.is-selected:hover,
form.variations_form .mvis-selector button.mvis-swatch.is-selected:focus,
form.variations_form .mvis-selector button.mvis-swatch.is-selected:active {
    border-color: #4a4a4a !important;
}

.mvis-swatch:hover:not(:disabled) {
    border-color: #9a9a9a !important;
}

.mvis-swatch:focus {
    outline: none !important;
}

.mvis-swatch:focus-visible {
    outline: 1px solid #4a4a4a !important;
    outline-offset: 2px;
}

.mvis-swatch.is-selected,
.mvis-swatch.is-selected:hover,
.mvis-swatch.is-selected:focus,
.mvis-swatch.is-selected:active {
    border: 1px solid #4a4a4a !important;
    padding: 1px !important;
    transform: none !important;
}

.mvis-swatch.is-disabled,
.mvis-swatch:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.mvis-swatch-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 1px;
    background: #fff;
}

.mvis-swatch img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Compact selected-state badge, kept INSIDE the image tile. */
.mvis-check {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #4a4a4a;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    box-shadow: none;
    pointer-events: none;
}

.mvis-swatch.is-selected .mvis-check {
    display: flex;
}

/* Later native variation dropdowns are hidden until frontend.js has applied the
 * final responsive width. This removes the visible width jump after page refresh. */
select[data-mvis-later-select="1"] {
    visibility: hidden !important;
}

form.variations_form.mvis-layout-ready select[data-mvis-later-select="1"] {
    visibility: visible !important;
}

/* JS gives this row its exact layout width and responsive left/right offset. */
.mvis-swatch-reset-row {
    box-sizing: border-box !important;
}

/* Keep WooCommerce's native select alive for its variation engine, but not visible. */
.mvis-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.mvis-simple-selector {
    display: flex;
    align-items: center;
}

.mvis-simple-swatch {
    cursor: default;
}

/* Native WooCommerce reset stays where WooCommerce placed it, but becomes X-only. */
/* The real WooCommerce reset link is hidden; the visible button has no
 * reset_variations class, so theme/ShopEngine red reset pseudo-icons cannot attach. */
.mvis-native-reset-variations,
.mvis-native-reset-variations:hover,
.mvis-native-reset-variations:focus,
.mvis-native-reset-variations:active {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

.mvis-native-reset-variations::before,
.mvis-native-reset-variations::after {
    content: none !important;
    display: none !important;
}

.mvis-reset-variations,
.mvis-reset-variations:hover,
.mvis-reset-variations:focus,
.mvis-reset-variations:active {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #d6d6d6 !important;
    border-radius: 2px !important;
    background: #fff !important;
    color: #4a4a4a !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.mvis-reset-variations::before,
.mvis-reset-variations::after {
    content: none !important;
    display: none !important;
}

.mvis-reset-variations:hover {
    border-color: #9a9a9a !important;
}

.mvis-reset-variations:focus {
    outline: none !important;
}

.mvis-reset-variations:focus-visible {
    outline: 1px solid #4a4a4a !important;
    outline-offset: 2px;
}

.mvis-reset-icon {
    display: block !important;
    margin: -1px 0 0 !important;
    padding: 0 !important;
    font-family: Arial, sans-serif !important;
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
    color: #4a4a4a !important;
    pointer-events: none;
}

/* Customer account / thank-you order item: selected snapshot image at 124x124. */
.mvis-account-order-item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    vertical-align: middle;
    max-width: 100%;
}

.mvis-account-order-image {
    flex: 0 0 124px;
}

.mvis-account-order-thumbnail {
    display: block;
    box-sizing: border-box;
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    height: 124px !important;
    min-height: 124px !important;
    max-height: 124px !important;
    object-fit: cover;
    border: 1px solid #d7d7d7;
    border-radius: 2px;
}

.mvis-account-order-text {
    display: inline-flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.mvis-account-order-name {
    display: block;
}

.mvis-account-order-value {
    display: block;
    font-size: .92em;
    line-height: 1.35;
    font-weight: 400;
    opacity: .82;
}

/* Useful when WooCommerce/YayMail keeps our class and does not strip inline styles. */
.mvis-email-thumbnail {
    box-sizing: border-box !important;
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    height: 124px !important;
    min-height: 124px !important;
    max-height: 124px !important;
    object-fit: cover !important;
    border: 1px solid #d7d7d7 !important;
    border-radius: 2px !important;
}



/* Product-gallery thumbnail overflow control.
 * Desktop: collapse only when there are more than 10 thumbnails.
 * Mobile: collapse only when there are more than 8 thumbnails.
 * The first hidden visual row stays full thumbnail-height but progressively
 * fades into the page. This gives a clear "more images below" cue without
 * exposing the rest of the gallery until the user chooses Show all. */
.woocommerce-product-gallery .mvis-gallery-thumbs > .mvis-thumb-overflow {
    display: none !important;
}

.woocommerce-product-gallery .mvis-gallery-thumbs > .mvis-thumb-peek {
    display: list-item !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    opacity: .62 !important;
    pointer-events: none !important;
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, .78) 0%,
        rgba(0, 0, 0, .62) 28%,
        rgba(0, 0, 0, .34) 58%,
        rgba(0, 0, 0, .10) 82%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, .78) 0%,
        rgba(0, 0, 0, .62) 28%,
        rgba(0, 0, 0, .34) 58%,
        rgba(0, 0, 0, .10) 82%,
        rgba(0, 0, 0, 0) 100%
    );
}

.woocommerce-product-gallery .mvis-gallery-thumbs > .mvis-thumb-peek > a {
    display: block !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.woocommerce-product-gallery .mvis-gallery-thumbs > .mvis-thumb-peek img {
    display: block !important;
    margin-top: 0 !important;
    opacity: .94 !important;
}

.woocommerce-product-gallery .mvis-gallery-thumbs.is-expanded > .mvis-thumb-overflow,
.woocommerce-product-gallery .mvis-gallery-thumbs.is-expanded > .mvis-thumb-peek {
    display: list-item !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.woocommerce-product-gallery .mvis-gallery-thumbs.is-expanded > .mvis-thumb-peek > a {
    pointer-events: auto !important;
}

.woocommerce-product-gallery .mvis-gallery-thumbs.is-expanded > .mvis-thumb-peek img {
    opacity: 1 !important;
}

/* Full-width gallery control: a subtle line, translucent arrow control and
 * visible Show all / Show less label. */
.woocommerce-product-gallery .mvis-gallery-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(55, 55, 55, .88) !important;
    cursor: pointer !important;
}

.woocommerce-product-gallery .mvis-gallery-toggle::before {
    content: '' !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 14px !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: rgba(120, 120, 120, .34) !important;
    pointer-events: none !important;
}

.woocommerce-product-gallery .mvis-gallery-toggle:hover,
.woocommerce-product-gallery .mvis-gallery-toggle:focus {
    background: transparent !important;
    box-shadow: none !important;
}

.woocommerce-product-gallery .mvis-gallery-toggle:focus {
    outline: none !important;
}

.woocommerce-product-gallery .mvis-gallery-toggle:focus-visible {
    outline: 1px solid #555555 !important;
    outline-offset: 2px !important;
}

.woocommerce-product-gallery .mvis-gallery-toggle-icon {
    position: relative !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 28px !important;
    min-height: 28px !important;
    border: 1px solid rgba(135, 135, 135, .28) !important;
    border-radius: 4px !important;
    background: rgba(245, 245, 245, .68) !important;
    backdrop-filter: blur(1px);
    pointer-events: none !important;
}

.woocommerce-product-gallery .mvis-gallery-toggle-icon::before {
    content: '' !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 9px !important;
    height: 9px !important;
    margin-top: -4px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
    transition: transform .16s ease, margin .16s ease !important;
}

.woocommerce-product-gallery .mvis-gallery-toggle.is-expanded .mvis-gallery-toggle-icon::before {
    margin-top: 4px !important;
    transform: rotate(225deg) !important;
}

.woocommerce-product-gallery .mvis-gallery-toggle-label {
    position: relative !important;
    z-index: 1 !important;
    display: inline-block !important;
    padding: 0 8px !important;
    background: #ffffff !important;
    color: rgba(45, 45, 45, .92) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    pointer-events: none !important;
}


@media (max-width: 767px) {
    .mvis-current-value {
        font-size: 16px;
        text-align: center;
    }

    /* JS keeps 52px tiles and calculates whether five or four fit per row. */
    .mvis-swatches {
        max-width: 100%;
    }

    .mvis-account-order-item {
        align-items: flex-start;
        gap: 10px;
    }
}