/* ═══════════════════════════════════════════════════
   ITEM CARD — enhanced grid card + skeleton loading
   ═══════════════════════════════════════════════════ */

/* ─── Card shell ────────────────────────────────────── */
.item-card {
    border: 1px solid rgba(0,0,0,0.09) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 6px 20px rgba(0,0,0,0.06);
    transition: transform 0.28s cubic-bezier(.22,.68,0,1.2),
                box-shadow 0.28s ease;
    will-change: transform;
    position: relative;
}
.item-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1), 0 22px 52px rgba(0,0,0,0.15) !important;
}

/* ─── Image wrapper ─────────────────────────────────── */
.item-card-img-wrapper {
    display: block;
    overflow: hidden;
    position: relative;
}
.item-card-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease, opacity 0.25s ease;
    filter: contrast(1.04) saturate(1.1);
}
@media (max-width: 576px) {
    .item-card-img { height: 195px; }
}
.item-card:hover .item-card-img {
    transform: scale(1.07);
}

/* ─── Gradient overlay ──────────────────────────────── */
.item-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(18,12,6,0.38)  0%,
        rgba(0,0,0,0)       42%,
        rgba(8,4,2,0.62)   100%
    );
    pointer-events: none;
    transition: opacity 0.32s ease;
    z-index: 1;
}
.item-card:hover .item-card-gradient {
    opacity: 0.85;
}

/* ─── Overlay layer (badges + heart) ────────────────── */
.item-card-overlays {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.item-card-overlays > * {
    pointer-events: auto;
}

/* ─── Category badge ────────────────────────────────── */
/* .cat-name already styled by style.css; just re-position */

/* ─── Rating pill ───────────────────────────────────── */
.item-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,0,0,0.52);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    line-height: 1;
}

/* ─── Discount pill ─────────────────────────────────── */
.item-discount-badge {
    display: inline-block;
    background: var(--bs-danger, #dc3545);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

/* ─── Favourite heart ───────────────────────────────── */
.item-fav-btn {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.item-card:hover .item-fav-btn,
.item-fav-btn.is-fav {
    opacity: 1;
    transform: scale(1);
}
.item-fav-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--bs-danger, #dc3545);
    text-decoration: none;
    font-size: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: background 0.18s ease, transform 0.18s ease;
}
.item-fav-btn a:hover {
    background: #fff;
    transform: scale(1.12);
}

/* ─── Item name link ─────────────────────────────────── */
.item-name-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.item-name-link:hover {
    color: var(--bs-primary);
}

/* ─── Footer real content ────────────────────────────── */
.item-card-footer-real { transition: opacity 0.2s ease; }

/* ══════════════════════════════════════════════════════
   SKELETON LOADING
   ══════════════════════════════════════════════════════ */

@keyframes sk-shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position:  800px 0; }
}

.sk-bg {
    background: linear-gradient(90deg,
        #e8e8e8 25%,
        #f5f5f5 50%,
        #e8e8e8 75%);
    background-size: 1600px 100%;
    animation: sk-shimmer 1.6s infinite linear;
    border-radius: 7px;
}

/* ── Image area shimmer ── */
.is-loading .item-card-img-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(90deg,
        #e8e8e8 25%,
        #f5f5f5 50%,
        #e8e8e8 75%);
    background-size: 1600px 100%;
    animation: sk-shimmer 1.6s infinite linear;
}

/* ── Hide real content during load ── */
.is-loading .item-card-img       { opacity: 0; }
.is-loading .item-card-overlays  { opacity: 0; pointer-events: none; }
.is-loading .item-card-gradient  { opacity: 0; }
.is-loading .item-card-content   { opacity: 0; pointer-events: none; }
.is-loading .item-card-footer-real { opacity: 0; pointer-events: none; }

/* ── Show skeleton lines during load ── */
.sk-line   { display: none; }
.sk-footer { display: none; }

.is-loading .sk-line   { display: block; }
.is-loading .sk-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Skeleton line sizes */
.sk-line { height: 13px; margin-bottom: 10px; }
.sk-line-short { width: 42%; }
.sk-line-long  { width: 75%; margin-bottom: 0; }
.sk-line-price { width: 95px;  height: 18px; flex-shrink: 0; }
.sk-line-btn   { width: 90px;  height: 36px; flex-shrink: 0; }