p {
    margin: 0px;
    
}
.game-listing {
    padding: 60px 0px;
    font-size: 14px;
    color: #000;
}
.game-listing .container {
    margin: 0px auto;
    display: flex;
    gap: 30px;
}
.game-listing .container .col-left {
    max-width: 251px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.game-listing .deck-details span {
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 20px;
    display: block;
}
.game-listing .container .col-right {
    width: 100%;
}
.game-listing .col-left .game-img img {
    width: 100%;
}
.game-listing .container .col-left .price {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0px 0px 10px;
}
.game-listing .container .col-left .price span.foil-box {
    display: inline-block;
    height: calc(1rem - 2px);
    width: .5rem;
    border-radius: 1px;
    vertical-align: -1px;
    background-color: #fa8bff;
    background-image: linear-gradient(45deg, #FA8BFF 20%, #2BD2FF 52%, #2BFF88 80%);
}
.game-listing .container .col-left .price p {
    margin: 0px;
}
.multi-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 230px;
    margin: 0px auto;
}
.multi-buttons .button.solid, .multi-buttons .button:hover {
    background: #731fa1;
    color: #fff;
}
.multi-buttons .button {
    border: 1px solid #731fa1;
    padding: 5.25px 10.5px;
    border-radius: 0.375rem;
    color: #731fa1;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    text-align: left;
    gap: 10px;
}
.multi-buttons .button span:nth-child(2) {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.multi-buttons .button svg {
    width: 22px;
    height: 14px;
}
.col-right .view-list {
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 5px;
    text-align: right;
}
.col-right .view-list select {
    background: #fff;
    padding: .375rem 2.25rem .375rem .75rem;
    border-radius: 0.375rem;
    line-height: 1.5;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    -webkit-appearance: none;
    border: 1px solid #f0f0f0;
}
.col-right .view-list select:focus-visible {
    outline: none;
}
.col-right .view-list label {
    font-weight: 300 !important;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-end;
}
.multi-view-list .col {
    position: relative;
    display: inline-block;
    margin-bottom: 0;
    padding: 0 0 32px 0;
    margin-right: 25px;
    page-break-inside: avoid;
    break-inside: avoid;
    width: calc(100% / 4 - 28px);
    vertical-align: top;
    float: left;
}
.multi-view-list {
    padding: 20px 0px;
    display: block;
}
.multi-view-list .col h5 {
    margin: 0px;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 0 4px 0;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.2;
}
.multi-view-list .list {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    gap: 0px;
}
.multi-view-list .details img.list-img {
    display: none;
}
.multi-view-list .details .more {
    position: relative;
    top: 1px;
}
.multi-view-list .details .small-icons {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
    align-items: center;
}
.multi-view-list .details {
    display: flex;
    gap: 5px;
    border-bottom: 1px solid #f0f0f0;
    padding: 4px 0px;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    position: relative;
    
}
.multi-view-list.table .details, .multi-view-list.condensedTable .details, .multi-view-list.spoiler .details{
    top:0px !important;
}
.multi-view-list .details:last-child {
    border: none;
}
.multi-view-list .details p.name {
    width: 100%;
}
.multi-view-list .details span.number-count:before {
    display: inline-block;
    height: 6px;
    width: 6px;
    background-color: #fa8bff;
    background-image: linear-gradient(45deg, #FA8BFF 20%, #2BD2FF 52%, #2BFF88 80%);
    border-radius: 100% 100%;
    content: "";
}
.multi-view-list .details span.number-count {
    width: 25px;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-start;
}
.multi-view-list .details .small-icons span {
    font-size: 12.1px;
    box-shadow: -0.06em .07em 0 #111, 0 .06em 0 #111;
    width: 1em;
    height: 1em;
    border-radius: 1em;
    color: #111;
}
.multi-view-list .details .more .view-more {
    display: none;
    position: absolute;
    top: 24px;
    right: 0;
    width: auto;
    flex-direction: column;
    gap: 0px;
    border: 1px solid #0000002d;
    border-radius: 0.375rem;
    min-width: 10rem;
    background: #fff;
    z-index: 1;
}
.multi-view-list .details .more .view-more.show{
    display: flex;
}
.multi-view-list .details .more i {
    width: 13px;
    height: 13px;
    font-size: 9px;
    border: 1px solid #b3b3b3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 100px;
    color: #b3b3b3;
    cursor: pointer;
}
.multi-view-list .details:hover .more i {
    color: #000;
    border-color: #000;
}
.multi-view-list .details .more .view-more .block {
    padding: 13px;
    border-bottom: 1px solid #0000002d;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.multi-view-list .details .more .view-more .block a {
    text-decoration: none;
    color: #6a6a6a;
    font-weight: 500;
    width: 100%;
    line-height: 1.2;
}

/*********Condensed Table**************/
.multi-view-list.condensedTable .col h5, .multi-view-list.condensedTable .details {
    border: none;
    padding:2px;
}



/*********visual**************/
.multi-view-list.visual, .multi-view-list.spoiler{
    column-count: 1;
}
.multi-view-list.visual .details img.list-img, 
.multi-view-list.spoiler .details img.list-img{
    display: block;
    border-radius: 10px;
    width: 100%;
    aspect-ratio: 2 / 2.86;
}
.multi-view-list.visual .list{
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 4px;
}
.multi-view-list.visual .list .details{
    width: 100%;
    margin-bottom: unset;
    position: relative;
    border: none;
    top: 0px !important;
    margin-top: calc(-100% - -30px);

}
.multi-view-list.visual .list .details .more .view-more, 
.multi-view-list.stacks .details .more .view-more,
.multi-view-list.splitStacks .list .details .more .view-more ,
.multi-view-list.spoiler .list .details .more .view-more {
    right: unset;
    left: 8px;
}
.multi-view-list.visual .col h5, 
.multi-view-list.stacks .col h5, 
.multi-view-list.splitStacks .col h5,
.multi-view-list.spoiler .col h5 {
    border: none;
}
.multi-view-list.visual .list .details span.number-count, 
.multi-view-list.visual p.name, 
.multi-view-list.visual .small-icons,
.multi-view-list.stacks .list .details span.number-count, 
.multi-view-list.stacks p.name, 
.multi-view-list.stacks .small-icons,
.multi-view-list.splitStacks .list .details span.number-count, 
.multi-view-list.splitStacks p.name, 
.multi-view-list.splitStacks .small-icons,
.multi-view-list.spoiler .list .details span.number-count, 
.multi-view-list.spoiler p.name, 
.multi-view-list.spoiler .small-icons   {
    display: none;
}

.multi-view-list .details .more .visual-option {
    display: none;
}
.multi-view-list.visual .details .more .visual-option , 
.multi-view-list.stacks .details .more .visual-option, 
.multi-view-list.splitStacks .details .more .visual-option,
.multi-view-list.spoiler .details .more .visual-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    opacity: 0;
    transition: all 700ms ease-in-out;
}
.multi-view-list.visual .details .more, 
.multi-view-list.stacks .details .more ,
.multi-view-list.splitStacks .details .more,
.multi-view-list.spoiler .details .more {
    position: absolute;
    top: 27px;
    left: 0;
    width: 100%;
}
.multi-view-list.visual .details:hover .more .visual-option, 
.multi-view-list.stacks .details:hover .more .visual-option,
.multi-view-list.splitStacks .details:hover .more .visual-option,
.multi-view-list.spoiler .details:hover .more .visual-option{
    opacity: 1;
}
.multi-view-list.visual .details .more .visual-option i , 
.multi-view-list.stacks .details .more .visual-option i , 
.multi-view-list.splitStacks .details .more .visual-option i ,
.multi-view-list.spoiler .details .more .visual-option i {
    background: #000 !important;
    color: #fff !important;
    fill: #fff !important;
    padding: 5px 1px 5px 1px;
    border: none;
    width: 10px;
    height: auto;
    font-size: 10px;
}
.multi-view-list.visual .details .more .list-option, 
.multi-view-list.stacks .details .more .list-option,
.multi-view-list.splitStacks .details .more .list-option ,
.multi-view-list.spoiler .details .more .list-option  {
    display: none;
}
.multi-view-list .details .more .visual-option span.qty {
    background: #000;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
    font-size: 12px;
}
.multi-view-list.visual .col {
    width: 100%;
    margin: 0;
    float: unset;
}

/*********stack**************/

.multi-view-list.stacks .list, 
.multi-view-list.splitStacks .list {
    position: relative;
    flex-wrap: nowrap;
    flex-grow: 1;
}
.multi-view-list.stacks .details, 
.multi-view-list.splitStacks .details{
    position: relative;
    top: auto !important;
    left: 0;
    right: 0;
    transition: all 0.3s ease;
    overflow: hidden;
    cursor: pointer;
    padding: 0px 5px;
    flex-direction: column;
}

.multi-view-list.stacks .details:not(:first-child), 
.multi-view-list.splitStacks .details:not(:first-child) {
    margin-top: calc(-100% - 28px);
}
.multi-view-list.stacks .details.expanded, 
.multi-view-list.splitStacks .details.expanded{
    height: auto;
    z-index: 1;
}
.multi-view-list.stacks .details:last-child, 
.multi-view-list.splitStacks .details:last-child{
    height: auto;
}
.multi-view-list.stacks .col, 
.multi-view-list.splitStacks .col {
    margin-right: 0;
    width: calc(100% / 6 - 0px);
}
.multi-view-list.stacks .details img.list-img, 
.multi-view-list.splitStacks .details img.list-img{
    display: block;
    border-radius: 10px;
    width: 100%;
}
.multi-view-list.stacks .details .more .visual-option span.qty{
    position: absolute;
    left: 1px;
    top: -18px;
    font-size: 12px;
    line-height: 1;
    z-index: 1;
    width: 22px;
    height: 22px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.multi-view-list.stacks .details .more .visual-option span.qty span.prefix{
    display: none;
}
.multi-view-list.stacks .details .more, 
.multi-view-list.splitStacks .details .more {
    top: 22px;
}
.multi-view-list.stacks, .multi-view-list.splitStacks {
    display: flex;
    gap: 15px;
}
.multi-view-list.stacks .details .more .visual-option, 
.multi-view-list.splitStacks .details .more .visual-option{
    padding: 8px 15px;
}
.multi-view-list.stacks .details:last-child .visual-option, 
.multi-view-list.splitStacks .details:last-child .visual-option{
    opacity: 1;
    transition: all 700ms ease-in-out;
}
.multi-view-list.stacks .details:last-child .visual-option span.qty{
    opacity: 0;
}
.multi-view-list.stacks .details:last-child:hover .visual-option span.qty {
    opacity: 1;
    transition: all 700ms ease-in-out;
}
.multi-view-list.splitStacks .details .more .visual-option span.qty{
    display: none;
}


/*****************************/

.multi-view-list.spoiler .list .details {
    margin-top: 0px;
}
.multi-view-list.spoiler .list {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 4px;
}
.multi-view-list.spoiler .col {
    width: 100%;
}
@media(min-width:1025px){
    .multi-view-list.visual .list .details:nth-child(-n+7) {
        margin-top: 0px !important;
    }
}
@media(max-width:1024px){
    .multi-view-list.stacks .col, .multi-view-list.splitStacks .col {
        width: calc(100% / 4 - 0px);
    }
    .multi-view-list.spoiler .list {
        grid-template-columns: repeat(5, 1fr);
    }
}
@media(min-width:768px) and (max-width:1024px){
    .multi-view-list.visual .list {
        grid-template-columns: repeat(5, 1fr);
    }
    .multi-view-list.visual .list .details:nth-child(-n+5) {
        margin-top: 0px !important;
    }
}
@media(max-width:767px){
    .multi-view-list .col {
        width: calc(100% / 2 - 28px);
    }
    .multi-view-list.stacks .col, .multi-view-list.splitStacks .col {
        width: calc(100% / 3 - 0px);
    }
    .multi-view-list.spoiler .list {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media(min-width:481px) and (max-width:767px){
    .multi-view-list.visual .list {
        grid-template-columns: repeat(3, 1fr);
    }
    .multi-view-list.visual .list .details:nth-child(-n+3) {
        margin-top: 0px !important;
    }
    
}

@media(max-width:480px){
    .multi-view-list .col {
        width: 100%;
    }
    .multi-view-list.visual .list {
        grid-template-columns: repeat(2, 1fr);
    }
    .multi-view-list.visual .list .details:nth-child(-n+2) {
        margin-top: 0px !important;
    }
    .multi-view-list.stacks .col, .multi-view-list.splitStacks .col {
        width: calc(100% / 2 - 0px);
    }
    .multi-view-list.visual .list .details .more .view-more{
        left: 0 !important;
    }
    .multi-view-list.stacks .details .more .view-more, .multi-view-list.splitStacks .list .details .more .view-more{
        left: 0 !important;
        top: 10px;
    }
    .multi-view-list.spoiler .list {
        grid-template-columns: repeat(2, 1fr);
    }
}