/* =================== pcard-parity.css =================== */
/* Sprint 10 — bring variants A/B/D/Mini up to C-variant premium parity.
 * Adds hover micro-interactions, stock indicators, mobile responsive
 * refinements, and a unified glow/orb FX system so all cards meet the
 * "10/10" premium bar (matching B&O / Vitra / Cassina catalog tiles). */

/* ──────────────────────────────────────────────────────────────────────
 * Universal pcard premium FX
 * ──────────────────────────────────────────────────────────────────── */

/* Subtle lift on hover for ALL variants. */
.pcard {
  transition:
    transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1),
    box-shadow 0.32s cubic-bezier(0.2, 0.84, 0.3, 1),
    border-color 0.22s ease;
  will-change: transform;
}

.pcard:hover {
  transform: translateY(-3px);
  box-shadow:
    0 28px 56px -28px rgba(40, 30, 15, 0.20),
    0 4px 12px rgba(40, 30, 15, 0.06);
}

/* ──────────────────────────────────────────────────────────────────────
 * Media glow — orbital ring on hover for A/B/D (was C-only)
 * ──────────────────────────────────────────────────────────────────── */

.pcard-a__media,
.pcard-b__media,
.pcard-d__media {
  position: relative;
  overflow: hidden;
}

.pcard-a__media::before,
.pcard-b__media::before,
.pcard-d__media::before {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(212, 184, 150, 0.22) 0%,
    rgba(212, 184, 150, 0) 55%
  );
  opacity: 0;
  transition: opacity 0.42s ease;
}

.pcard:hover .pcard-a__media::before,
.pcard:hover .pcard-b__media::before,
.pcard:hover .pcard-d__media::before {
  opacity: 1;
}

/* Media image: subtle scale on hover (premium pattern). */
.pcard-a__media img,
.pcard-b__media img,
.pcard-d__media img {
  transition: transform 0.62s cubic-bezier(0.2, 0.84, 0.3, 1);
}

.pcard:hover .pcard-a__media img,
.pcard:hover .pcard-b__media img,
.pcard:hover .pcard-d__media img {
  transform: scale(1.045);
}

/* ──────────────────────────────────────────────────────────────────────
 * Variant A — Editorial premium upgrades
 * ──────────────────────────────────────────────────────────────────── */

/* Stock + rating meta-row (when present). */
.pcard-a__meta-extra {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 8px;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.65));
}

.pcard-a__meta-extra .pcard-a__rating {
  color: var(--hc-accent-dark, #7a6548);
  font-weight: 600;
}

.pcard-a__meta-extra .pcard-a__stock-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hc-success, #3d6b4f);
  margin-right: 4px;
  vertical-align: middle;
}

/* Card-A: own pill class (was using pcard-c__pill). */
.pcard-a__pill {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(212, 184, 150, 0.14);
  border: 0.5px solid rgba(212, 184, 150, 0.32);
  border-radius: 999px;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--hc-accent-dark, #7a6548);
}

