/* ═══════════════════════════════════════════════════════════════
   WOOKIT — Product Card
   Compact product link card: title left, image right.
   Fills 100% of its parent (width + height).

   One master control: `font-size` on .wookit-product-card.
   Everything inside is expressed in em, so changing that one value
   scales the whole card — padding, gap, tag, title, price, image.
   Override via the `size` shortcode attribute or by setting
   --wookit-pc-size on any ancestor.
   ═══════════════════════════════════════════════════════════════ */

.wookit-product-card {
    font-size: var(--wookit-pc-size, 15px) !important;

    display: flex;
    align-items: center;
    gap: 1em;
    width: 100%;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box !important;
    padding: 0.85em 1em !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--wookit-radius-md) !important;
    color: inherit !important;
    font-family: var(--wookit-font) !important;
    transition: background .15s ease;
    overflow: hidden;
}

/* Kill inherited link underline (theme styles, <ins> defaults, etc). */
.wookit-product-card,
.wookit-product-card *,
.wookit-product-card:hover,
.wookit-product-card:hover *,
.wookit-product-card:focus,
.wookit-product-card:focus *,
.wookit-product-card:focus-visible,
.wookit-product-card:focus-visible * {
    text-decoration: none !important;
}
.wookit-product-card:hover,
.wookit-product-card:focus-visible {
    background: transparent !important;
    outline: none !important;
}

/* ── Force Elementor widget ancestors to stretch + full width ──
   Elementor wraps the shortcode in .elementor-widget-container /
   .elementor-widget, which default to width/height auto. Force
   them so 100%/100% on the card actually resolves against the
   grid cell, and so sibling cards end up identical widths. */
.elementor-widget-shortcode:has(.wookit-product-card),
.elementor-widget:has(> .elementor-widget-container > .wookit-product-card) {
    align-self: stretch;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.elementor-widget-container:has(> .wookit-product-card) {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
}

/* ── Left column: tag + title + price ──────────────────────────── */
.wookit-product-card-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35em;
}
.wookit-product-card-tag {
    font-size: 0.7em !important;
    font-weight: 600 !important;
    color: var(--wookit-accent) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: left !important;
    line-height: 1 !important;
}
.wookit-product-card-title {
    font-size: 1.15em !important;
    font-weight: 700 !important;
    color: var(--wookit-text) !important;
    text-align: left !important;
    line-height: 1.25 !important;
    display: -webkit-box;
    -webkit-line-clamp: var(--wookit-product-card-title-lines, 2);
    line-clamp: var(--wookit-product-card-title-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere !important;
}
.wookit-product-card-price {
    font-size: 1em !important;
    font-weight: 500 !important;
    color: var(--wookit-body) !important;
    text-align: left !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis !important;
}
/* Stack regular (crossed-out) price above the sale price. */
.wookit-product-card-price del,
.wookit-product-card-price ins {
    display: block;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis !important;
}
.wookit-product-card-price del {
    color: var(--wookit-muted) !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    font-size: 0.85em !important;
}
.wookit-product-card-price ins {
    color: var(--wookit-accent) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.wookit-product-card-price .woocommerce-Price-amount {
    color: inherit !important;
}
.wookit-product-card-price .woocommerce-Price-currencySymbol {
    margin-right: 1px !important;
}

/* ── Right column: image (square, scales with font-size) ───────── */
.wookit-product-card-media {
    flex: 0 0 auto;
    align-self: center;
    aspect-ratio: 1 / 1;
    width: 5em;
    border-radius: var(--wookit-radius-sm) !important;
    overflow: hidden;
    background: var(--wookit-surface-alt) !important;
}
.wookit-product-card-media img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}