/** Shopify CDN: Minification failed

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

**/
/*
 * orek-collection.css
 * Scoped styles for the Orek Earrings collection landing page.
 * All rules use .orek- prefix to avoid leaking into global scope.
 * Never modify global selectors here.
 */

/* ─── Product Grid Anchor ──────────────────────────────────────────── */
/*
 * The hero CTA scrolls to #orek-product-grid.
 * We attach this id via the custom_liquid_D38LQ9 section in collection.earrings.json
 * or via the product-grid-container class if available.
 * This CSS adds scroll margin so the sticky header doesn't obscure it.
 */
.product-grid-container {
  scroll-margin-top: var(--header-group-height, 80px);
}

/* ─── Earring landing page sale badge enhancement ─────────────────── */
/*
 * Render % OFF badge on product cards when compare_at_price > price.
 * Uses the .orek- prefix. Applied via snippets/card-product.liquid
 * (see note in AGENT.md — do not add fake badges).
 */
.orek-sale-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: #713104;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  line-height: 1.6;
  white-space: nowrap;
}

/* Feature badges (Anti Tarnish / Waterproof / 18K) from product tags */
.orek-feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(201, 142, 42, 0.09);
  border: 1px solid rgba(201, 142, 42, 0.22);
  color: #713104;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 20px;
  white-space: nowrap;
}

.orek-feature-badge::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c98e2a;
  flex-shrink: 0;
}

/* Badge wrapper */
.orek-product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* ─── Sold out state ─────────────────────────────────────────────── */
.orek-sold-out-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #9a7060;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── Collection hero scroll smooth ─────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ─── Google Fonts load hint (Cormorant Garamond + Manrope) ──────── */
/*
 * These fonts are used by all custom Orek sections.
 * They are loaded via @import in orek-collection.css so they are
 * available as soon as this stylesheet loads.
 * Note: Shopify CDN caches this aggressively — performance safe.
 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Manrope:wght@400;600;700;800&display=swap');