/* Lite Product Carousel — dependency-free (no Swiper). Product card styling
itself comes entirely from the theme's own WooCommerce CSS (already loaded
site-wide) since cards are rendered via wc_get_template_part('content','product');
only the carousel chrome below is this widget's own. */
.mca-pcar {
--mca-pcar-gap: 20px;
position: relative;
width: 100%;
}
.mca-pcar__tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 24px;
}
.mca-pcar__tab {
appearance: none;
background: #fff;
border: 1.5px solid rgba(26, 26, 26, 0.15);
cursor: pointer;
padding: 10px 22px;
border-radius: 6px;
font-size: 15px;
font-weight: 700;
/* Elementor headings on this page (e.g. "Shop by Category" right above
this widget) render in Inter — the site's actual design-system font
(CLAUDE.md's "Typography: Inter"). `inherit` here was picking up
WooCommerce's own Lato default instead, since this widget's markup
sits inside a WooCommerce-templated card tree, not an Elementor text
widget — a real, visible mismatch against the heading directly above
the tabs, not just a rendering illusion. */
font-family: 'Inter', sans-serif;
color: var(--e-global-color-text, #1a1a1a);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mca-pcar__tab:hover {
border-color: var(--e-global-color-secondary, #0d3b2e);
}
.mca-pcar__tab.is-active {
background: var(--e-global-color-secondary, #0d3b2e);
border-color: var(--e-global-color-secondary, #0d3b2e);
color: #fff;
}
/* The bordered, rounded box wrapping everything below the tab nav — matches
the corner radius already used on each product image, applied to the
section as a whole (same treatment the original XStore tabs widget had:
1.5px solid border, 15px radius, white background, 24px padding). */
.mca-pcar__content {
border: 1.5px solid #eee;
border-radius: 15px;
background: #fff;
padding: 24px;
}
.mca-pcar__panel {
position: relative;
display: none;
}
.mca-pcar__panel.is-active {
display: block;
}
.mca-pcar__viewport {
overflow: hidden;
touch-action: pan-y;
}
.mca-pcar__track {
display: flex;
transition: transform 0.4s ease;
margin: 0 calc(var(--mca-pcar-gap) / -2);
-webkit-user-drag: none;
user-select: none;
}
.mca-pcar.is-dragging .mca-pcar__track {
transition: none;
}
.mca-pcar__slide {
display: flex; /* see the height-propagation comment below */
flex: 0 0 calc(100% / var(--mca-pcar-per-view, 4));
max-width: calc(100% / var(--mca-pcar-per-view, 4));
box-sizing: border-box;
padding: 0 calc(var(--mca-pcar-gap) / 2);
}
/* content-product.php (theme's WooCommerce card template) hardcodes
Bootstrap-style grid classes (col-md-3/col-sm-6/col-xs-6 etc.) onto every
card based on the site's own "shop columns" setting — normally neutral
inside the theme's own grid wrapper, but here it fights our flex-basis
sizing above, collapsing the card (and everything inside it) down to
whatever fraction that setting happens to produce. The slide above is
already sized correctly; the card inside it just needs to fill it. */
.mca-pcar__slide .type-product,
.mca-pcar__slide [class*="col-"] {
width: 100% !important;
float: none !important;
}
/* Pin "Add to cart" to the same bottom edge on every card in a row,
regardless of how many lines the title wraps to or whether the price is
a single line or a strikethrough-plus-sale-price pair.
.mca-pcar__slide is already stretched to equal height across the row
(default align-items:stretch on .mca-pcar__track) — but that only sets
the *slide's* own height. .type-product, its immediate child, is a plain
block that sizes to its own content, so it was NOT filling that stretched
height (confirmed live: slides in the same row measured equal, but
.type-product inside each one measured a different height, tracking each
card's own content length). The theme's .content-product/.product-details
further down ARE already display:flex;flex-direction:column with
.product-details already flex-grow:1 (confirmed via computed styles, not
assumed) — so once .type-product itself is made to fill the slide (by
making the slide a flex container above and stretching its one child),
the existing chain correctly propagates the rest of the way down, and
.product-details actually has real leftover space to grow into. Only then
does margin-top:auto on the button have anything to consume — before this,
it was resolving to 0px (a legal value, not a bug in itself) because there
was no leftover space in .product-details to be `auto` about. */
.mca-pcar__slide > .type-product {
display: flex;
flex-direction: column;
flex: 1;
}
.mca-pcar__slide .add_to_cart_button {
margin-top: auto;
}
/* Real layout shift (not just misalignment), traced live: the product image
is lazy-loaded and .product-image-wrapper has no reserved size of its own
— before the image finishes loading, the flex chain above collapses it to
a couple of pixels wide (confirmed: 2px, measured directly), then it
snaps to its real ~240px width the instant the image loads, visibly
shifting everything below it. Fixed by reserving the space up front from
the image's own known dimensions (every card's ![]()
already carries
width="600" height="745" attributes) instead of leaving it to be derived
from a not-yet-loaded image. */
.mca-pcar__slide .product-image-wrapper {
width: 100%;
aspect-ratio: 600 / 745;
}
/* Font correction: an earlier pass here forced font-family:Inter, reasoning
that it should match the Elementor heading above the widget — wrong fix,
found by inspecting the actual "Deals of the day" product grid elsewhere
on this same homepage instead of assuming. That grid's titles carry class
.woocommerce-loop-product__title, which THIS plugin's own product-cards.css
already styles site-wide (font-size:13px; font-weight:600; line-height:1.4;
color:var(--e-global-color-text); Lato, unchanged) — the established
product-card title style for this project. content-product.php (the
generic WooCommerce template this widget's cards use) doesn't render that
class on its own `