.bulk-matrix-wrapper {
    margin-top:30px;
    --bulk-border:#e7e7e7;
    --bulk-muted:#787878;
    --bulk-dark:#151515;
}

.bulk-matrix-table-shell {
    width:100%;
    overflow-x:auto;
    border:1px solid var(--bulk-border);
    border-radius:10px;
    background:#fff;
    box-shadow:0 8px 30px rgba(0,0,0,.045);
    -webkit-overflow-scrolling:touch;
}

.bulk-matrix-table {
    width:100%;
    min-width:680px;
    table-layout:fixed;
    border-collapse:separate;
    border-spacing:0;
    background:white;
    margin:0;
}

.bulk-matrix-table th,
.bulk-matrix-table td {
    box-sizing:border-box;
    border:0;
    border-right:1px solid var(--bulk-border);
    border-bottom:1px solid var(--bulk-border);
    text-align:center;
    text-transform: uppercase;
    vertical-align:middle;
    padding:8px 6px;
}

.bulk-matrix-table tr > *:last-child {
    border-right:0;
}

.bulk-matrix-table tbody tr:last-child > * {
    border-bottom:0;
}

.bulk-matrix-table thead th {
    height:54px;
    background:#fafafa;
    color:#6f6f6f;
    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;
}

.bulk-matrix-table tbody td {
    height:82px;
    min-height:82px;
}

.bulk-matrix-table tr > *:first-child {
    width:68px;
}

.bulk-matrix-table tr > *:nth-child(2) {
    width:105px;
}

.bulk-matrix-table .variation-label {
    color:#555;
    font-size:12px;
    font-weight:600;
    line-height:1.25;
}

.bulk-matrix-table input {
    display:block;
    width:64px;
    height:38px;
    box-sizing:border-box;
    margin:0 auto;
    padding:5px 6px;
    text-align:center;
    border:1px solid #d5d5d5;
    border-radius:5px;
    background:#fff;
    color:#222;
    font-size:14px;
    line-height:1;
    transition:border-color .2s, box-shadow .2s;
}

.bulk-matrix-table input:focus {
    outline:none;
    border-color:#222;
    box-shadow:0 0 0 2px rgba(0,0,0,.08);
}

.matrix-cell-inner {
    display:grid;
    grid-template-rows:38px 17px;
    align-items:center;
    justify-items:center;
    gap:4px;
    min-height:59px;
}

.matrix-empty-mark {
    display:flex;
    align-items:center;
    justify-content:center;
    height:38px;
    color:#b0b0b0;
    font-size:18px;
    font-weight:300;
}

.anpher-stock-slot {
    display:block;
    width:100%;
    min-height:17px;
    color:#777;
    font-size:10px;
    font-weight:500;
    line-height:17px;
    letter-spacing:.01em;
    text-align:center;
    text-transform:none;
    white-space:nowrap;
}

.anpher-stock.low-stock {
    color:#777;
}

.variation-image img {
    width:60px;
}

.bulk-summary {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:18px;
    padding:16px 18px;
    border:1px solid #ebebeb;
    border-radius:10px;
    background:#fff;
    box-shadow:0 8px 26px rgba(0,0,0,.04);
}

.bulk-totals {
    color:#777;
    font-size:13px;
    line-height:1.7;
}

.bulk-totals span {
    color:#181818;
    font-weight:700;
}

.bulk-add-button {
    min-width:210px;
    min-height:48px;
    background:#111;
    color:#fff;
    padding:14px 26px;
    border:none;
    border-radius:6px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    cursor:pointer;
    transition:transform .2s, background .2s, opacity .2s;
}

.bulk-add-button:hover {
    background:#303030;
    transform:translateY(-1px);
}

.bulk-add-button.is-loading,
.bulk-add-button:disabled {
    opacity:.65;
    cursor:wait;
    transform:none;
}

.bulk-message .success {
    margin-top:10px;
    color:green;
}

.bulk-message .error {
    margin-top:10px;
    color:red;
}

