/* ============================================================
   Hibaat Gold Rates — public styling
   Inherits the theme's design tokens (with safe fallbacks) so the
   page reads as part of the Hibaat world: ivory, espresso, gold.
   ============================================================ */
.hgr-page{
  --hgr-ivory: var(--ivory, #FBFAF7);
  --hgr-espresso: var(--espresso, #241E16);
  --hgr-gold: var(--gold, #B08D57);
  --hgr-cream: var(--cream, #F3ECDF);
  --hgr-muted: var(--muted, #7A6F60);
  --hgr-gold-rgb: var(--gold-rgb, 176,141,87);
  --hgr-serif: var(--serif, 'Marcellus','Cormorant Garamond',Georgia,serif);
  --hgr-sans: var(--sans, 'Jost','Poppins',system-ui,sans-serif);
  --hgr-ease: var(--ease, cubic-bezier(.22,1,.36,1));
  --hgr-up: #4E7C5B;
  --hgr-down: #B0654A;

  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 22px 40px;
  color: var(--hgr-espresso);
  font-family: var(--hgr-sans);
}
.hgr-page *{ box-sizing: border-box; }

/* diamond motif */
.hgr-diamond{
  display:inline-block; width:9px; height:9px; margin-right:2px;
  background: var(--hgr-gold); transform: rotate(45deg);
  position:relative; top:-1px;
}
.hgr-diamond::after{
  content:""; position:absolute; inset:2.5px;
  background: var(--hgr-ivory);
}

/* ---------- hero ---------- */
.hgr-hero{
  text-align:center;
  padding: 30px 18px 34px;
  border: 1px solid rgba(var(--hgr-gold-rgb), .28);
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(var(--hgr-gold-rgb), .09), transparent 60%),
    var(--hgr-ivory);
  border-radius: 3px;
  margin-top: 8px;
}
.hgr-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color: var(--hgr-gold); font-weight:500;
}
.hgr-hero__title{
  font-family: var(--hgr-serif);
  font-weight:400;
  font-size: clamp(26px, 4vw, 40px);
  line-height:1.15;
  margin:.5em 0 .25em;
  color: var(--hgr-espresso);
}
.hgr-updated{ font-size:13px; color: var(--hgr-muted); margin:0 0 22px; }
.hgr-updated strong{ color: var(--hgr-espresso); font-weight:600; }

.hgr-featured{
  display:flex; justify-content:center; flex-wrap:wrap; gap:16px;
  margin: 6px auto 18px;
}
.hgr-fcard{
  min-width: 190px; flex:0 1 220px;
  padding:20px 22px; border-radius:3px;
  background: var(--hgr-cream);
  border:1px solid rgba(var(--hgr-gold-rgb), .3);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.hgr-fcard--lead{
  background: linear-gradient(180deg, rgba(var(--hgr-gold-rgb), .16), rgba(var(--hgr-gold-rgb), .05));
  border-color: rgba(var(--hgr-gold-rgb), .55);
  transform: scale(1.03);
}
.hgr-fcard__k{
  font-family: var(--hgr-serif); font-size:15px; letter-spacing:.14em;
  color: var(--hgr-gold);
}
.hgr-fcard__tola{
  font-family: var(--hgr-serif); font-size: clamp(20px, 2.4vw, 27px);
  color: var(--hgr-espresso); font-variant-numeric: tabular-nums;
}
.hgr-fcard__tola small{ font-size:12px; color:var(--hgr-muted); margin-left:5px; font-family:var(--hgr-sans); }
.hgr-fcard__gram{ font-size:12.5px; color:var(--hgr-muted); font-variant-numeric: tabular-nums; }

.hgr-change{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; padding:7px 16px; border-radius:999px;
  background: rgba(0,0,0,.03); color: var(--hgr-muted);
  font-variant-numeric: tabular-nums;
}
.hgr-change__arrow{ width:0;height:0; }
.hgr-change--up{ color: var(--hgr-up); background: rgba(78,124,91,.10); }
.hgr-change--down{ color: var(--hgr-down); background: rgba(176,101,74,.10); }
.hgr-change--up .hgr-change__arrow{ border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--hgr-up); }
.hgr-change--down .hgr-change__arrow{ border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--hgr-down); }
.hgr-change__note{ color: var(--hgr-muted); font-size:12px; }

/* ---------- sections ---------- */
.hgr-section{ margin-top: 44px; }
.hgr-section__head{ text-align:center; margin-bottom:20px; }
.hgr-h2{
  font-family: var(--hgr-serif); font-weight:400;
  font-size: clamp(21px, 2.6vw, 28px); margin:0; color:var(--hgr-espresso);
}
.hgr-sub{ color: var(--hgr-muted); font-size:14px; margin:.5em 0 0; }

/* ---------- tables ---------- */
.hgr-tablewrap{ overflow-x:auto; border:1px solid rgba(var(--hgr-gold-rgb), .22); border-radius:3px; }
.hgr-table{
  width:100%; border-collapse:collapse; background:#fff; font-size:14px;
  font-variant-numeric: tabular-nums;
}
.hgr-table thead th{
  background: var(--hgr-espresso); color:#fff; font-weight:500;
  text-align:left; padding:12px 16px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
}
.hgr-table th.hgr-num, .hgr-table td.hgr-num{ text-align:right; }
.hgr-table tbody td{ padding:11px 16px; border-top:1px solid rgba(36,30,22,.07); }
.hgr-table tbody tr:nth-child(even) td{ background: rgba(var(--hgr-gold-rgb), .028); }
.hgr-table .hgr-karat{ font-family:var(--hgr-serif); font-size:15px; }
.hgr-table .hgr-purity{ color:var(--hgr-muted); }
.hgr-row--feat td{ background: rgba(var(--hgr-gold-rgb), .12) !important; }
.hgr-row--feat .hgr-karat{ color: var(--hgr-gold); font-weight:600; }

/* ---------- history controls ---------- */
.hgr-controls{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px;
  padding:16px 18px; background: var(--hgr-cream); border-radius:3px;
  border:1px solid rgba(var(--hgr-gold-rgb), .22); margin-bottom:18px;
}
.hgr-ctl{ display:flex; flex-direction:column; gap:5px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--hgr-muted); }
.hgr-ctl select, .hgr-ctl input{
  font-family:var(--hgr-sans); font-size:14px; padding:8px 10px;
  border:1px solid rgba(36,30,22,.2); border-radius:3px; background:#fff; color:var(--hgr-espresso);
  text-transform:none; letter-spacing:normal;
}
.hgr-quick{ display:flex; gap:6px; }
.hgr-quick button{
  font-family:var(--hgr-sans); font-size:12.5px; padding:8px 12px; cursor:pointer;
  border:1px solid rgba(36,30,22,.18); background:#fff; color:var(--hgr-muted); border-radius:3px;
  transition: all .2s var(--hgr-ease);
}
.hgr-quick button:hover{ border-color: rgba(var(--hgr-gold-rgb), .6); color:var(--hgr-espresso); }
.hgr-quick button.is-active{ background: var(--hgr-espresso); color:#fff; border-color:var(--hgr-espresso); }
.hgr-btn{
  font-family:var(--hgr-sans); font-size:13px; letter-spacing:.04em; cursor:pointer;
  padding:10px 18px; border-radius:3px; border:1px solid var(--hgr-gold);
  background: var(--hgr-gold); color:#fff; margin-left:auto;
  display:inline-flex; align-items:center; gap:8px; transition: all .2s var(--hgr-ease);
}
.hgr-btn:hover{ background: var(--hgr-espresso); border-color: var(--hgr-espresso); }
.hgr-btn__ico{ width:11px; height:11px; border:1.6px solid currentColor; border-top:0; border-radius:0 0 2px 2px; position:relative; }
.hgr-btn__ico::after{ content:""; position:absolute; left:50%; top:-7px; width:1.6px; height:7px; background:currentColor; transform:translateX(-50%); }

/* ---------- chart + range stat ---------- */
.hgr-chartwrap{
  position:relative; height:360px; padding:16px 14px 10px;
  border:1px solid rgba(var(--hgr-gold-rgb), .22); border-radius:3px; background:#fff;
}
.hgr-rangestat{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-bottom:14px; }
.hgr-stat{ display:flex; align-items:center; gap:10px; font-variant-numeric: tabular-nums; }
.hgr-stat__arrow{ width:0;height:0; }
.hgr-stat--up .hgr-stat__arrow{ border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid var(--hgr-up); }
.hgr-stat--down .hgr-stat__arrow{ border-left:6px solid transparent;border-right:6px solid transparent;border-top:10px solid var(--hgr-down); }
.hgr-stat__big{ font-family:var(--hgr-serif); font-size:24px; }
.hgr-stat--up .hgr-stat__big, .hgr-stat--up .hgr-stat__pct{ color:var(--hgr-up); }
.hgr-stat--down .hgr-stat__big, .hgr-stat--down .hgr-stat__pct{ color:var(--hgr-down); }
.hgr-stat__pct{ font-size:15px; }
.hgr-stat__cap{ color:var(--hgr-muted); font-size:13px; }
.hgr-stat__hilo{ display:flex; gap:16px; color:var(--hgr-muted); font-size:13px; font-variant-numeric:tabular-nums; }
.hgr-rangestat__none{ color:var(--hgr-muted); font-style:italic; }

.hgr-tablewrap--hist{ margin-top:20px; }
.hgr-chg--up{ color:var(--hgr-up); }
.hgr-chg--down{ color:var(--hgr-down); }
.hgr-chg--flat{ color:var(--hgr-muted); }

.hgr-disclaimer{ color:var(--hgr-muted); font-size:12px; line-height:1.6; margin-top:18px; font-style:italic; text-align:center; }

/* ---------- empty state ---------- */
.hgr-empty{ text-align:center; padding:70px 20px; }
.hgr-empty__inner .hgr-diamond{ width:16px;height:16px; margin-bottom:14px; }
.hgr-empty h2{ font-family:var(--hgr-serif); font-weight:400; font-size:26px; margin:.2em 0; }
.hgr-empty p{ color:var(--hgr-muted); }

/* ---------- home-page teaser ---------- */
.hgr-teaser{
  --hgr-ivory: var(--ivory, #FBFAF7);
  --hgr-espresso: var(--espresso, #241E16);
  --hgr-gold: var(--gold, #B08D57);
  --hgr-cream: var(--cream, #F3ECDF);
  --hgr-muted: var(--muted, #7A6F60);
  --hgr-gold-rgb: var(--gold-rgb, 176,141,87);
  --hgr-serif: var(--serif, 'Marcellus',Georgia,serif);
  --hgr-sans: var(--sans, 'Jost',system-ui,sans-serif);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px 26px;
  max-width:980px; margin:0 auto; padding:24px 34px;
  text-decoration:none; color:var(--hgr-espresso);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(var(--hgr-gold-rgb), .10), transparent 55%),
    var(--hgr-ivory);
  border:1px solid rgba(var(--hgr-gold-rgb), .35); border-radius:3px;
  font-family:var(--hgr-sans);
  transition: box-shadow .4s var(--ease, ease), transform .4s var(--ease, ease), border-color .4s ease;
}
.hgr-teaser:hover{ transform: translateY(-2px); box-shadow:0 22px 46px -22px rgba(36,30,22,.4); border-color: rgba(var(--hgr-gold-rgb), .6); }
.hgr-teaser__label{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--hgr-gold); white-space:nowrap; }
.hgr-teaser__label .hgr-diamond{ background:var(--hgr-gold); }
.hgr-teaser__label .hgr-diamond::after{ background:var(--hgr-ivory); }
.hgr-teaser__main{ display:flex; align-items:baseline; gap:10px; flex:1 1 auto; justify-content:center; font-variant-numeric:tabular-nums; }
.hgr-teaser__k{ font-family:var(--hgr-serif); color:var(--hgr-gold); font-size:15px; letter-spacing:.1em; }
.hgr-teaser__price{ font-family:var(--hgr-serif); font-size:clamp(20px,2.4vw,26px); }
.hgr-teaser__price small{ font-size:12px; color:var(--hgr-muted); margin-left:5px; font-family:var(--hgr-sans); }
.hgr-teaser__gram{ font-size:13px; color:var(--hgr-muted); }
.hgr-teaser__cta{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right; }
.hgr-teaser__upd{ font-size:11px; color:var(--hgr-muted); }
.hgr-teaser__link{ font-size:13px; color:var(--hgr-espresso); font-weight:500; white-space:nowrap; }
.hgr-teaser:hover .hgr-teaser__link{ color:var(--hgr-gold); }

/* ---------- responsive ---------- */
@media (max-width:640px){
  .hgr-fcard{ flex:1 1 140px; min-width:140px; padding:15px; }
  .hgr-fcard--lead{ transform:none; }
  .hgr-btn{ margin-left:0; width:100%; justify-content:center; }
  .hgr-controls{ gap:10px; }
  .hgr-ctl{ flex:1 1 120px; }
  .hgr-teaser{ flex-direction:column; text-align:center; padding:22px; }
  .hgr-teaser__cta{ align-items:center; text-align:center; }
  .hgr-teaser__main{ justify-content:center; }
}