/*
   ARALAS CREATIVE — Jewelry Making Supply Shops page
   Design enhancements that load AFTER page-audience.css.
   Only overrides and new elements unique to this page.
*/

/* ============================================================
   HERO — dual radial: warm amber top-right + brand teal bottom-left
   ============================================================ */
.aud-hero::before {
  background:
    radial-gradient(ellipse 55% 60% at 78% 12%, rgba(232, 213, 183, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 22% 88%, rgba(59, 151, 168, 0.08) 0%, transparent 70%);
}

/* Decorative gem — large faint diamond shape, top-right corner */
.jw-hero-gem {
  position: absolute;
  top: -20px;
  right: -40px;
  width: 460px;
  height: 460px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 900px) {
  .jw-hero-gem { display: none; }
}

/* ============================================================
   SHOP TYPE CATEGORY BADGES
   Each badge colour maps to a distinct jewelry niche.
   ============================================================ */
.jw-shop-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
  width: fit-content;
}

/* Wire — soft blue */
.jw-shop-badge--wire {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.10);
  border: 1px solid rgba(96, 165, 250, 0.22);
}

/* Bead — violet */
.jw-shop-badge--bead {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.10);
  border: 1px solid rgba(167, 139, 250, 0.22);
}

/* Metal — warm gold */
.jw-shop-badge--metal {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.22);
}

/* Resin — teal-green */
.jw-shop-badge--resin {
  color: #34d399;
  background: rgba(52, 211, 153, 0.10);
  border: 1px solid rgba(52, 211, 153, 0.22);
}

/* Kit — coral */
.jw-shop-badge--kit {
  color: #f87171;
  background: rgba(248, 113, 113, 0.10);
  border: 1px solid rgba(248, 113, 113, 0.22);
}

/* General — brand teal */
.jw-shop-badge--general {
  color: var(--color-brand);
  background: rgba(59, 151, 168, 0.10);
  border: 1px solid var(--color-brand-dim);
}

/* ============================================================
   THREAT GRID — 2-column layout for 4 cards
   ============================================================ */
.aud-threat-grid--four {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 960px) {
  .aud-threat-grid--four {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PACKAGES — featured card warm gradient override
   ============================================================ */
.aud-package-card--featured {
  background: linear-gradient(
    160deg,
    rgba(59, 151, 168, 0.07) 0%,
    rgba(232, 213, 183, 0.03) 50%,
    var(--bg-card) 80%
  );
}

/* ============================================================
   FINAL CTA BLOCK — bordered card treatment
   ============================================================ */
.aud-cta-block .aud-cta-inner {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  padding: 48px;
}

@media (max-width: 900px) {
  .aud-cta-block .aud-cta-inner {
    padding: 32px 24px;
  }
}

/* ============================================================
   SECTION INTRO — slightly larger max-width on wider sections
   ============================================================ */
.aud-section-intro--wide {
  max-width: 760px;
}