/*! dk-src:b6767f74254e50f880e9a279e1aabb41 v1 */
.product-card {
display: flex;
flex-direction: column;
width: 100%;
background: var(--dk-white);
border: 1px solid var(--dk-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
position: relative;
height: 100%;
}
.product-card:hover {
border-color: var(--dk-border-h);
box-shadow: var(--shadow-md);
}
.product-card__media {
display: block;
width: 100%;
}
.product-card__media > picture {
display: contents;
}
.product-card__img {
width: 100%;
height: auto;
display: block;
padding: 0;
border: none;
background: none;
border-radius: 0;
}
.product-card__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px;
height: auto;
}
.product-card__title {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--dk-dark);
line-height: var(--lh-heading);
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.15s ease;
}
.product-card__title:hover {
color: var(--dk-text);
}
.product-card__meta {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--fs-xs);
color: var(--dk-grey-500);
line-height: 1;
flex-wrap: wrap;
}
.product-card__rating-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 7px 3px 6px;
background: var(--dk-green);
color: var(--dk-white);
border-radius: var(--radius-sm);
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
line-height: 1;
}
.product-card__rating-icon {
color: var(--dk-white);
flex-shrink: 0;
}
.product-card__rating-value {
color: var(--dk-white);
}
.product-card__reviews-count {
color: var(--dk-grey-500);
white-space: nowrap;
}
.product-card__bottom {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-top: 4px;
}
.product-card__price {
display: flex;
flex-direction: column;
gap: 2px;
line-height: var(--lh-tight);
min-width: 0;
}
.product-card__price-old {
font-size: var(--fs-xs);
color: var(--dk-grey-500);
text-decoration: line-through;
font-weight: var(--fw-regular);
order: 1;
}
.product-card__price-new {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
color: var(--dk-dark);
white-space: nowrap;
order: 2;
}
.product-card--has-discount .product-card__price-new {
color: var(--dk-error);
}
.product-card__cta {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 38px;
padding: 0 12px;
background: var(--dk-white);
color: var(--dk-dark);
border: 1.5px solid var(--dk-dark);
border-radius: var(--radius-md);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
font-family: inherit;
cursor: pointer;
line-height: 1;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
white-space: nowrap;
text-decoration: none;
}
.product-card__cta:hover {
background: var(--dk-dark);
color: var(--dk-white);
}
.product-card__cta:active {
transform: scale(0.97);
}
.product-card__cta:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(22, 22, 22, 0.16);
}
.product-card__cta[disabled],
.product-card__cta[aria-busy="true"] {
opacity: 0.65;
cursor: progress;
}
.product-card__cta-icon {
flex-shrink: 0;
}
.product-card__cta--in-cart {
cursor: default;
color: var(--dk-grey-500);
border-color: transparent;
background: var(--dk-grey-bg);
}
.product-card__cta--in-cart:hover {
background: var(--dk-grey-bg);
color: var(--dk-grey-500);
}
.product-card__cta--out {
cursor: not-allowed;
color: var(--dk-grey-500);
border-color: var(--dk-border-h);
background: var(--dk-grey-bg);
}
.product-card__cta--out:hover {
background: var(--dk-grey-bg);
color: var(--dk-grey-500);
}
@media (max-width: 1400px) and (min-width: 901px) {
.cart-recommend__col .product-card__cta-label,
.col-20 .product-card__cta-label,
.col-25 .product-card__cta-label,
.bundle-pair__card .product-card__cta-label {
display: none;
}
.cart-recommend__col .product-card__cta,
.col-20 .product-card__cta,
.col-25 .product-card__cta,
.bundle-pair__card .product-card__cta {
padding: 0 10px;
gap: 0;
}
.bundle-pair__card .product-card__cta--in-cart .product-card__cta-label {
display: none;
}
}
@media (max-width: 720px) {
.product-card__body { padding: 14px; gap: 8px; }
.product-card__price-new { font-size: var(--fs-base); }
.product-card__cta { height: 36px; font-size: var(--fs-xs); padding: 0 10px; }
.product-card__title { font-size: var(--fs-xs); }
}
@media (max-width: 480px) {
.product-card__bottom {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.product-card__cta {
width: 100%;
}
}