/* ==========================================================================
   Product Card — museum display case
   ========================================================================== */

/* ==========================================================================
   Card grid — defined here so it works on homepage + shop + any page
   ========================================================================== */
.mana-card-grid {
    display: grid !important;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    width: 100%;
}

.mana-card-grid--columns-3 { grid-template-columns: repeat(3, 1fr); }
.mana-card-grid--columns-4 { grid-template-columns: repeat(4, 1fr); }

/* WooCommerce wraps items in ul.products — flatten it so articles are direct grid children */
ul.products,
.woocommerce ul.products {
    display: contents !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 1024px) {
    .mana-card-grid--columns-3,
    .mana-card-grid--columns-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .mana-card-grid,
    .mana-card-grid--columns-3,
    .mana-card-grid--columns-4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

@media (max-width: 400px) {
    .mana-card-grid,
    .mana-card-grid--columns-3,
    .mana-card-grid--columns-4 { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   Product Card — museum display case
   ========================================================================== */
.product-card {
    position: relative;
    background: var(--color-vault);
    border: 1px solid var(--color-olive-deep);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-card);
    transition:
        box-shadow var(--transition-base),
        transform var(--transition-base),
        border-color var(--transition-base);
    overflow: hidden;
    container-type: inline-size;
}

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

/* Museum frame — inner double-border decorative effect */
.product-card::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(107, 106, 78, 0.25);
    border-radius: var(--radius-sm);
    pointer-events: none;
    z-index: 1;
}

/* -------------------------------------------------------------------------- */
/* Image area                                                                   */
/* -------------------------------------------------------------------------- */
.product-card__image-link {
    display: block;
    text-decoration: none;
}

/* Both class names supported — template uses __image-wrap, legacy CSS used __image-wrapper */
.product-card__image-wrap,
.product-card__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 223 / 310;   /* Standard MTG card ratio */
    overflow: hidden;
    background: var(--color-obsidian);
}

.product-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform var(--transition-slow);
}

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

/* Placeholder when no image */
.product-card__image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-vault) 0%, var(--color-obsidian) 100%);
    color: var(--color-olive-deep);
}

.product-card__image-placeholder svg {
    width: 40%;
    height: 40%;
    opacity: 0.3;
}

/* -------------------------------------------------------------------------- */
/* Foil shimmer overlay                                                         */
/* -------------------------------------------------------------------------- */
.product-card__foil-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        transparent           20%,
        rgba(201,168,76,0.15) 38%,
        rgba(255,255,255,0.28) 45%,
        rgba(181,117,240,0.18) 52%,
        transparent           65%
    );
    background-size: 300% 300%;
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.product-card[data-foil="true"] .product-card__foil-overlay {
    opacity: 1;
    animation: foil-shimmer 3.5s ease-in-out infinite;
}

.product-card[data-foil="true"]:hover .product-card__foil-overlay {
    animation-duration: 1.8s;
    filter: brightness(1.25);
}

/* -------------------------------------------------------------------------- */
/* Meta / text area                                                             */
/* -------------------------------------------------------------------------- */

/* Both class names supported — template uses __body, legacy CSS used __meta */
.product-card__body,
.product-card__meta {
    padding: var(--space-3) var(--space-4) var(--space-4);
    position: relative;
    z-index: 2;
}

/* Badges inside the image-wrap are absolutely positioned top-left */
.product-card__image-wrap .product-card__badges,
.product-card__image-wrapper .product-card__badges {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 3;
    margin-bottom: 0;
}

.product-card__badges {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
    min-height: 20px;
}

.product-card__name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-1);
    letter-spacing: var(--tracking-tight);
}

.product-card__name a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__name a:hover {
    color: var(--color-gold);
}

.product-card__set {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

/* -------------------------------------------------------------------------- */
/* Footer (price + add to cart)                                                 */
/* -------------------------------------------------------------------------- */

/* Column layout: price row on top, full-width button below.
   Side-by-side was too cramped at card widths — the button consumed
   half the horizontal space and fought the price for attention. */
.product-card__footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Price and NM label sit on the same baseline row */
.product-card__price-wrap {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
}

.product-card__price {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-gold);
    line-height: 1;
}

.product-card__price del {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: 400;
    margin-right: var(--space-1);
}

/* Subtle "NM · Non-Foil" label beneath the price */
.product-card__price-note {
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-stone-mid);
    opacity: 0.65;
    line-height: 1;
    white-space: nowrap; /* prevent "NON-" / "FOIL" line-break on narrow cards */
}

/* -------------------------------------------------------------------------- */
/* "Select options" — WooCommerce variable product link                         */
/* WC outputs: <a class="button product_type_variable add_to_cart_button">     */
/* No theme classes are applied by WC, so we target the WC classes directly.   */
/* Styled as a stone ghost button — lower visual weight than the filled-purple  */
/* Notify Me button; signals "explore" rather than "act now".                  */
/* -------------------------------------------------------------------------- */
.product-card .product_type_variable.add_to_cart_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: 1px solid var(--color-olive-deep);
    border-radius: var(--radius-base);
    color: var(--color-stone-mid);
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        color var(--transition-fast),
        background var(--transition-fast);
}

.product-card .product_type_variable.add_to_cart_button:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
    background: rgba(201, 168, 76, 0.08);
    text-decoration: none;
}

/* Notify Me button — filled purple to signal action despite OOS state         */
.product-card__notify {
    width: 100%;
    background: var(--color-purple, #7c3aed);
    border-color: var(--color-purple, #7c3aed);
    color: #fff;
}

.product-card__notify:hover,
.product-card__notify:focus-visible {
    background: var(--color-purple-light, #9f5ff5);
    border-color: var(--color-purple-light, #9f5ff5);
}

/* -------------------------------------------------------------------------- */
/* Out-of-stock overlay — covers image area only (inside __image-wrap)         */
/* -------------------------------------------------------------------------- */
.product-card__oos-overlay {
    position: absolute;
    inset: 0;
    background: rgba(28, 28, 24, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.product-card__oos-overlay span {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-stone-mid);
    padding: var(--space-1) var(--space-3);
    background: rgba(28, 28, 24, 0.85);
    border: 1px solid var(--color-olive-deep);
    border-radius: var(--radius-base);
}

/* Show overlay on OOS cards — card body remains fully visible below image */
.product-card[data-stock="0"] .product-card__oos-overlay,
.product-card.outofstock .product-card__oos-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Slightly dim the image area of OOS cards, not the full card */
.product-card[data-stock="0"] .product-card__image,
.product-card.outofstock .product-card__image {
    filter: grayscale(30%) brightness(0.7);
}

/* -------------------------------------------------------------------------- */
/* Container queries — compact layout at narrow widths (3+ col grid)           */
/* -------------------------------------------------------------------------- */
@container (max-width: 180px) {
    .product-card__meta    { padding: var(--space-2); }
    .product-card__name    { font-size: var(--text-sm); }
    .product-card__price   { font-size: var(--text-base); }
    .product-card__footer .btn { display: none; }
}