/* One base table layer, followed by the responsive app layer. */
.mobile-appbar, .mobile-app-ticker { display: none; }
body > .body > #header .single-brand-lockup { width: 100%; display: flex !important; align-items: center; justify-content: center; margin: 0 !important; }
body > .body > .main.live-rates-page { padding: 16px 0 24px !important; background: #260000 !important; }
.live-rates {
    --gold: #efb72f; --ivory: #fff9ed; --grid: rgba(229,170,37,.72);
    --heading-gradient: linear-gradient(135deg, #9d6100, #ffd75a 55%, #b87900);
    --heading-ink: #2a0000;
    width: 970px; max-width: calc(100% - 24px); margin: 0 auto; padding: 10px 14px;
    border: 5px solid var(--gold); border-radius: 31px; color: var(--ivory) !important;
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    background: linear-gradient(145deg,#400000,#270000 65%,#340000) !important;
    box-shadow: inset 0 0 0 3px #7e3104, 0 12px 34px rgba(0,0,0,.45);
}
.market-summary, .rate-panel { overflow: hidden; border: 1px solid var(--gold); border-radius: 18px; background: linear-gradient(105deg,#4b0100,#270000 58%,#480100) !important; }
.market-summary { margin-bottom: 12px; border-width: 2px; border-radius: 23px; }
.market-summary > .row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; }
.summary-item { display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center; align-items: center; gap: 4px 12px; min-width: 0; width: auto; max-width: none; min-height: 100px; padding: 6px 18px; }
.summary-item + .summary-item { border-left: 1px solid var(--grid); }
.summary-copy { display: contents; }
.summary-icon { grid-column: 1; grid-row: 1; }
.live-rates .summary-name { grid-column: 2; grid-row: 1; align-self: center; margin: 0; color: #f6c746 !important; font-size: 26px; font-weight: 500; letter-spacing: .02em; line-height: 1; text-shadow: 0 2px 2px #270000 !important; }
.live-rates .summary-item--currency .summary-name { grid-column: 1 / -1; text-align: center; }
.live-rates .summary-value { grid-column: 1 / -1; grid-row: 2; margin: 0; text-align: center; color: #fff !important; font-size: 34px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 2px #000 !important; }
.summary-range { display: none; }
.metal-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.metal-icon svg { width: 16px; height: 16px; }
.metal-icon--gold { background: radial-gradient(circle at 35% 30%,#ffe9a8,#e0a400 60%,#a06e00); color: #6b4a00; }
.metal-icon--silver { background: radial-gradient(circle at 35% 30%,#fff,#c9cfd6 60%,#8b929b); color: #4a5560; }
.rate-panel + .rate-panel { margin-top: 12px; }
.panel-heading { height: 42px; display: flex; justify-content: center; align-items: flex-start; background: transparent !important; }
body .main.live-rates-page .live-rates .panel-title {
    min-width: 44%; max-width: 100%; margin: 0; padding: 7px 26px 8px;
    color: var(--heading-ink) !important;
    background: var(--heading-gradient) !important;
    font-family: "Segoe UI", sans-serif;
    font-size: 23px; font-weight: 800; letter-spacing: 2px; line-height: 1;
    text-align: center; text-transform: uppercase; text-shadow: none !important;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.live-rates .rates-table { width: 100%; margin: 0; color: #fff !important; table-layout: fixed; border-collapse: collapse; }
.rates-table col.product { width: 47%; }
.rates-table col.price { width: 26.5%; }
.future-panel .rates-table col.product { width: 37%; }
.future-panel .rates-table col.price { width: 20%; }
.future-panel .rates-table col.range { width: 23%; }
body .main.live-rates-page .live-rates .rates-table thead th {
    height: 30px; padding: 4px 18px; border: 0 !important;
    color: var(--heading-ink) !important;
    background: var(--heading-gradient) !important;
    font-family: "Segoe UI", sans-serif;
    font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1;
    text-transform: uppercase; text-shadow: none !important;
}
.rates-table thead th:first-child { text-align: left; }
.rates-table thead th:not(:first-child) { text-align: center; }
.main .live-rates .rates-table tbody td { height: 60px; padding: 6px 18px; border-top: 1px solid var(--grid) !important; color: #fff !important; background: transparent !important; vertical-align: middle; }
.rates-table tbody td + td { border-left: 1px solid var(--grid) !important; }
.product-cell { font-size: 18px; font-weight: 500; letter-spacing: -.02em; text-align: left; line-height: 1.3; overflow-wrap: anywhere; }
.product-copy { display: flex; align-items: center; gap: 8px; }
.product-name { min-width: 0; }
.price-cell { text-align: center; }
.price-main { display: block; width: auto; margin: 0 auto; padding: 0; font-size: 26px; font-weight: 500; line-height: 1.05; white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 2px 2px #000 !important; }
.range-cell { text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.range-values { white-space: nowrap; }
.summary-item, .rate-row { cursor: pointer; }
.summary-item:focus-visible, .rate-row:focus-visible { outline: 3px solid #fff3a6; outline-offset: -3px; }
.rate-row:hover td { background: rgba(118,24,10,.66) !important; }
.live-rates .summary-value.rate-up, .live-rates .price-main.rate-up { color: #77e39b !important; }
.live-rates .summary-value.rate-down, .live-rates .price-main.rate-down { color: #ff8c8c !important; }
.market-ticker { display: flex; align-items: center; min-height: 36px; margin: 10px 0 6px; overflow: hidden; border: 1px solid var(--gold); background: #260000 !important; }
.market-ticker-label { align-self: stretch; display: flex; align-items: center; flex: 0 0 auto; padding: 0 16px; color: #260000 !important; background: var(--gold) !important; font-weight: 800; text-transform: uppercase; }
.market-ticker-viewport { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; }
.market-ticker-text { display: inline-block; min-width: 100%; padding-inline-start: 100%; color: var(--ivory) !important; font-weight: 700; animation: marketTicker 22s linear infinite; }
.market-ticker:hover .market-ticker-text { animation-play-state: paused; }
@keyframes marketTicker { to { transform: translateX(-100%); } }
.rates-status { margin: 0 0 4px; color: #f7d979 !important; font-size: 13px; text-align: center; }
@media (prefers-reduced-motion: reduce) {
    .market-ticker-text { animation: none; padding-inline-start: 12px; white-space: normal; }
    .market-ticker-viewport { white-space: normal; }
}