.css-18fzi2n {
    width: 100%;
    margin-left: auto;
    box-sizing: border-box;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
}

@media (min-width: 600px) {
    .css-18fzi2n {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 1200px) {
    .css-18fzi2n {
        max-width: 1200px;
    }
}

@media (min-width: 0px) {
    .css-18fzi2n {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.css-dvxtzn {
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
}

.css-17rc5zt {
    width: 150px;
}

@media (min-width: 0px) {
    .css-17rc5zt {
        margin-top: 66px;
    }
}

@media (min-width: 900px) {
    .css-17rc5zt {
        margin-top: 80px;
    }
}

.css-1krxckx {
    margin: 2vh 0px 4px;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.00938em;
    color: rgb(26, 26, 26);
    font-weight: 500;
    text-align: center;
}

@media (min-width: 0px) {
    .css-1krxckx {
        font-size: 16px;
    }
}

@media (min-width: 900px) {
    .css-1krxckx {
        font-size: 20px;
    }
}

.css-13p8x80 {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    line-height: 1.75;
    letter-spacing: 0.02857em;
    text-transform: uppercase;
    min-width: 64px;
    color: rgb(255, 255, 255);
    font-weight: 600;
    outline: 0px;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    margin: 0px;
    text-decoration: none;
    padding: 6px 8px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    background: rgb(74, 192, 82);
    border-radius: 30px;
}

@media (min-width: 0px) {
    .css-13p8x80 {
        font-size: 16px;
        /* width: 160px; */
        height: 48px;
        margin-top: 18px;
        margin-bottom: 80px;
    }
}

@media (min-width: 900px) {
    .css-13p8x80 {
        font-size: 20px;
        /* width: 200px; */
        height: 60px;
        margin-top: 30px;
        margin-bottom: 120px;
    }
}

.css-w0pj6f {
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    z-index: 0;
    inset: 0px;
    border-radius: inherit;
}
.css-18fzi2n {
width: 100%;
margin-left: auto;
box-sizing: border-box;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
display: flex
;
flex-direction: column;
-webkit-box-align: center;
align-items: center;
}
@media (min-width: 600px) {
.css-18fzi2n {
padding-left: 24px;
padding-right: 24px;
}
}
@media (min-width: 1200px) {
.css-18fzi2n {
max-width: 1200px;
}
}
@media (min-width: 0px) {
.css-18fzi2n {
padding-left: 0px;
padding-right: 0px;
}
}
.css-dvxtzn {
display: flex
;
flex-direction: column;
-webkit-box-align: center;
align-items: center;
}

.css-1n2mv2k {
display: flex
;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
.css-1xqlw69 {
width: 28px;
background: linear-gradient(90deg, rgb(244, 244, 244) 10%, rgb(187, 187, 187) 100%);
}
@media (min-width: 0px) {
.css-1xqlw69 {
height: 1px;
}
}
@media (min-width: 900px) {
.css-1xqlw69 {
height: 2px;
}
}
.css-mx6ohl {
margin: 0px;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.334;
letter-spacing: 0em;
color: rgb(102, 102, 102);
text-align: center;
display: inline-block;
}
@media (min-width: 0px) {
.css-mx6ohl {
font-size: 14px;
font-weight: 600;
width: 136px;
}
}
@media (min-width: 900px) {
.css-mx6ohl {
font-size: 16px;
font-weight: 300;
width: 152px;
}
}
.css-db5gg1 {
width: 28px;
background: linear-gradient(90deg, rgb(187, 187, 187) 10%, rgb(244, 244, 244) 100%);
}
@media (min-width: 0px) {
.css-db5gg1 {
height: 1px;
}
}
@media (min-width: 900px) {
.css-db5gg1 {
height: 2px;
}
}
.css-1ebprri {
margin-top: 16px;
margin-bottom: 16px;
}
@media (min-width: 900px) {
.css-xkeg8j {
padding: 0px;
}
}
.css-hjbgq2 {
box-sizing: border-box;
display: flex
;
flex-flow: wrap;
width: 100%;
-webkit-box-flex: 1;
flex-grow: 1;
}
@media (min-width: 0px) {
.css-hjbgq2 {
margin-top: -8px;
}
}
@media (min-width: 900px) {
.css-hjbgq2 {
margin-top: -24px;
}
}
@media (min-width: 0px) {
.css-hjbgq2 {
width: calc(100% + 8px);
margin-left: -8px;
}
}
@media (min-width: 900px) {
.css-hjbgq2 {
width: calc(100% + 24px);
margin-left: -24px;
}
}
.css-pq7chb {
box-sizing: border-box;
margin: 0px;
flex-direction: row;
flex-basis: 50%;
-webkit-box-flex: 0;
flex-grow: 0;
max-width: 50%;
}
@media (min-width: 600px) {
.css-pq7chb {
flex-basis: 33.3333%;
-webkit-box-flex: 0;
flex-grow: 0;
max-width: 33.3333%;
}
}
@media (min-width: 900px) {
.css-pq7chb {
flex-basis: 25%;
-webkit-box-flex: 0;
flex-grow: 0;
max-width: 25%;
}
}
@media (min-width: 1200px) {
.css-pq7chb {
flex-basis: 25%;
-webkit-box-flex: 0;
flex-grow: 0;
max-width: 25%;
}
}
@media (min-width: 1536px) {
.css-pq7chb {
flex-basis: 25%;
-webkit-box-flex: 0;
flex-grow: 0;
max-width: 25%;
}
}
@media (min-width: 0px) {
.css-hjbgq2 > .MuiGrid-item {
padding-top: 8px;
}
}
@media (min-width: 900px) {
.css-hjbgq2 > .MuiGrid-item {
padding-top: 24px;
}
}
@media (min-width: 0px) {
.css-hjbgq2 > .MuiGrid-item {
padding-left: 8px;
}
}
@media (min-width: 900px) {
.css-hjbgq2 > .MuiGrid-item {
padding-left: 24px;
}
}
.css-v1r2ov {
margin: 0px;
font: inherit;
color: rgb(25, 118, 210);
text-decoration: none;
}
.css-1fb1aql {
color: rgba(0, 0, 0, 0.87);
height: 100%;
isolation: isolate;
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
border-radius: 8px;
border-width: 0px;
border-style: solid;
border-color: initial;
border-image: initial;
background: rgb(255, 255, 255);
}
.HFL-goods-card .productImgWrapper {
position: relative;
font-size: 0;
padding-top: 100%;
}
.css-bto6dv {
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
background-color: transparent;
outline: 0px;
border: 0px;
margin: 0px;
padding: 0px;
cursor: pointer;
user-select: none;
vertical-align: middle;
appearance: none;
text-decoration: none;
color: inherit;
display: block;
text-align: inherit;
border-radius: inherit;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.HFL-goods-card .productImgWrapper .productImgWrapper-back {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.HFL-goods-card .image {
filter: none !important;
width: 100%;
height: auto;
}
.css-jo3ec3 {
pointer-events: none;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0;
background-color: currentcolor;
overflow: hidden;
border-radius: inherit;
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.css-w0pj6f {
overflow: hidden;
pointer-events: none;
position: absolute;
z-index: 0;
inset: 0px;
border-radius: inherit;
}
.css-c3vlm2 {
background: #fff;
}
.HFL-goods-card .productContentWrapper {
padding: 6px;
text-align: left;
border-radius: 0 0 8px 8px;
}
.css-1dnzbhn {
display: flex
;
align-content: center;
}
.css-xsnsew {
margin: 0px;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0.00938em;
font-weight: 300;
white-space: break-spaces;
}
@media (min-width: 0px) {
.css-xsnsew {
font-size: 13px;
}
}
@media (min-width: 600px) {
.css-xsnsew {
font-size: 16px;
}
}
.HFL-goods-card .productContentWrapper .productName {
color: #1a1a1a;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.css-kzaz3m {
margin: 0px 0px 0px 3px;
line-height: 1.5;
letter-spacing: 0.00938em;
font-size: 11px;
font-weight: 300;
font-family: Roboto, Helvetica, Arial;
color: rgb(102, 102, 102);
}
.card-tag .card-tag-container {
display: flex
;
align-items: center;
text-align: left;
font-size: 12px;
border-radius: 4px;
font-weight: 300;
}
.card-tag .card-tag-container span {
-webkit-line-clamp: 1;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
.HFL-goods-card .productContentWrapper .productPrice {
display: flex
;
justify-content: space-between;
align-items: center;
margin-top: 3px;
}
.HFL-goods-card .productContentWrapper .productPrice .productPrice-container .productPrice-price {
display: flex
;
align-items: flex-end;
}
.css-15ro776 {
margin-right: 4px;
}
.HFL-goods-card .productContentWrapper .productPrice .productPrice-container .productPrice-price .current-price {
color: #f56646;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
font-family: DIN Alternate;
}
.HFL-goods-card .productContentWrapper .productPrice .productPrice-container .productPrice-price .current-price .price {
font-size: 20px;
}
.HFL-goods-card .productContentWrapper .productPrice .productPrice-container .productPrice-price .origin-price {
color: #999;
font-size: 12px;
word-break: keep-all;
}
.HFL-goods-card .productContentWrapper .productPrice .productPrice-container .productPrice-price .origin-price .price {
text-decoration: line-through;
margin-left: 5px;
}
.HFL-goods-card .productContentWrapper .productPrice .productCart {
width: 44px;
height: 28px;
border-radius: 14px;
background: hsla(0, 0%, 100%, .24);
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, .24);
text-align: center;
line-height: 34px;
position: relative;
}
.HFL-goods-card .productImgWrapper .productImgWrapper-back .img-mask {
position: absolute;
width: 100%;
object-fit: contain;
object-position: bottom;
bottom: 0;
left: 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.css-zbgcj {
text-align: center;
font-size: 12px;
padding-top: 8px;
padding-bottom: 8px;
}