/**
* WCBlocks product card.
*
* The card is li.product inside .wcb-products. main.css owns the loop skeleton (the
* flex grid, the column widths, the square thumbnail and the hover image swap) and
* no longer declares the card price row, the card add-to-cart button or the discount
* badge: this file is their single source of truth.
*
* Every declaration carries !important for the same reason main.css does. The card is
* rendered inside Elementor templates, and Elementor's own rules are printed after
* this file, so a plain declaration would lose to the template.
*
* Two custom properties describe the card and are inherited by everything inside it:
*
* --wcb-card-pad padding between the card border and the card content.
* --wcb-card-gutter outer spacing the card keeps from the next card. main.css
* creates the grid gutter with padding on li, so the card surface
* is drawn as an inset pseudo-element rather than as a border on
* li itself. That keeps the grid spacing rules untouched.
*/
/* --------------------------------------------------------------------- CARD */
.wcb-products>li.product {
--wcb-card-pad: 12px;
--wcb-card-gutter: 12px;
--wcb-card-inset: calc(var(--wcb-card-pad) + var(--wcb-card-gutter));
--wcb-card-radius: 10px;
--wcb-card-border: #e8e8ec;
--wcb-card-navy: #12294f;
--wcb-card-navy-hover: #0d1f3d;
--wcb-card-muted: #9a9aa1;
display: flex !important;
flex-direction: column !important;
padding: var(--wcb-card-pad) var(--wcb-card-inset) !important;
border: 0 !important;
background: none !important;
box-sizing: border-box !important;
/* Guarantees that nothing, the in-card size panel included, leaves the card. */
overflow: hidden !important;
}
/*
* The card surface. Absolutely positioned against li.product, which main.css already
* makes a positioning context, and inset by the gutter so the grid keeps its spacing.
*/
.wcb-products>li.product::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: var(--wcb-card-gutter);
right: var(--wcb-card-gutter);
border: 1px solid var(--wcb-card-border);
border-radius: var(--wcb-card-radius);
background-color: #ffffff;
box-sizing: border-box;
z-index: 0;
}
/*
* Both card children sit above the surface. They are positioned so they take part in
* the same painting step as the surface; an in-flow child would be painted under it.
*/
.wcb-products>li.product>a {
position: relative !important;
z-index: 1 !important;
}
/* The product link grows, so the add-to-cart button lands on the card floor. */
.wcb-products>li.product>a.woocommerce-LoopProduct-link {
flex: 1 1 auto !important;
color: inherit !important;
text-decoration: none !important;
}
/* ------------------------------------------------------------------- TITLE */
/*
* At most two lines, with an ellipsis. main.css still owns the title typography
* (weight, colour, 14px / 1.3em, 40px min-height); only the clamp is added here, and
* the clamp needs the -webkit-box display to work.
*/
.wcb-products>li.product .woocommerce-loop-product__title {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
}
/* ----------------------------------------------------------------- PRICE ROW */
/*
* Current price on the left, large and bold, then a thin vertical divider, then a
* small grey label with the struck-through old price underneath it.
*
* WooCommerce renders this row as old current, so the two
* sides are swapped with the flex order property instead of rebuilding the markup.
* The label above the old price comes from the custom property that Actions prints
* from a translatable string, so the price HTML stays exactly what WooCommerce made.
*/
.wcb-products>li.product .price {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
margin: 6px 0 10px !important;
background: transparent !important;
color: #000 !important;
font-weight: 500 !important;
font-size: 15px !important;
}
/* WooCommerce separates the two prices with a ; a flex row does not need it. */
.wcb-products>li.product .price br {
display: none !important;
}
/* Current price: first in the row. */
.wcb-products>li.product .price ins,
.wcb-products>li.product .price>.amount {
order: 1 !important;
background: transparent !important;
text-decoration: none !important;
}
.wcb-products>li.product .price ins .amount,
.wcb-products>li.product .price>.amount {
color: #000 !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.1 !important;
text-decoration: none !important;
}
/* Old price: second in the row, behind the divider, with the label above it. */
.wcb-products>li.product .price del {
order: 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
margin: 0 !important;
padding: 0 0 0 10px !important;
border-left: 1px solid #e0e0e4 !important;
color: var(--wcb-card-muted) !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
/*
* The decoration is put on the amount instead of here, so the label above stays
* clean: a text decoration cannot be cancelled by a descendant, only by an
* element that does not inherit it.
*/
text-decoration: none !important;
}
.wcb-products>li.product .price del::before {
content: var(--wcb-price-before-label, "Antes:");
display: block !important;
font-size: 11px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
color: var(--wcb-card-muted) !important;
white-space: nowrap !important;
}
/* The strikethrough of the old price. */
.wcb-products>li.product .price del .amount {
color: var(--wcb-card-muted) !important;
font-size: 12px !important;
font-weight: 500 !important;
text-decoration: line-through !important;
}
/* ------------------------------------------------------------- ADD TO CART */
/*
* Full-width navy button on the card floor.
*
* WooCommerce renders this as an (templates/loop/add-to-cart.php), not as a
*