:root {
    --card-radius: 1rem;
}

.card {
    border: 0;
    border-radius: var(--card-radius);
    box-shadow: 0 10px 20px rgba(0,0,0,.06);
}

    .card img {
        border-top-left-radius: var(--card-radius);
        border-top-right-radius: var(--card-radius);
    }

.badge-slim {
    font-weight: 500;
    letter-spacing: .2px;
}

.price {
    font-size: 1.1rem;
    font-weight: 700;
}

.oldprice {
    text-decoration: line-through;
    color: #888;
    font-weight: 500;
    margin-left: .5rem;
}

.product-grid {
    row-gap: 1.5rem;
}

.hero {
    background: radial-gradient(40% 60% at 70% 10%, #fff7db, #ffffff);
    border-radius: 1.25rem;
}

    .hero h1 {
        font-weight: 800;
    }

.sticky-toc { position: sticky; top: 80px; }
.toc-list li { margin-bottom: .35rem; }
html { scroll-behavior: smooth; }
h1[id], h2[id], h3[id] { scroll-margin-top: 80px; }