/* Bazat pe componenta nativă Bootstrap `.card` (card / card-body / card-title / .badge /
   .btn). Design: media gri rotunjită cu swatch-uri suprapuse jos-centru, buton „Adaugă
   în coș" outline cu iconiță coș. Clase custom cu o singură cratimă.
   Border + padding mic sunt pe CARD-UL însuși (nu pe un wrapper extern) — „boxul" de
   produs e identic vizual indiferent unde e folosit (rail ProductSlider, grid static
   CustomTabsCollection etc.); un wrapper de tip `.product-item` adaugă DOAR lățimea. */
.product-card {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    padding: 0.5rem;
}

/* ===== Media (imagine + badge + swatches) ===== */
/* `aspect-ratio:1/1` e doar mărimea PREFERATĂ (card normal, o singură celulă de grid);
   `flex:1 1 auto` o lasă să crească/scadă ca să ocupe tot ce rămâne din înălțimea
   cardului DUPĂ ce `.product-card-body` (flex-shrink:0, mărime naturală) își ia spațiul
   — necesar la cardurile „mari" din `.smart-grid` (`grid-row:span 2`), care altfel
   rămâneau cu un gol alb sub media pătrată de dimensiune fixă. */
.product-card-media {
    aspect-ratio: 1 / 1;
    flex: 1 1 auto;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.product-card-media-link {
    padding: 1.5rem;
}

.product-card-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* peste .badge Bootstrap: poziționare colț + culoarea de discount din token */
.product-card-badge {
    top: 0.5rem;
    left: 0.5rem;
    line-height: var(--text-s-line);
    z-index: 1;
    background-color: var(--color-bg-discount);
    color: var(--color-content-inverse);
}

/* dots de culoare sub titlul produsului (nu suprapuse pe media) — aceeași
   dimensiune ca `.filters-swatch` (Filters, categorie nivel 2/3), pentru
   consistență vizuală între cele două locuri unde apar culori de produs. */
.product-card-swatch {
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--color-border-primary);
}

/* ===== Body ===== */
.product-card-body {
    flex: 0 0 auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* etichetă opțională de categorie (ex. „Tehnologie") deasupra titlului — folosită
   în colecțiile tematice (CategoryCollection); omisă implicit (produs fără categorie) */
.product-card-category {
    font-size: var(--text-s-size);
    color: var(--color-content-tertiary);
}

/* pastilă opțională „🔥 N cumpărate azi" (Ce e popular acum) — token-uri semantice
   dedicate (--color-bg-popular/--color-content-popular-inverse), neutilizate până acum.
   `align-self:flex-start` ca să rămână o pastilă compactă, nu întinsă pe toată lățimea
   (părintele `.product-card-body` e `d-flex flex-column`, stretch implicit) */
.product-card-popularity {
    align-self: flex-start;
    background-color: var(--color-bg-popular);
    color: var(--color-content-popular-inverse);
    font-size: var(--text-s-size);
    font-weight: var(--font-weight-semibold);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-pill);
}

.product-card-title-link {
    color: var(--color-content-primary);
}

.product-card-title {
    font-family: var(--font-family-primary);
    font-size: var(--text-m-size);
    line-height: var(--text-m-line);
    font-weight: var(--font-weight-semibold);
    /* limitează titlul la 2 rânduri, restul cu elipsă */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-title-link:hover .product-card-title {
    color: var(--color-content-brand);
}

.product-card-price-old {
    font-size: var(--text-s-size);
    color: var(--color-content-tertiary);
    text-decoration: line-through;
}

.product-card-price {
    font-size: var(--text-l-size);
    line-height: var(--text-l-line);
    font-weight: var(--font-weight-semibold);
    color: var(--color-content-primary);
}

.product-card-price-label {
    font-size: var(--text-s-size);
    font-weight: var(--font-weight-regular);
    color: var(--color-content-tertiary);
}

/* buton outline (nu plin): fundal alb, border subtil, text închis + iconiță coș */
.product-card-add {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-content-primary);
    font-weight: var(--font-weight-semibold);
    padding: 0.625rem 1rem;
}

.product-card-add:hover {
    background-color: var(--color-bg-secondary);
    color: var(--color-content-primary);
}