/* =============================================
   CATEGORY 3D DESIGN SECTION
   Reuses the base .category / .product-card styles
   from category.css. This file only overrides the
   color theme (indigo/blue) and adds the empty-image
   placeholder. The section element carries both
   classes:  class="category category-3d"
   ============================================= */

.category.category-3d {
    --cat-primary: #4F46E5;
    --cat-secondary: #6366F1;
    --cat-accent: #818CF8;
    --cat-bg: #F5F6FE;
}

/* ─── Ornament ─── */
.category.category-3d .category-ornament {
    background: radial-gradient(circle, rgba(79,70,229,0.07) 0%, transparent 70%);
}

.category.category-3d .category-ornament::before {
    background: radial-gradient(circle, rgba(129,140,248,0.05) 0%, transparent 70%);
}

/* ─── Badge ─── */
.category.category-3d .category-badge {
    background: rgba(79,70,229,0.08);
    border-color: rgba(79,70,229,0.15);
}

/* ─── Arrows ─── */
.category.category-3d .category-arrow {
    border-color: rgba(79,70,229,0.18);
    box-shadow: 0 6px 20px rgba(79,70,229,0.10);
}

.category.category-3d .category-arrow:hover:not(.disabled) {
    box-shadow: 0 10px 28px rgba(79,70,229,0.30);
}

.category.category-3d .category-arrow:focus-visible,
.category.category-3d .product-card-btn:focus-visible,
.category.category-3d .category-dot:focus-visible {
    outline-color: var(--cat-primary);
}

/* ─── Dots ─── */
.category.category-3d .category-dot {
    background: rgba(79,70,229,0.22);
}

/* ─── Card hover ─── */
.category.category-3d .product-card:hover {
    box-shadow: 0 20px 60px rgba(79,70,229,0.12), 0 0 0 1px rgba(79,70,229,0.10);
}

.category.category-3d .product-card-image {
    background: #E9EAF9;
}

.category.category-3d .product-card-btn {
    box-shadow: 0 2px 12px rgba(79,70,229,0.20);
}

.category.category-3d .product-card-btn:hover {
    box-shadow: 0 8px 28px rgba(79,70,229,0.30);
}

/* =============================================
   EMPTY-IMAGE PLACEHOLDER
   Shown when a design has no image yet (user can
   set it later from the dashboard).
   ============================================= */

.product-card-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #A5A6C9;
    background:
        linear-gradient(135deg, rgba(79,70,229,0.04) 0%, rgba(129,140,248,0.06) 100%);
}

.product-card-image-placeholder svg {
    color: rgba(79,70,229,0.45);
}

.product-card-image-placeholder span {
    font-family: var(--cat-font-body);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}