/* ==========================================================================
Yazan (Astra Child) — WooCommerce components
Implements Blueprint Parts 7 (cards), 8 (product page), 9 (collection),
10 (cart), 15 (mobile) at the CSS level. Pairs with inc/woocommerce.php.
Flat + hairlines is the luxury grammar — avoid drop shadows almost entirely.
========================================================================== */
/* --------------------------------------------------------------------------
Product cards (Part 7)
-------------------------------------------------------------------------- */
.yazan ul.products li.product.yz-card {
position: relative;
text-align: left;
box-shadow: none;
background: transparent;
}
/* --------------------------------------------------------------------------
Card elevation on hover — deliberately restrained, and deliberately on `translate:`.
The card is what a shopper reads, compares and clicks; the product is the subject and the
effect is not. So this is a straight lift and a soft cast shadow — no tilt, no rotation, no
overshoot. The price never moves sideways under the pointer.
⚠️ `translate:`, NOT `transform:`. `.yz-reveal` (motion.css Part 7) already owns this element's
reveal offset, and the two are independent CSS properties: writing this as `transform` would
cancel the reveal's start position, so cards would pop in flat instead of rising. That channel
split is the architectural rule documented in motion.css Part 2.
`--mo-lift` scales from the store's motion-intensity setting, so "motion: off" flattens this
to zero without a media query.
-------------------------------------------------------------------------- */
@media (hover: hover) {
.yazan ul.products li.product.yz-card {
transition:
translate var(--mo-med) var(--mo-ease-out),
box-shadow var(--mo-med) var(--mo-ease-out);
}
.yazan ul.products li.product.yz-card:hover,
.yazan ul.products li.product.yz-card:focus-within {
translate: 0 calc(var(--mo-lift) * -1);
box-shadow: 0 22px 48px rgba(0, 0, 0, 0.12);
}
}
/* Media wrapper: consistent 4:5 ratio, single background store-wide. */
.yazan ul.products li.product.yz-card a img,
.yazan ul.products li.product.yz-card .yz-card__img--alt {
aspect-ratio: 4 / 5;
object-fit: cover;
width: 100%;
margin: 0;
background: var(--yz-ivory);
}
/* Position the image link as the stacking context for hover crossfade + CTA bar.
The aspect-ratio guarantees the media box reserves its 4:5 height even if an ![]()
ever
fails to render — so the absolutely-positioned .yz-badges overlay never collapses/scatters. */
.yazan ul.products li.product.yz-card > a:first-of-type,
.yazan ul.products li.product.yz-card .woocommerce-LoopProduct-link {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--yz-ivory);
}
/* Slow zoom — light moving across the stone (Part 9).
Guard the pointer-driven zoom behind `@media (hover: hover)` so a tap on touch devices
(which emulates :hover) can't leave the image stuck zoomed until the next tap. */
.yazan ul.products li.product.yz-card img { transition: transform 1.2s var(--mo-ease-out); }
@media (hover: hover) {
.yazan ul.products li.product.yz-card:hover img { transform: scale(1.05); }
}
/* Crossfade to the second angle. Include `transform` in the transition so the alt image zooms in
sync with the primary — otherwise this rule clobbers the inherited `transition: transform 1.2s`
(transition is not additive) and the alt image snaps to scale(1.05) instantly on hover. */
.yz-card__img--alt {
position: absolute; inset: 0;
opacity: 0;
transition: opacity var(--mo-med) var(--mo-ease-out),
transform 1.2s var(--mo-ease-out);
pointer-events: none;
}
/* Keyboard focus reveals the alt angle on any device; pointer hover only where a real hover
exists (no sticky crossfade after a tap). */
.yz-card:focus-within .yz-card__img--alt { opacity: 1; }
@media (hover: hover) {
.yz-card:hover .yz-card__img--alt { opacity: 1; }
}
/* Subject line + title + price.
Rhythm mirrors the reference card (compact, tight vertical gaps: vendor line → title →
price), but the title keeps the brand's serif display face — the "balanced" direction. */
.yz-subject {
display: block;
margin: 13px 0 5px;
font-family: var(--yz-font-body);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--yz-muted);
line-height: 1.1;
}
.yazan ul.products li.product.yz-card .woocommerce-loop-product__title {
font-family: var(--yz-font-display);
font-weight: 500;
font-size: 17px;
line-height: 1.24;
letter-spacing: 0.01em;
margin: 0;
padding: 0;
color: var(--yz-ink);
transition: color var(--mo-med) var(--mo-ease-out);
}
/* On card hover the title warms gently from ink to a restrained aged gold — a single, intentional
on-brand accent, replacing Astra's global `a:hover` accent blue (--ast-global-color-1), which is
off-brand (no blue in the palette) and read as the title "fading". The title is a link
(.ast-loop-product__link) wrapping the