.restaurant-hero,
.product-card {
    position: relative;
}

.product-favorite-button,
.restaurant-follow-button {
    border: 1px solid #d7e5e2;
    background: rgba(255,255,255,.95);
    color: #64748b;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    transition: transform .16s ease, background .16s ease, color .16s ease;
}

.product-favorite-button {
    position: absolute;
    z-index: 4;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 23px;
    box-shadow: 0 7px 22px rgba(15,23,42,.16);
}

.product-favorite-button:hover,
.restaurant-follow-button:hover { transform: translateY(-1px); }
.product-favorite-button.is-active { color: #e11d48; background: #fff1f2; border-color: #fecdd3; }

.hero-follow-button {
    position: absolute;
    z-index: 5;
    top: 18px;
    right: 18px;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 14px;
}
.hero-follow-button.is-active,
.account-follow-card .restaurant-follow-button.is-active {
    color: #087568;
    background: #dff8f1;
    border-color: #99e2d1;
}

.account-feature-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.account-feature-head h2 { margin:3px 0; }
.account-feature-head p { margin:0; color:#64748b; }
.account-feature-head > span { width:50px; height:50px; display:grid; place-items:center; border-radius:16px; color:#e11d48; background:#fff1f2; font-size:25px; }
.follows-account-card .account-feature-head > span { color:#087568; background:#e8faf5; }
.account-favorites-grid,
.account-follow-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.account-favorite-card,
.account-follow-card { display:grid; grid-template-columns:120px minmax(0,1fr); gap:15px; min-width:0; padding:12px; border:1px solid #dce6ee; border-radius:18px; background:#fff; }
.account-favorite-card > img,
.account-follow-card > img,
.favorite-placeholder { width:120px; height:120px; object-fit:cover; border-radius:14px; background:#eef7f5; display:grid; place-items:center; font-size:34px; }
.account-favorite-card h3,
.account-follow-card h3 { margin:4px 0; font-size:18px; }
.account-favorite-card span,
.account-follow-card span,
.account-follow-card p { color:#64748b; font-size:12px; margin:0; }
.account-favorite-card strong { color:#087568; }
.account-favorite-actions { display:flex; align-items:center; gap:8px; margin-top:12px; }
.account-favorite-actions .btn { min-height:38px; padding:0 13px; }
.account-favorite-actions .product-favorite-button,
.account-favorite-actions .restaurant-follow-button { position:static; width:auto; min-width:42px; height:38px; border-radius:12px; box-shadow:none; padding:0 12px; }
.feature-empty { grid-column:1/-1; text-align:center; padding:38px 16px; border:1px dashed #cbd5e1; border-radius:18px; }
.feature-empty > span { display:block; color:#0f8f80; font-size:42px; }
.feature-empty h3 { margin:8px 0 4px; }
.feature-empty p { color:#64748b; margin:0 auto 16px; max-width:480px; }
.favorite-toast { position:fixed; z-index:10000; left:50%; bottom:78px; transform:translate(-50%,16px); padding:11px 16px; border-radius:999px; background:#14213d; color:#fff; font-weight:800; opacity:0; pointer-events:none; transition:.2s ease; box-shadow:0 12px 30px rgba(15,23,42,.25); }
.favorite-toast.is-visible { opacity:1; transform:translate(-50%,0); }

@media (max-width: 720px) {
    .hero-follow-button { top:12px; right:12px; min-height:36px; padding:0 11px; font-size:12px; }
    .product-favorite-button { width:36px; height:36px; top:8px; right:8px; font-size:20px; }
    .account-favorites-grid,.account-follow-grid { grid-template-columns:1fr; }
    .account-favorite-card,.account-follow-card { grid-template-columns:88px minmax(0,1fr); padding:9px; gap:11px; }
    .account-favorite-card > img,.account-follow-card > img,.favorite-placeholder { width:88px; height:88px; border-radius:12px; }
    .account-favorite-actions { flex-wrap:wrap; margin-top:8px; }
    .account-feature-head > span { width:42px; height:42px; }
}