:root{
    --diy:#121334;
    --muted:#6c757d;
    --card-radius:1rem;
}
body{background:#f6f7f9;}
.trim-card{
    border:0;
    border-radius:var(--card-radius);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    overflow:hidden;
    height:100%;
}
.trim-hero{
    position:relative;
    height:170px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
}
.trim-hero h3{
    position:absolute;
    left:1rem;
    top:.75rem;
    color:#fff;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.trim-hero img{
    max-height:140px;
    max-width:180px;
    margin-bottom: 15px;
    width:auto;
    object-fit:contain;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.35));
}
.price-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1rem;
    margin-top:.25rem;
}
.eyebrow{
    font-size:.75rem;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.04em;
}
.price{
    font-weight:700;
    font-size:1.25rem;
}

.specs .spec{

    gap:.5rem;
    padding:.25rem 0;
    align-items:center;
    text-align: center;
    font-size:.95rem;
}
.spec i{
    font-size:1.1rem;
    color:#6b7280;
}

.notice{
    color:var(--muted);
    font-size:.75rem;
    text-align:center;
    margin-top:.5rem;
}

/* trim themes */
.theme-diy .trim-hero{ background:linear-gradient(120deg,var(--diy), #3264B3FF); }
.build-btn{
    border-radius:.75rem;
    font-weight:700;
    letter-spacing:.02em;
    width:100%;
    padding:.85rem 1rem;
}