/**
 * CSS สำหรับแสดงกรอบ + กากบาททับตัวเลือกสินค้าที่หมดสต็อก
 * เวอร์ชัน 1.2.5
 */

:root {
    --amp-ath-oos-cross-color: #ef5da8;
    --amp-ath-oos-border-color: #ff5a5f;
    --amp-ath-oos-text-color: #b8b8b8;
    --amp-ath-oos-bg-color: #f6f6f6;
    --amp-ath-oos-cross-width: 3px;
}

.variations .variable-item.out-of-stock,
.variations .swatch-item.out-of-stock,
.variations .variation-item.out-of-stock,
.variations [data-value].out-of-stock,
.variations [data-option].out-of-stock {
    position: relative !important;
    overflow: hidden !important;
    border: 2px solid var(--amp-ath-oos-border-color) !important;
    color: var(--amp-ath-oos-text-color) !important;
    background: var(--amp-ath-oos-bg-color) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

.variations .variable-item.out-of-stock *,
.variations .swatch-item.out-of-stock *,
.variations .variation-item.out-of-stock *,
.variations [data-value].out-of-stock *,
.variations [data-option].out-of-stock * {
    color: var(--amp-ath-oos-text-color) !important;
}

.variations .variable-item.out-of-stock::before,
.variations .swatch-item.out-of-stock::before,
.variations .variation-item.out-of-stock::before,
.variations [data-value].out-of-stock::before,
.variations [data-option].out-of-stock::before,
.variations .variable-item.out-of-stock::after,
.variations .swatch-item.out-of-stock::after,
.variations .variation-item.out-of-stock::after,
.variations [data-value].out-of-stock::after,
.variations [data-option].out-of-stock::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 86% !important;
    height: var(--amp-ath-oos-cross-width) !important;
    background: var(--amp-ath-oos-cross-color) !important;
    border-radius: 999px !important;
    z-index: 20 !important;
    display: block !important;
    transform-origin: center !important;
}

.variations .variable-item.out-of-stock::before,
.variations .swatch-item.out-of-stock::before,
.variations .variation-item.out-of-stock::before,
.variations [data-value].out-of-stock::before,
.variations [data-option].out-of-stock::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

.variations .variable-item.out-of-stock::after,
.variations .swatch-item.out-of-stock::after,
.variations .variation-item.out-of-stock::after,
.variations [data-value].out-of-stock::after,
.variations [data-option].out-of-stock::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.variations .variable-item:not(.out-of-stock)::before,
.variations .variable-item:not(.out-of-stock)::after,
.variations .swatch-item:not(.out-of-stock)::before,
.variations .swatch-item:not(.out-of-stock)::after,
.variations .variation-item:not(.out-of-stock)::before,
.variations .variation-item:not(.out-of-stock)::after {
    display: none !important;
}