/* Shared card presentation; approved Design System 0.2.4 tokens are unchanged. */
.shopyli-ui .sh-card-collection { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,9rem),1fr)); gap: var(--sh-product-gap); margin: 0; padding: 0; list-style: none; align-items: stretch; }
.shopyli-ui .sh-card-collection > li { min-inline-size: 0; display: flex; margin: 0; padding: 0; list-style: none; }
.shopyli-ui .sh-product-card { inline-size: 100%; min-inline-size: 0; }
.shopyli-ui .sh-product-card :is(a,h2,h3,h4,span) { font-family: var(--sh-font); }
.shopyli-ui .sh-product-card .sh-product-link { min-block-size: 44px; }
.shopyli-ui .sh-product-card .sh-product-media { overflow: hidden; flex: none; }
.shopyli-ui .sh-product-card .sh-product-body { grid-template-rows: 1.125rem calc(2 * var(--sh-product-title-line)) minmax(1.5rem,auto) minmax(.9375rem,auto); align-content: start; min-inline-size: 0; flex: 1; }
.shopyli-ui .sh-product-card .sh-product-price { align-items: flex-start; min-inline-size: 0; block-size: auto; }
.shopyli-ui .sh-product-card .sh-product-name { margin: 0; }
.shopyli-ui .sh-card-price { color: var(--sh-brand); font: 700 1rem/1.5 var(--sh-font); unicode-bidi: isolate; white-space: normal; overflow-wrap: anywhere; }
.shopyli-ui .sh-card-price :is(span,bdi,del,ins) { font-family: inherit; }
.shopyli-ui .sh-card-price del { display: block; color: var(--sh-muted); font-size: .75rem; font-weight: 400; line-height: 1.5; }
.shopyli-ui .sh-card-price ins { text-decoration: none; }
.shopyli-ui .sh-card-price .woocommerce-Price-currencySymbol { white-space: nowrap; }
.shopyli-ui .sh-card-price:has(> del):has(> ins) { display: flex; flex-direction: column; }
.shopyli-ui .sh-card-price > ins { order: -1; }
.shopyli-ui .sh-card-price--range > .woocommerce-Price-amount:first-child .woocommerce-Price-currencySymbol { display: none; }
.shopyli-ui .sh-card-price-note, .shopyli-ui .sh-card-options { color: var(--sh-muted); font-size: .6875rem; line-height: 1.4; overflow-wrap: anywhere; }
.shopyli-ui .sh-product-media > .sh-card-badge { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.35; }
.shopyli-ui .sh-card-badge--sale { background: var(--sh-action); color: var(--sh-on-color); }
.shopyli-ui .sh-media-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--sh-control-line); }
.shopyli-ui .sh-media-fallback > .sh-icon { inline-size: 32%; block-size: 32%; }
.shopyli-ui .sh-media-image { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; color: transparent; background: var(--sh-media); }
.shopyli-ui .sh-media-image[hidden] { display: none; }
.shopyli-ui .sh-card-collection--list { grid-template-columns: minmax(0,1fr); }
.shopyli-ui .sh-product-card--list .sh-product-link { display: grid; grid-template-columns: minmax(0,min(30%,8rem)) minmax(0,1fr); align-items: center; }
.shopyli-ui .sh-product-card--list .sh-product-media { inline-size: 100%; }
.shopyli-ui .sh-product-card--spotlight { border: 0; border-radius: var(--sh-radius-lg); }
.shopyli-ui .sh-product-card--spotlight .sh-product-link { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding: .75rem; gap: 1rem; }
.shopyli-ui .sh-product-card--spotlight .sh-product-media { inline-size: min(100%,6rem); border-radius: .75rem; }
.shopyli-ui .sh-product-card--spotlight .sh-product-body { padding: 0; flex: 1 1 7rem; max-inline-size: 100%; }
.shopyli-ui .sh-home-hero .sh-product-card--spotlight .sh-product-link:focus-visible { outline-color: var(--sh-on-color); }
.shopyli-ui:lang(ar) .sh-product-card :is(h2,h3,h4,span) { font-family: var(--sh-font-ar); letter-spacing: 0; }
.shopyli-ui:lang(ar) .sh-product-card .sh-card-price, .shopyli-ui:lang(ar) .sh-product-card .sh-card-price * { font-family: var(--sh-font) !important; }
@media (max-width: 339px) { .shopyli-ui .sh-card-collection--grid { grid-template-columns: minmax(0,1fr); } }
@media (min-width: 760px) {
 .shopyli-ui .sh-card-collection--grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,12rem),1fr)); }
 .shopyli-ui .sh-product-card--spotlight .sh-product-media { inline-size: min(100%,8rem); }
}