.fenek-product-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 18px 0 30px;
max-width: 100%;
}
.fenek-product-cards--single {
grid-template-columns: minmax(0, 1fr);
max-width: 50%;
}
.fenek-product-cards--cols-1 {
grid-template-columns: minmax(0, 1fr);
}
.fenek-product-cards--cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fenek-product-cards--cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fenek-product-card {
position: relative;
display: grid;
grid-template-columns: 86px minmax(0, 1fr) 46px;
align-items: center;
gap: 12px;
min-height: 116px;
border: 1px solid #dbe9f1;
border-radius: 14px;
background: #f8fbfd;
padding: 18px 14px;
box-shadow: 0 12px 28px rgba(36, 71, 96, .06);
overflow: visible;
}
.fenek-product-card__cover {
position: relative;
display: block;
width: 86px;
height: 100px;
cursor: pointer;
}
.fenek-product-card__image {
width: 86px;
height: 100px;
object-fit: contain;
background: #fff;
border-radius: 10px;
}
.fenek-product-card__cover:after,
.fenek-product-card__cart:after {
content: attr(data-tip);
position: absolute;
left: 50%;
bottom: calc(100% + 9px);
transform: translateX(-50%);
width: 230px;
max-width: 70vw;
background: #fff7ed;
color: #244760;
border: 1px solid #f1dcc2;
border-radius: 9px;
padding: 8px 10px;
font-family: Nunito, Arial, sans-serif;
font-size: 12px;
line-height: 1.35;
font-weight: 800;
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity .15s;
z-index: 20;
box-shadow: 0 10px 24px rgba(36, 71, 96, .12);
}
.fenek-product-card__cover:hover:after,
.fenek-product-card__cart:hover:after {
opacity: 1;
}
.fenek-product-card__body small {
display: block;
color: #8b98a0;
font-size: 13px;
line-height: 1.2;
}
.fenek-product-card__body h3 {
font-family: Quicksand, Nunito, Arial, sans-serif;
font-size: 21px;
line-height: 1.16;
margin: 3px 0 7px;
color: #244760;
font-weight: 900;
}
.fenek-product-card__body p {
display: none;
}
.fenek-product-card__price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 7px;
margin-top: 2px;
}
.fenek-product-card__price strong,
.fenek-product-card__price .woocommerce-Price-amount {
color: #c2410c;
font-size: 18px;
font-weight: 900;
}
.fenek-product-card__price del {
color: #c2410c;
font-size: 16px;
font-weight: 800;
opacity: .9;
}
.fenek-product-card__price del .woocommerce-Price-amount {
color: inherit;
font-size: inherit;
font-weight: inherit;
}
.fenek-product-card__price ins {
text-decoration: none;
}
.fenek-product-card__cart,
.fenek-product-card__cart:visited {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 999px !important;
background: #ef6b22 !important;
color: #fff !important;
border: 0 !important;
box-shadow: 0 14px 26px rgba(239, 107, 34, .24);
padding: 0 !important;
text-decoration: none !important;
transform: none !important;
}
.fenek-product-card__cart:hover,
.fenek-product-card__cart:focus,
.fenek-product-card__cart:active,
.fenek-product-card__cart.is-added {
background: #d04a0a !important;
color: #fff !important;
border-radius: 999px !important;
transform: none !important;
}
.fenek-product-card__cart svg {
width: 22px;
height: 22px;
stroke: #fff !important;
fill: none;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.fenek-product-card__cart svg circle {
fill: none;
stroke: #fff !important;
}
.fenek-product-card__cart.is-loading {
opacity: .7;
pointer-events: none;
}
.fenek-product-card__toast {
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%);
background: #fff;
color: #244760;
border: 1px solid #dbe9f1;
border-radius: 9px;
padding: 6px 10px;
font-size: 12px;
font-weight: 900;
opacity: 0;
pointer-events: none;
box-shadow: 0 12px 24px rgba(36, 71, 96, .12);
}
.fenek-product-card__cart.show-toast .fenek-product-card__toast {
opacity: 1;
}
.fenek-product-card .added_to_cart,
.fenek-product-card .wc-forward {
display: none !important;
}
.fenek-product-card__popover {
position: absolute;
left: 12px;
right: 12px;
top: 12px;
z-index: 45;
background: #fff7ed;
color: #244760;
border: 1px solid #f1dcc2;
border-radius: 12px;
padding: 12px 42px 12px 14px;
box-shadow: 0 18px 38px rgba(36, 71, 96, .16);
font-family: Nunito, Arial, sans-serif;
font-size: 14px;
line-height: 1.45;
font-weight: 800;
}
.fenek-product-card__popover a {
color: #ea5b21 !important;
font-weight: 900;
text-decoration: none !important;
white-space: nowrap;
}
.fenek-product-card__popover a:hover {
text-decoration: underline !important;
}
.fenek-product-card__popover button {
position: absolute;
right: 10px;
top: 8px;
width: 26px;
height: 26px;
border: 0 !important;
border-radius: 999px !important;
background: #fff !important;
color: #c2410c !important;
font-size: 18px;
line-height: 1 !important;
font-weight: 900;
box-shadow: none !important;
padding: 0 !important;
cursor: pointer;
transform: none !important;
}
.fenek-product-card__popover button:hover,
.fenek-product-card__popover button:focus {
background: #fff !important;
color: #c2410c !important;
border-radius: 999px !important;
transform: none !important;
}
@media (max-width: 900px) {
.fenek-product-cards,
.fenek-product-cards--single,
.fenek-product-cards--cols-3,
.fenek-product-cards--cols-4 {
grid-template-columns: minmax(0, 1fr);
max-width: 100%;
}
}
@media (max-width: 720px) {
.fenek-product-cards {
margin: 16px 0 26px;
}
.fenek-product-card {
grid-template-columns: 78px minmax(0, 1fr) 46px;
min-height: 106px;
padding: 14px 12px;
}
.fenek-product-card__cover,
.fenek-product-card__image {
width: 78px;
height: 92px;
}
.fenek-product-card__body h3 {
font-size: 18px;
}
.fenek-product-card__cover:after,
.fenek-product-card__cart:after {
display: none;
}
.fenek-product-card__popover {
left: 8px;
right: 8px;
top: 8px;
font-size: 13px;
padding: 10px 38px 10px 12px;
}
}