/* =====================================================================
   COMPONENT STYLES: <bk-goat-card>
   ===================================================================== */

/* ---- 1. Card shell ------------------------------------------------ */
.bk-goat-card { display: block; }
.bk-goat-card__inner {
  height: 100%; display: flex; flex-direction: column;
  background: var(--bk-milk); border: 1px solid var(--bk-line); border-radius: var(--bk-radius-lg);
  overflow: hidden; box-shadow: var(--bk-shadow);
  transition: transform 320ms var(--bk-ease), box-shadow 320ms var(--bk-ease);
}
.bk-goat-card__inner:hover { transform: translateY(-4px); box-shadow: var(--bk-shadow-lift); }

/* ---- 2. Stage: cream backdrop the goat stands on ------------------ */
.bk-goat-card__stage {
  position: relative; padding: var(--bk-space-4) var(--bk-space-4) var(--bk-space-2);
  background: radial-gradient(120% 90% at 50% 100%, var(--bk-cream) 0%, #f4ecdf 55%, var(--bk-milk) 100%);
}
.bk-goat-card__stage .bk-goat-art { max-width: 300px; margin-inline: auto; transition: transform 500ms var(--bk-ease); }
.bk-goat-card__inner:hover .bk-goat-art { transform: scale(1.03); }
.bk-goat-card__mode { position: absolute; top: var(--bk-space-3); inset-inline-start: var(--bk-space-3); }

/* ---- 3. Body text ------------------------------------------------- */
.bk-goat-card__body { display: flex; flex-direction: column; gap: var(--bk-space-2); padding: var(--bk-space-4); flex: 1; }
.bk-goat-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bk-space-3); }
.bk-goat-card__name { font-size: var(--bk-step-2); }
.bk-goat-card__swatch { width: 34px; flex-shrink: 0; }
.bk-goat-card__meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--bk-ink-soft); font-size: var(--bk-step--1); }
html[lang="ur"] .bk-goat-card__meta { font-size: var(--bk-step-0); }

/* ---- 4. Price + footer ------------------------------------------- */
.bk-goat-card__price { display: flex; align-items: baseline; gap: var(--bk-space-2); margin-top: var(--bk-space-1); }
.bk-goat-card__price strong { font-family: var(--bk-font-display); font-size: var(--bk-step-1); font-weight: 600; }
.bk-goat-card__label { color: var(--bk-ink-faint); font-size: var(--bk-step--1); }
.bk-goat-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bk-space-3);
  margin-top: auto; padding-top: var(--bk-space-3); border-top: 1px dashed var(--bk-line);
}
.bk-goat-card__offers { color: var(--bk-ink-faint); font-size: var(--bk-step--1); }