.card {
    width: 290px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
    border-radius: 32px;
    padding: 10px;
    backface-visibility: hidden; /* Standard trick to force GPU acceleration */
    transform: translateZ(0);    /* Another way to trigger "Layering" */
}

/* ── Image block: photo + overlapping action row ── */
.card__image-block {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    background: #e8e7e0;
    cursor: pointer;
}
/* ffbba6 */
/* Real photo — swap placeholder with this */
.card__photo {
    width: 100%;           /* The ratio will be calculated based on this width */
    height: auto;          /* Crucial: prevents the fixed 380px from over-riding the ratio */
    aspect-ratio: 3 / 4;   /* This defines the shape */
    object-fit: cover;     /* Ensures the image fills the space without stretching */
    display: block;
}

.card__photo-placeholder {
    width: 100%;
    height: 360px;
    display: block;
}

/* Action row pinned to bottom of image block */
.card__actions {
    position: absolute;
    bottom: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Buy Now pill */
.btn-buy {
    flex: 1;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: none;
    border-radius: 100px;
    padding: 7px 7px 7px 20px;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

/* .btn-buy:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.14); } */

.btn-buy__label {
    font-family: Host Grotesk, prompt, sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #1a1a18;
}

.btn-buy__arrow {
    width: 54px;
    height: 30px;
    min-width: 54px;
    max-width: 54px;
    min-height: 30px;
    max-height: 38px;
    background: #FFBBA6;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 0;
    transition: background 0.2s;  /* changed from transform */
}

.btn-buy__arrow .arrow-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-buy__arrow .arrow {
    width: 10px;
    background: #FFBBA6;   /* matches pill bg so it's "invisible" — just the chevron shows */
    height: 2px;
    position: relative;
    transition: 0.2s;
}

.btn-buy__arrow .arrow::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    display: inline-block;
    top: -3px;
    right: 3px;
    transition: 0.2s;
    padding: 3px;
    transform: rotate(-45deg);
}

/* On hover — slide the chevron forward */
.btn-buy:hover .btn-buy__arrow .arrow::before {
    transform: translateX(3px) rotate(-45deg);
}
.btn-buy:hover .btn-buy__arrow .arrow {
    background: #ffffff;
}
.btn-buy__arrow:hover {
    background: #f59d83;
}

/* Price pill — elongated, same height as buy button */
.price-pill {
    height: 40px;
    padding: 0 18px;
    background: white; /*D1C961 greyish d0cfc8*/
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Prompt;
    font-size: 15px;
    color: #4a4a44;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Info row ── */
.card__info {
    background: #f2f2ee;
    border-radius: 20px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card__info-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.product-name {
    font-family: Host Grotesk, prompt, sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #1a1a18;
    letter-spacing: -0.02em;
}

.product-variant {
    font-family: creato display, prompt, sans-serif;
    font-size: 13.5px;
    font-weight: 300;
    color: #9a9a94;
}

.product-size {
    font-family: Noto Sans Mono;
    font-size: 13.5px;
    font-weight: 300;
    color: #9a9a94;
}