/* Mobile stack for A. */
@media (max-width: 640px) {
  .pcard--a .pcard-a__body {
    padding: 14px;
  }
  .pcard--a .pcard-a__title {
    font-size: 18px;
    line-height: 1.2;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * Variant B — Compact rail premium upgrades
 * ──────────────────────────────────────────────────────────────────── */

/* Hoverband for B: 3 hidden props revealed on hover (C-feature parity). */
.pcard--b .pcard-b__hoverband {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px 14px;
  margin: 0;
  background: linear-gradient(180deg, rgba(252, 248, 240, 0.92), rgba(248, 244, 235, 0.96));
  border-top: 0.5px solid rgba(212, 184, 150, 0.28);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.32s cubic-bezier(0.2, 0.84, 0.3, 1), opacity 0.22s ease;
}

.pcard--b:hover .pcard-b__hoverband {
  max-height: 80px;
  opacity: 1;
}

.pcard-b__hoverband-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pcard-b__hoverband-item span {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hc-ink-muted, rgba(26, 23, 20, 0.5));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcard-b__hoverband-item strong {
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-weight: 500;
  font-size: 13px;
  color: var(--hc-ink, #1a1714);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: collapse hoverband always-visible. */
@media (max-width: 640px) {
  .pcard--b .pcard-b__hoverband {
    max-height: 80px;
    opacity: 1;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * Variant D — Tagbar premium upgrades
 * ──────────────────────────────────────────────────────────────────── */

/* Tagbar already info-rich; add glow + mobile responsive tag-grid. */
@media (max-width: 640px) {
  .pcard--d .pcard-d__tag-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .pcard--d .pcard-d__tag {
    padding: 6px 10px;
  }
  .pcard--d .pcard-d__tag-k {
    font-size: 9.5px;
  }
  .pcard--d .pcard-d__tag-v {
    font-size: 12px;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * Variant Mini — full premium upgrade
 * ──────────────────────────────────────────────────────────────────── */

/* Hover lift + border-glow (Mini had no hover-state previously). */
.pcard-mini {
  position: relative;
  border: 0.5px solid rgba(212, 184, 150, 0.20);
  border-radius: 14px;
  transition:
    transform 0.32s cubic-bezier(0.2, 0.84, 0.3, 1),
    border-color 0.22s ease,
    box-shadow 0.32s ease;
}

.pcard-mini:hover {
  transform: translateY(-2px) scale(1.012);
  border-color: rgba(212, 184, 150, 0.55);
  box-shadow:
    0 18px 38px -18px rgba(40, 30, 15, 0.18),
    0 3px 8px rgba(40, 30, 15, 0.05);
}

.pcard-mini__media {
  position: relative;
  overflow: hidden;
}

.pcard-mini__img {
  transition: transform 0.52s cubic-bezier(0.2, 0.84, 0.3, 1);
}

.pcard-mini:hover .pcard-mini__img {
  transform: scale(1.06);
}

/* Stock dot for Mini (premium feature parity). */
.pcard-mini__stock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6));
  margin-top: 4px;
}

.pcard-mini__stock-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hc-success, #3d6b4f);
}

.pcard-mini__stock--low .pcard-mini__stock-dot {
  background: var(--hc-warning, #a67426);
}

.pcard-mini__stock--out .pcard-mini__stock-dot {
  background: var(--hc-ink-muted, rgba(26, 23, 20, 0.35));
}

/* Type-label conditional hide for hardware (handled inline; this is fallback). */
.pcard-mini--type-hardware .pcard-mini__type {
  display: none;
}

/* ──────────────────────────────────────────────────────────────────────
 * Mobile: universal pcard tightening (all variants)
 * ──────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .pcard {
    min-width: 0;
  }
  .pcard:hover {
    /* Disable hover-lift on touch devices to avoid sticky-hover. */
    transform: none;
  }
}

@media (hover: none) {
  .pcard:hover {
    transform: none;
    box-shadow: none;
  }
  .pcard:hover .pcard-a__media img,
  .pcard:hover .pcard-b__media img,
  .pcard:hover .pcard-d__media img,
  .pcard-mini:hover .pcard-mini__img {
    transform: none;
  }
}


/* ──────────────────────────────────────────────────────────────────────
 * DIZ-port: animated FX layer (Sprint 12.57)
 * Ports the "flying" effects from diz.holzcom-mebel.ru — rotating dashed
 * ring on ::after, gold-tinted hover shadow, action-button micro-rotations,
 * badge bounce, CTA shine. Applies to all .pcard variants (A/B/C/D/Mini).
 * ──────────────────────────────────────────────────────────────────── */

.pcard {
  isolation: isolate;
}

/* Rotating dashed gold ring — invisible until hover. */
.pcard::after {
  content: "";
  position: absolute;
  left: -20%;
  top: -20%;
  width: 140%;
  height: 140%;
  border-radius: 50%;
  border: 1px dashed rgba(212, 184, 150, 0);
  pointer-events: none;
  z-index: 0;
  transition: border-color 0.42s ease, transform 18s linear;
}
.pcard:hover::after {
  border-color: rgba(212, 184, 150, 0.30);
  transform: rotate(360deg);
}

/* Radial glow at corner on hover — adds soft "lit-from-edge" feeling. */
.pcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px 220px at 100% -10%, rgba(212, 184, 150, 0.26), transparent 60%);
  opacity: 0;
  transition: opacity 0.42s cubic-bezier(0.2, 0.84, 0.3, 1);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.pcard:hover::before {
  opacity: 1;
}

/* Gold-tinted premium shadow on hover (overrides earlier subtle one). */
.pcard:hover {
  border-color: var(--hc-gold-border, rgba(212, 184, 150, 0.55));
  box-shadow:
    0 1px 2px rgba(40, 30, 15, 0.04),
    0 28px 56px -28px rgba(184, 154, 111, 0.36);
}

/* Title color shift to gold accent on parent hover. */
.pcard:hover .pcard-c__title,
.pcard:hover .pcard-a__caption,
.pcard:hover .pcard-b__title,
.pcard:hover .pcard-d__title,
.pcard:hover .pcard-mini__title,
.pcard:hover .pcard-title {
  color: var(--hc-accent-dark, #7a6548);
  transition: color 0.32s ease;
}

/* Action buttons (eye / heart / cart) — rotate + scale animations.
   The legacy classes are .pcard-act with --qv (quick view), --fav, --cart. */
.pcard-act {
  transition:
    background 0.22s ease,
    color 0.22s ease,
    transform 0.42s cubic-bezier(0.2, 0.84, 0.3, 1),
    box-shadow 0.32s ease;
}
.pcard-act:hover {
  transform: scale(1.12) rotate(-4deg);
  box-shadow: 0 6px 14px -6px rgba(184, 154, 111, 0.42);
}
.pcard-act--fav:hover {
  transform: scale(1.18);
  background: linear-gradient(135deg, #ff6b6b, #c0392b);
  color: #ffffff;
}
.pcard-act--qv:hover {
  transform: scale(1.14) rotate(6deg);
}
.pcard-act--cart:hover {
  transform: scale(1.14) translateY(-2px);
  background: linear-gradient(135deg, var(--hc-gold, #d4b896), #b89a6f);
  color: #2a2018;
}

/* Badges (sale/hot/new/etc.) — subtle bounce when card is hovered. */
.pcard-badge {
  transition: transform 0.42s cubic-bezier(0.2, 0.84, 0.3, 1), box-shadow 0.32s ease;
}
.pcard:hover .pcard-badge {
  transform: scale(1.06) translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(40, 30, 15, 0.22);
}

/* Primary CTA — shine sweep on hover (skewed gradient passes left to right). */
.pcard-c__cta,
.pcard-d__cta,
.pcard-b__cta,
.pcard-a__cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pcard-c__cta::before,
.pcard-d__cta::before,
.pcard-b__cta::before,
.pcard-a__cta::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: -120%;
  width: 60%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transition: left 0.7s cubic-bezier(0.2, 0.84, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}
.pcard:hover .pcard-c__cta::before,
.pcard-d__cta::before,
.pcard:hover .pcard-d__cta::before,
.pcard:hover .pcard-b__cta::before,
.pcard:hover .pcard-a__cta::before {
  left: 120%;
}

/* Mini variant — extra emphasis since it has no CTA. Whole card becomes
   subtly luminous on hover. */
.pcard-mini::before {
  background: radial-gradient(220px 140px at 50% -10%, rgba(212, 184, 150, 0.32), transparent 65%);
}
.pcard-mini:hover::before { opacity: 1; }

/* Touch / reduced motion fallbacks. */
@media (hover: none) {
  .pcard::after,
  .pcard::before { display: none; }
  .pcard-act:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard::after,
  .pcard-act,
  .pcard-badge,
  .pcard-c__cta::before,
.pcard-d__cta::before,
  .pcard-b__cta::before,
  .pcard-a__cta::before {
    transition: none !important;
  }
  .pcard:hover::after { transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────
 * Empty-gap fix (Sprint 12.61) — fills middle whitespace in pcard-c
 * when content above is short. Stronger dashed divider + gold accent dot
 * above it so the gap reads as 'intentional divider', not empty space.
 * ──────────────────────────────────────────────────────────────────── */

.pcard-c__bottom,
.pcard-footer {
  position: relative;
  border-top: 1px dashed rgba(141, 109, 71, 0.32);
  padding-top: 14px;
}
.pcard-c__bottom::before,
.pcard-footer::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hc-gold, #d4b896), var(--hc-accent, #8b7355));
  box-shadow: 0 0 0 3px var(--hc-paper, #ffffff);
}

/* Mini variant has no bottom CTA block, skip */
.pcard-mini .pcard-footer::before { display: none; }