a.btn-shape,
a.btn-shape:hover {
    text-decoration: none !important;
}

.masonry-category-button {
    margin-left: -2.1rem !important;
    margin-right: 4px !important;
    font-size: 12px !important;
    letter-spacing: 0px !important;
    text-transform: capitalize !important;
    padding: 10px 20px !important;
    height: 36px !important;
}

@media (min-width: 640px) {
    .masonry-category-button {
        font-size: 14px !important;
        padding: 10px 25px !important;
    }
}

.masonry-category-button::before {
    clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 18px 0%, 0% 0%) !important;
}

.masonry-category-button::after {
    clip-path: polygon(0 0, 0 0, 100% 0, calc(100% - 18px) 100%, 0 100%, 0 0, 0 0) !important;
}

.details-button {
    padding: 10px 35px !important;
}

.details-button::before {
    clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 18px 0%, 0% 0%) !important;
}

.details-button::after {
    clip-path: polygon(0 0, 0 0, 100% 0, calc(100% - 18px) 100%, 0 100%, 0 0, 0 0) !important;
}

.shade-button {
    min-width: 135px;
}

.masonry-count {
    margin-left: 6px;
    font-size: 12px !important;
    color: #344054 !important;
}

.btn-shape {
    font-family: Graphik Semibold, serif;
    display: inline-flex;
    justify-content: center;
    color: white;
    align-items: center;
    font-size: 16px;
    position: relative;
    padding: 10px 40px;
    font-style: normal;
    line-height: 20px;
    white-space: nowrap;
    height: max-content;
    text-transform: uppercase;
    z-index: 10;
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
    letter-spacing: 1.5px;
    background-color: transparent;
}

.btn-shape-sm {
    padding: 3px 20px !important;
    font-size: 13px !important;
}

.btn-shape-sm-check-out {
    font-size: 13px !important;
}

.btn-shape, .btn-red, .btn-white, .btn-active,
.btn-red::after, .btn-red::before, .btn-white::after, .btn-white::before, .btn-active::after, .btn-active::before {
    transition: 0.4s ease-in-out;
    cursor: pointer;
}

.btn-red::before,
.btn-white::before,
.btn-active::before {
    content: "";
    position: absolute;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 51%;
    clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 25px 0%, 0% 0%);
}


.btn-red::after,
.btn-white::after,
.btn-active::after {
    content: "";
    position: absolute;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 51%;
    clip-path: polygon(0 0, 0 0, 100% 0, calc(100% - 25px) 100%, 0 100%, 0 0, 0 0);
}

.btn-shape-sm::before {
    content: "";
    position: absolute;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 51%;
    clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 15px 0%, 0% 0%);
}


.btn-shape-sm::after {
    content: "";
    position: absolute;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 51%;
    clip-path: polygon(0 0, 0 0, 100% 0, calc(100% - 15px) 100%, 0 100%, 0 0, 0 0);
}

/*red button*/
.btn-red {
    font-family: Graphik Semibold, serif !important;
    color: white !important;
}

.btn-red:disabled {
    color: #D0D5DD !important;
}

.btn-red:disabled:hover {
    border-color: transparent;
}

.btn-red::after,
.btn-red::before {
    background-color: #ee3124;
}

.btn-red:hover::after,
.btn-red:hover::before {
    background: #be271d;
}

.btn-red:disabled::after,
.btn-red:disabled::before {
    background: #F2F4F7;
}

/*white button*/
.btn-white {
    font-family: Graphik Bold, serif !important;
    color: #344054 !important;
}

.btn-white:hover {
    color: #182230 !important;
}

.btn-white::after,
.btn-white::before {
    background-color: #FFF;
}

.btn-white:hover::after,
.btn-white:hover::before {
    background: #f4f4f5;
}

/*active button*/
.btn-active {
    font-family: Graphik Bold, serif !important;
    color: #8F1D16 !important;
}

.btn-active::after,
.btn-active::before {
    background-color: #FDEAE9;
}