/*
 * Product chip (Tts\Ui\ProductChip): a compact link to a product - its swatch
 * and name - where something names the products used in it rather than sells
 * them (the inspiration gallery). Not a product card: no price, no stock, no
 * lift. The whole chip is the link, at least the tap size tall; the text wraps
 * rather than truncates, so a name is never cut. Decision 21.
 */

.product-chip {
    display: flex;
    align-items: center;
    gap: var(--shop-space-3);
    min-height: var(--shop-tap);
    padding: var(--shop-space-1);
    padding-inline-end: var(--shop-space-3);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-md);
    background: var(--shop-surface);
    color: var(--shop-ink);
    text-decoration: none;
    transition: border-color var(--shop-duration) var(--shop-ease);
}

.product-chip:hover,
.product-chip:focus {
    color: var(--shop-ink);
    text-decoration: none;
}

.product-chip:hover {
    border-color: var(--shop-accent);
}

.product-chip__swatch {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--shop-radius-sm);
    object-fit: cover;
}

.product-chip__text {
    display: grid;
    min-width: 0;
}

.product-chip__name {
    font-size: var(--shop-text-sm);
    font-weight: var(--shop-weight-semibold);
    line-height: var(--shop-leading-snug);
    overflow-wrap: anywhere;
}

.product-chip__detail {
    color: var(--shop-text);
    font-size: var(--shop-text-xs);
    line-height: var(--shop-leading-snug);
    overflow-wrap: anywhere;
}