/* ==========================================================================
   Sealed Products page
   ========================================================================== */

/* Strip old-theme parchment background */
.site-main:has(.sealed-page),
.page-content:has(.sealed-page) {
    background: transparent !important;
    background-color: transparent !important;
}

/* Hide WP default page title */
.site-main:has(.sealed-page) h1.page-title,
.site-main:has(.sealed-page) .page-header,
.site-main:has(.sealed-page) .entry-header {
    display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Page shell                                                                   */
/* -------------------------------------------------------------------------- */

.sealed-page {
    padding: var(--space-12) 0;
}

/* -------------------------------------------------------------------------- */
/* Hero                                                                         */
/* -------------------------------------------------------------------------- */

.sealed-page__hero {
    text-align: center;
    padding: var(--space-10) var(--container-pad) var(--space-10);
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-olive-deep);
}

.sealed-page__title {
    font-family: var(--font-heading) !important;
    font-size: var(--text-4xl) !important;
    font-weight: 900 !important;
    color: var(--color-parchment) !important;
    margin: 0 0 var(--space-3) !important;
    letter-spacing: var(--tracking-tight) !important;
}

.sealed-page__subtitle {
    font-size: var(--text-lg) !important;
    color: var(--color-stone-mid) !important;
    max-width: 520px;
    margin: 0 auto !important;
    line-height: var(--leading-snug) !important;
}

/* -------------------------------------------------------------------------- */
/* Category tiles                                                               */
/* -------------------------------------------------------------------------- */
.sealed-categories {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border-subtle);
}

.sealed-category-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: var(--color-vault);
    border: 1px solid var(--color-olive-deep);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.sealed-category-btn:hover,
.sealed-category-btn.active {
    background: var(--color-vault-raised);
    border-color: var(--color-purple);
    color: var(--color-purple-light);
    box-shadow: 0 0 0 1px var(--color-purple-muted);
}

.sealed-category-btn.active {
    background: rgba(155, 81, 224, 0.12);
}

/* -------------------------------------------------------------------------- */
/* Sealed product card — box art focus                                          */
/* -------------------------------------------------------------------------- */
.sealed-card {
    position: relative;
    background: var(--color-vault);
    border: 1px solid var(--color-olive-deep);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
    text-decoration: none;
    display: block;
}

.sealed-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-olive-mid);
}

/* Museum frame inner border */
.sealed-card::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(107, 106, 78, 0.2);
    border-radius: var(--radius-base);
    pointer-events: none;
    z-index: 1;
}

.sealed-card__image-wrap {
    position: relative;
    width: 100%;
    padding-top: 80%; /* box art ratio */
    background: var(--color-obsidian);
    overflow: hidden;
}

.sealed-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: var(--space-3);
    transition: transform var(--transition-slow);
}

.sealed-card:hover .sealed-card__image {
    transform: scale(1.04);
}

.sealed-card__body {
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    position: relative;
    z-index: 2;
}

.sealed-card__type {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-olive-light);
    margin-bottom: var(--space-1);
}

.sealed-card__name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sealed-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.sealed-card__price {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-gold);
}

/* -------------------------------------------------------------------------- */
/* Preorder badge                                                               */
/* -------------------------------------------------------------------------- */
.sealed-card__preorder-badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    padding: var(--space-1) var(--space-2);
    background: var(--color-purple);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    z-index: 2;
}

/* -------------------------------------------------------------------------- */
/* Sealed grid                                                                  */
/* -------------------------------------------------------------------------- */
.sealed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-6);
}

/* CTA label */
.sealed-card__cta {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    color: var(--color-olive-light);
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.sealed-card:hover .sealed-card__cta {
    color: var(--color-gold);
}

/* Sold-out badge */
.sealed-card__oos-badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    padding: var(--space-1) var(--space-2);
    background: rgba(0,0,0,0.7);
    color: var(--color-stone-mid);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-olive-deep);
    z-index: 2;
}

.sealed-card--oos .sealed-card__image {
    filter: grayscale(40%) brightness(0.7);
}

.sealed-card--oos .sealed-card__price {
    color: var(--color-text-muted) !important;
}

/* Empty state */
.sealed-empty {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    color: var(--color-stone-mid);
    font-size: var(--text-lg);
    border: 1px dashed var(--color-olive-deep);
    border-radius: var(--radius-lg);
}

/* Price colour for WC html output */
.sealed-card__price .woocommerce-Price-amount,
.sealed-card__price .amount {
    color: var(--color-gold) !important;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                   */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .sealed-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .sealed-categories {
        gap: var(--space-2);
    }
}

@media (max-width: 480px) {
    .sealed-grid {
        grid-template-columns: 1fr;
    }
}