.bulk-toast {
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:999999;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto 26px;
    align-items:center;
    gap:13px;
    width:calc(100% - 48px);
    max-width:470px;
    box-sizing:border-box;
    padding:16px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:linear-gradient(135deg,#181818,#292929);
    color:#fff;
    box-shadow:0 18px 55px rgba(0,0,0,.28);
    opacity:0;
    visibility:hidden;
    transform:translateY(18px) scale(.98);
    transition:opacity .3s ease, transform .3s ease, visibility .3s;
}

.bulk-toast.show {
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

.bulk-toast-icon {
    position:relative;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#fff;
}

.bulk-toast-icon span:before {
    content:"";
    position:absolute;
    left:15px;
    top:11px;
    width:9px;
    height:15px;
    border:solid #111;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.bulk-toast.is-error {
    background:linear-gradient(135deg,#291515,#481d1d);
}

.bulk-toast.is-error .bulk-toast-icon {
    background:#ffeded;
}

.bulk-toast.is-error .bulk-toast-icon span:before,
.bulk-toast.is-error .bulk-toast-icon span:after {
    content:"";
    position:absolute;
    left:20px;
    top:11px;
    width:2px;
    height:20px;
    border:0;
    background:#b42318;
    transform:rotate(45deg);
}

.bulk-toast.is-error .bulk-toast-icon span:after {
    transform:rotate(-45deg);
}

.bulk-toast-copy {
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:2px;
}

.bulk-toast-title {
    color:#fff;
    font-size:14px;
    line-height:1.25;
}

.bulk-toast-message {
    overflow:hidden;
    color:rgba(255,255,255,.72);
    font-size:12px;
    line-height:1.35;
    text-overflow:ellipsis;
}

.bulk-toast-cart {
    padding:9px 12px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:6px;
    color:#fff !important;
    font-size:11px;
    font-weight:700;
    line-height:1;
    text-decoration:none !important;
    white-space:nowrap;
}

.bulk-toast-cart:hover {
    border-color:#fff;
    background:#fff;
    color:#111 !important;
}

.bulk-toast-close {
    width:26px;
    height:26px;
    padding:0;
    border:0;
    background:transparent;
    color:rgba(255,255,255,.62);
    font-size:22px;
    line-height:24px;
    cursor:pointer;
}

.anpher-color,
.anpher-image-swatch{
    width:34px;
    height:34px;
    display:inline-block;
    border-radius:50%;
    border:1px solid #ddd;
    overflow:hidden;
}

.anpher-image-swatch img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.anpher-tooltip{
    position:relative;
    display:inline-block;
}

.anpher-tooltip-text{
    position:absolute;
    bottom:120%;
    left:50%;
    transform:translateX(-50%);
    background:#000;
    color:#fff;
    padding:5px 8px;
    font-size:11px;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:.2s;
    z-index:999;
}

.anpher-tooltip:hover .anpher-tooltip-text{
    opacity:1;
    visibility:visible;
}

.anpher-swatch-head{
    text-align:center;
    vertical-align:middle;
}

.anpher-color-swatch,
.anpher-image-swatch{
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid #ddd;
    overflow:hidden;
    margin:auto;
}

.anpher-color-swatch.jsweb-shape-circle,
.anpher-image-swatch.jsweb-shape-circle {
    border-radius:50%;
}

.anpher-color-swatch.jsweb-shape-square,
.anpher-image-swatch.jsweb-shape-square {
    border-radius:4px;
}

.anpher-image-swatch img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.anpher-tooltip{
    position:relative;
    display:inline-block;
}

.anpher-tooltip-text{
    position:absolute;
    bottom:120%;
    left:50%;
    transform:translateX(-50%);
    background:#000;
    color:#fff;
    padding:5px 8px;
    border-radius:4px;
    font-size:11px;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:.2s;
    z-index:9999;
}

.anpher-tooltip:hover .anpher-tooltip-text{
    opacity:1;
    visibility:visible;
}

.anpher-text-swatch{
    font-size:12px;
}

.anpher-loop-swatches{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:8px;
    flex-wrap:wrap;
}

.anpher-loop-swatch .anpher-color-swatch,
.anpher-loop-swatch .anpher-image-swatch{
    width:22px;
    height:22px;
    min-width:22px;
    border:1px solid #ddd;
}

.anpher-swatch-disabled{
    position:relative;
    opacity:.5;
}

.anpher-swatch-disabled:after{
    content:'';
    position:absolute;
    top:-4px;
    left:50%;
    width:2px;
    height:44px;
    background:#000;
    transform:rotate(45deg);
}

.anpher-loop-swatches .anpher-swatch-disabled:after{height:28px}

.jsweb-more-swatches {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:24px;
    height:22px;
    color:#555;
    font-size:11px;
    font-weight:600;
    line-height:1;
}

.jsweb-loop-sizes {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
    margin-top:7px;
}

.jsweb-loop-size {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:28px;
    height:24px;
    box-sizing:border-box;
    padding:0 7px;
    border:1px solid #d8d8d8;
    border-radius:3px;
    background:#fff;
    color:#333;
    font-size:10px;
    font-weight:600;
    line-height:1;
    text-transform:uppercase;
}

.jsweb-loop-size.is-disabled {
    opacity:.42;
}

.jsweb-loop-size.is-disabled:after {
    content:"";
    position:absolute;
    left:3px;
    right:3px;
    top:50%;
    height:1px;
    background:#c62828;
    transform:rotate(-25deg);
}

.jsweb-more-sizes {
    display:inline-flex;
    align-items:center;
    height:24px;
    color:#555;
    font-size:11px;
    font-weight:600;
}

.jsweb-swatch-field .jsweb-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;
    white-space:nowrap !important;
    border:0 !important;
}

.jsweb-variation-swatches {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    min-height:38px;
}

.jsweb-swatch-option {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    height:42px;
    box-sizing:border-box;
    padding:4px 10px;
    border:1px solid #d8d8d8;
    border-radius:5px;
    background:#fff;
    color:#222;
    box-shadow:none;
    cursor:pointer;
    transition:border-color .2s, box-shadow .2s, opacity .2s;
}

.jsweb-variation-swatches.is-color .jsweb-swatch-option {
    width:38px;
    min-width:38px;
    height:38px;
    padding:3px;
}

.jsweb-variation-swatches.is-color.is-shape-circle .jsweb-swatch-option {
    border-radius:50%;
}

.jsweb-variation-swatches.is-color.is-shape-square .jsweb-swatch-option {
    border-radius:5px;
}

.jsweb-variation-swatches.is-color .jsweb-swatch-option .anpher-tooltip {
    display:flex;
    width:100%;
    height:100%;
}

.jsweb-swatch-option .anpher-color-swatch,
.jsweb-swatch-option .anpher-image-swatch {
    width:100%;
    height:100%;
    margin:0;
    border:0;
    box-sizing:border-box;
    pointer-events:none;
}

.jsweb-swatch-option:hover,
.jsweb-swatch-option.selected {
    border-color:#111;
    box-shadow:0 0 0 1px #111;
}

.jsweb-swatch-option.disabled {
    opacity:.38;
    cursor:not-allowed;
}

.jsweb-swatch-option.disabled:before,
.jsweb-swatch-option.disabled:after {
    content:"";
    position:absolute;
    top:50%;
    left:5px;
    right:5px;
    height:1.5px;
    z-index:5;
    background:#d32727;
    transform:rotate(45deg);
    pointer-events:none;
}

.jsweb-swatch-option.disabled:after {
    transform:rotate(-45deg);
}

.jsweb-label-text {
    font-size:12px;
    font-weight:600;
    line-height:1;
}

@media (max-width: 640px) {
    .bulk-summary {
        align-items:stretch;
        flex-direction:column;
        gap:14px;
    }

    .bulk-add-button {
        width:100%;
    }

    .bulk-toast {
        right:12px;
        bottom:12px;
        grid-template-columns:38px minmax(0,1fr) 26px;
        width:calc(100% - 24px);
        padding:14px;
    }

    .bulk-toast-icon {
        width:38px;
        height:38px;
    }

    .bulk-toast-icon span:before {
        left:14px;
        top:9px;
    }

    .bulk-toast.is-error .bulk-toast-icon span:before,
    .bulk-toast.is-error .bulk-toast-icon span:after {
        left:18px;
        top:9px;
    }

    .bulk-toast-cart {
        grid-column:2;
        justify-self:start;
        margin-top:4px;
    }

    .bulk-toast-close {
        grid-column:3;
        grid-row:1;
    }
}