/* ============================================================
   Product Card — usado en home, shop y cualquier loop de WC
   ============================================================ */

.product-card {
    background: var(--color-tarjeta);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.product-card:hover,
.product-card:focus-within {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* ---- Image zone ---- */
.product-card__image-zone {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-oscuro);
}

.product-card__image-link {
    display: block;
    height: 100%;
}

.product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.product-card:hover .product-card__image {
    transform: scale(1.04);
}

.product-card__image--placeholder {
    background: linear-gradient(135deg, #2a1f1a 0%, #1a1310 100%);
    height: 100%;
}

/* Badges (top-left of image zone) — pegado al borde izquierdo (left: 0)
   para que el SCA se vea como una etiqueta que sale del borde, no un botón
   flotante. Se mantiene el margen superior para no invadir la esquina
   redondeada de la tarjeta. */
.product-card__badges {
    position: absolute;
    top: var(--spacing-sm);
    left: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* El badge SCA dentro de la tarjeta de catálogo: sin redondeo a la
   izquierda (nace del borde de la foto), redondeado solo a la derecha. */
.product-card__badges .sca-badge--gold {
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    padding-left: var(--spacing-sm);
}

/* Botón "Ver ficha" — abajo a la izquierda, mismo look que "Añadir". */
.product-card__view-link {
    position: absolute;
    bottom: var(--spacing-sm);
    left: var(--spacing-sm);
    z-index: 2;
}

/* Country name in title — rendered in gold (tono oscuro para contraste AA sobre la tarjeta blanca) */
.product-card__pais {
    color: var(--color-dorado-suave);
}

/* Inline flag next to country name in the title */
.product-card__flag-inline {
    display: inline-block;
    vertical-align: middle;
    border-radius: 2px;
    margin-right: 4px;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}

/* Discount badge — estrella/sello dorado con el % de descuento.
   drop-shadow (sigue el contorno recortado, a diferencia de box-shadow)
   para que no se pierda contra fotos oscuras o claras. */
.product-card__offer-badge {
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-dorado);
    color: var(--color-oscuro);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
    clip-path: polygon(
        50% 0%, 63.78% 16.74%, 85.36% 14.64%, 83.26% 36.22%,
        100% 50%, 83.26% 63.78%, 85.36% 85.36%, 63.78% 83.26%,
        50% 100%, 36.22% 83.26%, 14.64% 85.36%, 16.74% 63.78%,
        0% 50%, 16.74% 36.22%, 14.64% 14.64%, 36.22% 16.74%
    );
    z-index: 2;
}

/* ---- Content zone ---- */
.product-card__content {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
}

/* Title */
.product-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
}

.product-card__title a {
    color: var(--color-oscuro);
    transition: color var(--transition-fast);
}

.product-card__title a:hover {
    color: var(--color-dorado-suave);
}

/* Tasting notes */
.product-card__notes {
    font-size: var(--font-size-sm);
    color: var(--color-texto-suave);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    min-height: 42px;
}

/* Profile bars in card (Intensidad / Acidez / Cuerpo, stacked) */
.product-card__profile {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: var(--spacing-xs);
}

.product-card__profile .profile-bar__label {
    min-width: 80px;
    color: var(--color-texto-suave);
}

/* Divider above the buying area */
.product-card__divider {
    border: 0;
    border-top: 1px solid var(--color-borde);
    margin: var(--spacing-md) 0;
}

/* Format selector (250g / 1kg) — two card-style buttons */
.product-card__weights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    /* Room for the discount badge that protrudes above the 1kg button */
    padding-top: 10px;
}

.product-card__weight {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--spacing-md) var(--spacing-sm);
    border: 1.5px solid transparent;
    border-radius: var(--radius-card);
    background: var(--color-beige);
    color: var(--color-oscuro);
    cursor: pointer;
    text-align: center;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

/* Discount badge — centered on the top edge, half in / half out. A white
   ring (border) keeps it visible regardless of what's behind it. */
.product-card__weight-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-dorado);
    color: var(--color-oscuro);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 9999px;
    border: 1.5px solid var(--color-tarjeta);
    box-shadow: var(--shadow-card);
    pointer-events: none;
    white-space: nowrap;
    line-height: 1.5;
}

.product-card__weight:hover {
    border-color: var(--color-dorado);
}

.product-card__weight.is-selected {
    background: var(--color-tarjeta);
    border-color: var(--color-dorado);
    color: var(--color-oscuro);
}

.product-card__weight-price {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.1;
}

.product-card__weight-unit {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-texto-suave);
}

/* Molienda note (plain label, not a link) */
.product-card__molienda {
    font-size: var(--font-size-xs);
    color: var(--color-texto-suave);
    margin: var(--spacing-sm) 0 0;
}

.product-card__molienda-note {
    font-style: italic;
}

/* Footer: price (with discount) + add button */
.product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-top: auto;
    padding-top: var(--spacing-md);
}

.product-card__pricing {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.product-card__price {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-oscuro);
    line-height: 1;
}

.product-card__price-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.product-card__price-meta:empty {
    display: none;
}

.product-card__price-was {
    font-size: var(--font-size-sm);
    color: var(--color-texto-suave);
    text-decoration: line-through;
}

.product-card__discount {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: #fff;
    background: var(--color-oscuro);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    line-height: 1.3;
}

.product-card__add {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.product-card__add svg {
    width: 14px;
    height: 14px;
}

/* Peso sin stock: atenuado y tachado (sigue clickeable para ver "Sin stock"). */
.product-card__weight--out {
    opacity: 0.45;
    text-decoration: line-through;
}

/* Botón "Añadir" deshabilitado por falta de stock. */
.product-card__add.is-disabled {
    background: var(--color-borde);
    border-color: var(--color-borde);
    color: var(--color-texto-suave);
    cursor: not-allowed;
    pointer-events: none;
}
.product-card__add.is-disabled svg { display: none; }

@media (min-width: 1281px) {
    .product-card {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}