.card-product{position:relative;width:100%;height:100%;background-color:var(--color-blue-dark);border-right:2px solid var(--color-white);border-bottom:2px solid var(--color-white);display:grid;grid-template-columns:100%;grid-template-rows:auto 1fr}.card-product img{width:100%;position:relative;opacity:1;transition-property:opacity;transition-duration:.25s;transition-timing-function:linear}.card-product img.preload{opacity:0}.card-product a{text-decoration:none}.card-product__media{position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;background-color:var(--color-white)}.card-product__media a{display:block;width:100%;height:100%}.card-product__media img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.card-product__footer{padding:1em;background-color:var(--color-blue-medium);border-top:2px solid var(--color-white);height:100%;display:flex;flex-direction:column;gap:.75em;text-transform:uppercase}.card-product__header{display:flex;justify-content:space-between;align-items:flex-start;gap:3em;font:1em droid-serif,arial,sans-serif;font-weight:400}.card-product__header .price{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap}.card-product__header .price ins{text-decoration:none;border:none}.card-product__header .price del{font-size:.75em;opacity:.6;display:block;line-height:1.3}.card-product__blend span{font-size:.875em;letter-spacing:1px}.card-product .flavours{display:flex;gap:1em;align-items:center}.card-product .flavours span{font-size:.875em;letter-spacing:1px}.card-product .flavours .flavour-icons{display:flex;gap:0}.card-product .flavours .flavour-icons .flavour-icon{width:1em;height:1em;background-color:rgba(255,255,255,.1);border-radius:50%;border:1px solid var(--color-white);position:relative}.card-product .roast{display:flex;gap:.75em;align-items:center}.card-product .roast span{font-size:.875em;letter-spacing:1px}.card-product .roast .roast-icons{display:flex;gap:.25em}.card-product .roast .roast-icons .bean{width:1em;height:1em;border-radius:50%}.card-product .roast .roast-icons .bean svg{width:100%;height:auto;opacity:.15}.card-product .roast .roast-icons .bean svg path{fill:var(--color-white)}.card-product .roast .roast-icons .bean.active svg{opacity:1}