/* PRODUCT GRID (DESKTOP) */
.app-grid {
    display: grid; gap: 20px; margin-bottom: 60px; grid-template-columns: repeat(2, 1fr);
}

/* Only #secondaryGrid (not the whole .app-grid class) fades between
   "Новинки"/"Знижки" — see switchTab() in js/app.js, which toggles this
   element's opacity directly. Scoped to the id so catalog/account grids
   (which never get their opacity touched) aren't affected. */
#secondaryGrid { transition: opacity 0.25s ease; }

@media (min-width: 768px) { .app-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .app-grid { grid-template-columns: repeat(4, 1fr); } }
/* NOTE: no 5-column breakpoint here on purpose — that only applies to the
   home page's full-width grid (no sidebar eating into the row). See
   css/hero-categories.css for that page-specific addition. The catalog
   page's grid sits next to a 280px sidebar and stays at 4 columns max,
   matching the original catalog design. */

/* BLOG GRID (DESKTOP) */
.blog-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 30px; }

/* APP CARD (reusable product card component) */
.app-card {
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 4px;
    position: relative; display: flex; flex-direction: column; transition: all 0.2s ease-in-out;
    height: 100%; z-index: 1;
}
.app-card:hover { border-color: var(--accent-gold); box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 10; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.card-image-box { width: 100%; aspect-ratio: 1 / 1; background: #080808; position: relative; overflow: hidden; border-radius: 4px 4px 0 0; }
.card-bg-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.app-card:hover .card-bg-image { transform: scale(1.05); }

.card-wishlist-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.3s ease;
}
.card-wishlist-btn:hover {
    background: rgba(0, 0, 0, 0.5);
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}
.card-wishlist-btn.w-active {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}
@keyframes heartJump {
    0% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.2) translateY(-2px); }
    100% { transform: scale(1) translateY(0); }
}
.card-wishlist-btn.w-active i {
    animation: heartJump 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.app-card:hover .card-wishlist-btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.card-badge {
    position: absolute; top: 10px; left: 10px; background: var(--accent-gold); color: #000;
    font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; z-index: 5;
}

.card-info { position: relative; padding: 15px; flex-grow: 1; display: flex; flex-direction: column; background: var(--bg-card); border-radius: 0 0 4px 4px; }
.app-name { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 8px; line-height: 1.4; min-height: 38px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stock-status { font-size: 11px; font-weight: 500; margin-bottom: 10px; display: flex; align-items: center; gap: 5px; }
.stock-status.available { color: #66bb6a; }
.stock-status.unavailable { color: #ef5350; }
.card-price { font-size: 18px; font-weight: 500; color: #fff; margin-top: auto; }
.card-price span { font-size: 12px; color: #666; margin-left: 5px; font-weight: normal;}

/* HOVER DROPDOWN */
.hover-dropdown {
    position: absolute; top: 100%; left: -1px; right: -1px; background: var(--bg-card);
    border: 1px solid var(--accent-gold); border-top: none; border-radius: 0 0 4px 4px; padding: 0 15px 15px;
    opacity: 0; visibility: hidden; transform: translateY(-5px); transition: all 0.2s ease-in-out;
    box-shadow: 0 15px 30px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 12px;
}
.app-card:hover .hover-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.weight-selector { display: flex; gap: 5px; width: 100%; }
.weight-btn {
    flex: 1; font-size: 11px; color: #999; background: #1a1a1a; padding: 8px 0; border: 1px solid #333;
    border-radius: 4px; transition: 0.3s; font-weight: 500; text-align: center; cursor: pointer;
}
.weight-btn:hover { color: #fff; border-color: #555; }
.weight-btn.active { background: transparent; color: var(--accent-gold); border-color: var(--accent-gold); }

.btn-action-cart {
    width: 100%; background: var(--accent-gold); color: #000; padding: 12px; border-radius: 4px;
    font-weight: 500; font-size: 13px; text-transform: uppercase; cursor: pointer; border: none;
    transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-action-cart:hover { background: #fff; }
.btn-action-cart:disabled { background: #333; color: #777; cursor: not-allowed; }
.btn-action-cart:disabled:hover { background: #333; }

.mobile-cart-btn {
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 44px;
    height: 44px;
    background: var(--accent-gold);
    color: #000;
    border-radius: 8px 0 4px 0;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    border: none;
}
.mobile-cart-btn:hover { background: #fff; }
.mobile-cart-btn:disabled { background: #333; color: #777; cursor: not-allowed; }
.mobile-cart-btn:disabled:hover { background: #333; }

/* List-view markup (used by the catalog page's grid/list toggle) is part
   of the shared card component but hidden by default — only the catalog
   page's .app-grid.list-view rules (css/catalog.css) turn it on. */
.list-middle-col, .card-divider, .list-right-col, .list-wishlist { display: none !important; }