/* ============================================================
   Productos — catálogo y detalle (público)
   ============================================================ */
.prd-wrap { max-width: 1240px; margin: 0 auto; padding: 28px 20px 70px; }

/* El listado (cabecera, filtros, fichas, paginación) vive en shop.css; aquí solo queda el detalle del producto. */

/* Botón de agregar del detalle */
.prd-add {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 10px;
    background: var(--tcg-primary); color: #fff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
    transition: background .15s, transform .1s;
}
.prd-add:hover { background: var(--tcg-primary-dark, #8A0000); }
.prd-add:active { transform: scale(.96); }
.prd-add:disabled { background: var(--tcg-border); color: var(--tcg-text-muted); cursor: not-allowed; }

/* Vacío (producto no disponible) */
.prd-empty { text-align: center; padding: 70px 20px; color: var(--tcg-text-muted); }
.prd-empty i { font-size: 3rem; opacity: .35; display: block; margin-bottom: 10px; }

/* ---------- Detalle ---------- */
.prd-crumbs { font-size: .85rem; color: var(--tcg-text-muted); margin-bottom: 18px; }
.prd-crumbs a { color: var(--tcg-primary); text-decoration: none; }
.prd-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }

.prd-gallery__main {
    aspect-ratio: 1 / 1; background: var(--tcg-bg-soft); border: 1px solid var(--tcg-border); border-radius: 18px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.prd-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: 18px; box-sizing: border-box; }
.prd-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.prd-thumb {
    width: 72px; height: 72px; border-radius: 12px; border: 2px solid var(--tcg-border); background: var(--tcg-bg-soft);
    padding: 0; cursor: pointer; overflow: hidden; transition: border-color .15s;
}
.prd-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.prd-thumb.is-active, .prd-thumb:hover { border-color: var(--tcg-primary); }

.prd-info__cat   { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tcg-primary); text-decoration: none; }
.prd-info h1     { font-size: 2rem; line-height: 1.15; margin: 6px 0 8px; letter-spacing: -.02em; }
.prd-info__meta  { color: var(--tcg-text-muted); font-size: .9rem; margin-bottom: 18px; }
.prd-info__meta strong { color: var(--tcg-text); }

.prd-buy {
    background: var(--tcg-bg-card, #fff); border: 1px solid var(--tcg-border); border-radius: 18px; padding: 22px; margin-bottom: 24px;
}
.prd-buy__price { font-size: 2.3rem; font-weight: 800; color: var(--tcg-primary); line-height: 1; }
.prd-stock { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.prd-stock--ok  { background: #D1FAE5; color: #065F46; }
.prd-stock--low { background: #FEF3C7; color: #92400E; }
.prd-stock--out { background: #FEE2E2; color: #991B1B; }
.prd-buy__row { display: flex; gap: 12px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.prd-qty { display: inline-flex; border: 1px solid var(--tcg-border); border-radius: 12px; overflow: hidden; }
.prd-qty button { width: 40px; border: 0; background: var(--tcg-bg-soft); font-size: 1.2rem; cursor: pointer; color: var(--tcg-text); }
.prd-qty input { width: 54px; border: 0; text-align: center; font: inherit; font-weight: 700; background: transparent; color: var(--tcg-text); }
.prd-qty input::-webkit-outer-spin-button, .prd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.prd-buy .prd-add { flex: 1; justify-content: center; padding: 13px 20px; font-size: 1rem; }
.prd-buy__go { display: none; margin-top: 12px; font-size: .9rem; }
.prd-buy__go a { color: var(--tcg-primary); font-weight: 700; }

.prd-pill { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 14px; border-radius: 12px; font-size: .88rem; line-height: 1.45; }
.prd-pill i { font-size: 1.1rem; margin-top: 1px; }
.prd-pill a { color: inherit; font-weight: 700; text-decoration: underline; }
.prd-pill--pre  { background: #EDE9FE; color: #5B21B6; }
.prd-pill--info { background: #EFF6FF; color: #1E40AF; }
.prd-pill--warn { background: #FEF3C7; color: #92400E; }
.prd-note { margin: -8px 0 22px; padding: 10px 14px; border-radius: 12px; background: #EFF6FF; color: #1E40AF; font-size: .88rem; }
.prd-desc h2 { font-size: 1.05rem; margin: 0 0 8px; }
.prd-desc p  { line-height: 1.65; color: var(--tcg-text); margin: 0; white-space: pre-line; }

.prd-related { margin-top: 56px; }
.prd-related h2 { font-size: 1.3rem; margin: 0 0 16px; }

@media (max-width: 820px) {
    .prd-detail { grid-template-columns: 1fr; gap: 24px; }
    .prd-info h1 { font-size: 1.6rem; }
    .prd-buy .prd-add span { display: inline; }
}