.img-ph{
    height:260px;border-radius:16px;background:#e9ecef;
    display:flex;align-items:center;justify-content:center;text-align:center;
    color:#6c757d;font-weight:600;
}
.option-card{cursor:pointer}
.option-card.active{outline:4px solid #0d6efd}
.price-big{font-size:2rem;font-weight:800}
.sticky{position:sticky;top:20px}

.hero-media {
    width: 100%;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
}
.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hide-on-mobile { display: none; }
@media (max-width: 768px) {
    .hero-media { height: 220px; }
    .hide-on-mobile { display: none; }
}

.badge strong { color: inherit; }
.bi { font-size: 1.1rem; }

/* ring size area */

.ring-card {
    position: relative;
}

.ring-picker {
    position: relative;
    z-index: 2;
}

.ring-size-box {
    position: absolute;
    top: 45px;
    right: 12px;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 4px;
    min-width: 255px;
}

.ring-size-row {
    display: grid;
    grid-template-columns: 80px 40px 40px 40px;
    column-gap: 4px;
    align-items: center;
}

.ring-size-label {
    white-space: nowrap;
    text-align: left;
}

.ring-size-col {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    white-space: nowrap;
}

.ring-size-text {
    white-space: nowrap;
    text-align: left;
}

@media (max-width: 768px) {
    .ring-card {
        position: static;
    }

    .ring-size-box {
        position: static;
        top: auto;
        right: auto;
        min-width: 0;
        width: 100%;
        margin: 8px 0 12px 0;
        align-items: flex-start;
        gap: 6px;
    }

    .ring-size-row {
        grid-template-columns: 80px repeat(3, minmax(0, 1fr));
        width: 100%;
        column-gap: 8px;
    }

    .ring-size-label,
    .ring-size-col,
    .ring-size-text {
        text-align: left;
    }
}