/** Shopify CDN: Minification failed

Line 46:0 All "@import" rules must come first

**/
/* ================================================================
   SANA JEWELS — Hero & Announcement | Modern Minimalist Gallery
================================================================ */

/* ── HERO IMAGE POSITION ── */
.banner__media img,
.banner .media img,
.banner__media .media img {
  object-position: center 22% !important;
}

/* ── ANNOUNCEMENT BAR — charcoal + white ── */
.announcement-bar,
.announcement-bar__link {
  background-color: #1A1A1A !important;
  border-bottom: none !important;
}
.announcement-bar__message,
.announcement-bar p,
.announcement-bar span,
.announcement-bar a,
.announcement-bar .announcement-bar__message * {
  color: #FFFFFF !important;
  font-family: var(--font-body-family) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

/* ── HIDE QUANTITY RULES ── */
.quantity__rules,
.quantity__rules-cart,
.progress-bar-container,
.inventory-status,
[class*='quantity__note'],
[class*='quantity__rules'] {
  display: none !important;
}

@import url('sana-variants.css');

/* ── HERO OVERLAY ── */
.banner__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.04) 40%,
    rgba(0,0,0,0.28) 80%,
    rgba(0,0,0,0.52) 100%
  ) !important;
  pointer-events: none;
  z-index: 1;
}
.banner__box,
.banner .banner__content {
  position: relative;
  z-index: 2 !important;
}

/* ── HERO HEADING — brand heading font ── */
.banner__heading,
.banner .banner__heading {
  font-family: var(--font-heading-family) !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  line-height: 1.15 !important;
}

/* ── HERO SUBTITLE ── */
.banner .subtitle,
.banner p.subtitle {
  font-family: var(--font-body-family) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  opacity: 0.9 !important;
  font-weight: 400 !important;
}

/* ── HERO CTA ── */
.banner .button,
.banner button {
  font-family: var(--font-body-family) !important;
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 14px 36px !important;
  border-radius: 0 !important;
  border: 0.5px solid rgba(255,255,255,0.8) !important;
  background: transparent !important;
  color: #FFFFFF !important;
  transition: all 0.25s ease !important;
  font-weight: 400 !important;
}
.banner .button:hover,
.banner button:hover {
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  border-color: #FFFFFF !important;
}