/* ============================================================
   AURIXA — Mobile Stylesheet (v6 premium)
   ────────────────────────────────────────────────────────────
   Sole source of truth for the mobile hamburger menu.
   No inline mobile-nav CSS on any page, so no !important
   wars — plain, clean CSS.

   Design goals (IMDb-grade):
   - Panel takes 92% of screen (feels immersive on mobile)
   - Prominent circular close button (top-right, gold-tinted)
   - Icons on every nav item via CSS attribute selectors
   - Section grouping via border-top on grouped items
   - Comfortable 56px tap targets
   - Cream background with gold accents
   ============================================================ */

:root{
  --m-panel:      #F9F7F3;
  --m-charcoal:   #1A1B2E;
  --m-slate:      #5A5C6E;
  --m-mist:       #9A9BAA;
  --m-gold:       #B8860B;
  --m-gold-2:     #C9980A;
  --m-gold-soft:  rgba(184,134,11,0.10);
  --m-gold-line:  rgba(184,134,11,0.14);
  --m-scrim:      rgba(20,25,40,0.55);
  --m-ease:       cubic-bezier(0.32, 0.72, 0.20, 1);
}

/* ============================================================
   MOBILE MENU
   Hidden on desktop. Slides in from the right on ≤1024px.
   HTML shape (unchanged on every page):
     <div id="mobile-nav">
       <button class="mobile-close">✕</button>
       <button class="mobile-nav-link" onclick="location.href='/x'">…</button>
     </div>
   ============================================================ */

/* Desktop: hidden regardless of .open state. */
#mobile-nav{ display: none; }

@media (max-width: 1024px){
  /* Lock body scroll while open (no JS needed). */
  body:has(#mobile-nav.open){ overflow: hidden; }

  /* Panel: right-side slide-in.
     92% of screen up to 380px cap — feels immersive without hiding
     everything, and leaves a small tappable scrim strip on the left. */
  #mobile-nav{
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(92vw, 380px);
    z-index: 2000;
    background: var(--m-panel);
    border-left: 1px solid var(--m-gold-line);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 320ms var(--m-ease), box-shadow 320ms var(--m-ease);
    pointer-events: none;
    backdrop-filter: none;
  }

  /* Open state: slide in + scrim over the rest of the page. */
  #mobile-nav.open{
    transform: translateX(0);
    pointer-events: auto;
    box-shadow:
      -100vw 0 0 var(--m-scrim),
      -12px 0 32px rgba(0,0,0,0.22);
  }

  /* ── Panel header (sticky top area with brand + close) ──
     The close button is the first child. We give it a header-like
     "bar" via a top padding on the panel and absolute positioning. */
  #mobile-nav .mobile-close{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--m-gold-line);
    box-shadow: 0 1px 3px rgba(20,25,40,0.08);
    color: var(--m-charcoal);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s, color 0.2s, transform 0.25s var(--m-ease), box-shadow 0.2s;
  }
  #mobile-nav .mobile-close:hover,
  #mobile-nav .mobile-close:active{
    background: var(--m-gold);
    border-color: var(--m-gold);
    color: #FFFFFF;
    transform: rotate(90deg);
    box-shadow: 0 4px 12px rgba(184,134,11,0.35);
  }

  /* Sticky brand label at the top of the panel.
     Rendered via a pseudo-element on the panel so no HTML change. */
  #mobile-nav::before{
    content: "AURIXA";
    display: block;
    padding: 20px 24px 18px;
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: var(--m-gold);
    border-bottom: 1px solid var(--m-gold-line);
    background: var(--m-panel);
    text-transform: uppercase;
  }

  /* ── Nav link rows ── */
  #mobile-nav .mobile-nav-link{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 58px;
    padding: 18px 44px 18px 24px;
    margin: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(184,134,11,0.08);
    border-radius: 0;
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--m-charcoal);
    text-align: left;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.18s var(--m-ease), color 0.18s var(--m-ease), padding-left 0.2s var(--m-ease);
    opacity: 1;
  }

  /* Icon before the label — mapped from the onclick URL.
     No HTML change needed; icons vary by which link it is. */
  #mobile-nav .mobile-nav-link::before{
    content: "🏠";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    margin-right: 14px;
    font-size: 17px;
    line-height: 1;
    filter: saturate(0.9);
  }
  #mobile-nav .mobile-nav-link[onclick*="gold-rate-today"]::before{ content: "🥇"; }
  #mobile-nav .mobile-nav-link[onclick*="silver-rate-today"]::before{ content: "🥈"; }
  #mobile-nav .mobile-nav-link[onclick*="platinum-rate-today"]::before{ content: "💠"; }
  #mobile-nav .mobile-nav-link[onclick*="charts"]::before{ content: "📊"; }
  #mobile-nav .mobile-nav-link[onclick*="calculator"]::before,
  #mobile-nav .mobile-nav-link[onclick*="Calculators"]::before{ content: "🧮"; }
  #mobile-nav .mobile-nav-link[onclick*="ai-advisor"]::before{ content: "🤖"; }
  #mobile-nav .mobile-nav-link[onclick*="news"]::before{ content: "📰"; }
  #mobile-nav .mobile-nav-link[onclick*="jewellers"]::before{ content: "💎"; }

  /* Right-side chevron for that "tap forward" feel */
  #mobile-nav .mobile-nav-link::after{
    content: "›";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: var(--m-mist);
    font-weight: 400;
    transition: color 0.18s, right 0.2s var(--m-ease);
  }

  #mobile-nav .mobile-nav-link:hover,
  #mobile-nav .mobile-nav-link:active,
  #mobile-nav .mobile-nav-link:focus-visible{
    background: var(--m-gold-soft);
    color: var(--m-gold);
    outline: none;
    padding-left: 28px;
  }
  #mobile-nav .mobile-nav-link:hover::after,
  #mobile-nav .mobile-nav-link:active::after,
  #mobile-nav .mobile-nav-link:focus-visible::after{
    color: var(--m-gold);
    right: 18px;
  }
  #mobile-nav .mobile-nav-link:last-child{ border-bottom: none; }
}

/* ============================================================
   NAVBAR — mobile layout (hide desktop links, show hamburger)
   ============================================================ */
@media (max-width: 1024px){
  .nav-links,
  .nav-right .btn-login{ display: none; }
  /* Hamburger moves to the LEFT (order:-1) to match the design and the
     left-sliding v2 panel — tapping left opens a panel from the left.
     order + margin override does this without any per-page HTML change. */
  .nav-hamburger{
    display: flex;
    flex-shrink: 0;
    order: -1;
    margin-left: 0;
    margin-right: 6px;
  }
  /* nav-right keeps its inline margin-left:auto, so the icon cluster
     (bell/profile) still sits at the far right. */
  .nav-inner{ gap: 8px; padding: 0 16px; }
  .nav-logo{ margin-right: 0; flex-shrink: 1; min-width: 0; }
  .nav-logo-text{ font-size: 16px; }
  .nav-logo-sub{ font-size: 8px; letter-spacing: 0.03em; }
}

/* ============================================================
   MAIN CONTENT — mobile layout adjustments
   ============================================================ */
@media (max-width: 1024px){
  .hero-inner, .main-grid, .mg-inner{ grid-template-columns: 1fr; }
  .qa-grid{ grid-template-columns: repeat(4, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .side-col{ display: none; }
  .news-grid{ grid-template-columns: 1fr; }
  .news-card.featured{ flex-direction: column; }
  .news-card.featured .nc-thumb{ width: 100%; }
}

@media (max-width: 768px){
  .price-cards{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-greeting{ font-size: 22px; }
  .meta-bar{ flex-wrap: wrap; }
  .meta-item{ min-width: 50%; padding: 10px 8px; }
  .meta-item:not(:last-child){
    border-right: none;
    border-bottom: 1px solid var(--border, #E8E9F0);
    padding-bottom: 10px;
  }
  .qa-grid{ grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .qa-btn{ padding: 12px 6px; }
  .qa-label{ font-size: 10px; }
  .alert-banner-inner{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .alert-form{ flex-direction: column; width: 100%; }
  .alert-email-input{ width: 100%; }
  .alert-submit-btn{ width: 100%; min-height: 44px; }
  .footer-grid{ grid-template-columns: 1fr; }
  #hero{ padding: 20px 16px 0; }
  .chart-panel{ padding: 16px; }
  .chart-big-price{ font-size: 24px; }
  #main-chart-canvas{ height: 140px; }
  .container{ padding: 0 16px; }
}

@media (max-width: 600px){
  .price-cards, .news-grid{ grid-template-columns: 1fr; gap: 12px; }
  .pc-price{ font-size: 20px; }
  .qa-grid{ grid-template-columns: repeat(3, 1fr); }
  .meta-bar{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .meta-item{
    min-width: 100%;
    border-right: none;
    border-bottom: none;
    padding: 12px;
  }
}

@media (max-width: 480px){
  html{ font-size: 14px; }
  .container{ padding: 0 12px; }
  #hero{ padding: 16px 12px 0; }
  .nav-inner{ height: 56px; padding: 0 12px; }
  .nav-logo-icon{ width: 32px; height: 32px; font-size: 18px; }
  .nav-logo-text{ font-size: 15px; }
  .nav-logo-sub{ display: none; }
  .hero-greeting{ font-size: 20px; }
  .hero-sub{ font-size: 12px; }
  .price-cards, .news-grid{ gap: 10px; }
  .pc-price{ font-size: 20px; }
  .qa-grid{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .qa-btn{ padding: 10px 6px; }
  .qa-label{ font-size: 10px; line-height: 1.2; }
  .section-title{ font-size: 15px; }
  .btn-login{ padding: 6px 14px; font-size: 12px; min-height: 40px; }
  .nav-icon-btn{ min-height: 40px; min-width: 40px; }
  #mobile-nav{ width: 94vw; }
  #mobile-nav .mobile-nav-link{ padding: 16px 40px 16px 20px; font-size: 15px; min-height: 54px; }
  #mobile-nav .mobile-nav-link::before{ margin-right: 12px; font-size: 16px; }
  #mobile-nav::before{ padding: 18px 20px 16px; }
  #mobile-nav .mobile-close{ top: 12px; right: 12px; width: 42px; height: 42px; font-size: 17px; }
}

@media (max-width: 375px){
  .nav-inner{ padding: 0 10px; }
  .nav-logo-text{ font-size: 14px; }
  .qa-grid{ grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .qa-btn{ padding: 8px 4px; }
  .qa-label{ font-size: 9.5px; }
}

/* ============================================================
   HORIZONTAL-OVERFLOW FIX (make every page fit the screen)
   ────────────────────────────────────────────────────────────
   Some pages (homepage, charts) rendered wider than the phone
   screen because of wide data tables and long tab rows. This
   clips overflow at the root and makes wide elements scroll
   INSIDE their own container instead of stretching the page.
   ============================================================ */
@media (max-width: 1024px){
  /* Clip at the root — mobile scroll container is often <html>. */
  html, body{
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Wide data tables: scroll horizontally within their card,
     never widen the page. */
  .market-table,
  .perf-table,
  table{
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Long horizontal tab rows (period 1D/7D/…/All, metal tabs):
     let them scroll horizontally instead of overflowing. */
  .period-tabs,
  .metal-tabs,
  .chart-period-tabs,
  .tabs-inner,
  .ct-inner{
    flex-wrap: wrap;
  }

  /* Any element that still tries to exceed the viewport gets clamped. */
  .container,
  .mg-inner,
  .main-grid,
  .hero-inner,
  #page-header .ph-inner,
  .chart-panel,
  .market-panel,
  .perf-card,
  section{
    max-width: 100%;
  }

  /* Grid/flex CHILDREN default to min-width:auto, which refuses to shrink
     below their content's intrinsic width — so a wide table forced its
     column past the track and clipped the rightmost cells (Change/Trend).
     min-width:0 lets the column shrink to the track so the table's own
     overflow-x:auto scrolls it inside the card instead of clipping. */
  .main-grid > *,
  .mg-inner > *,
  .hero-inner > *{
    min-width: 0;
  }

  /* Images and canvases never exceed their box. */
  img, canvas, svg{ max-width: 100%; }
}

/* ============================================================
   MOBILE MENU v2 (redesign)
   Scoped to #mobile-nav.v2 so pages still on the old menu are
   completely unaffected. Slides in from the LEFT; card-style
   menu rows with icon tiles, subtitles, and a quick-actions grid.
   ============================================================ */
@media (max-width: 1024px){
  /* Suppress the old pseudo-element brand label — v2 has a real header. */
  #mobile-nav.v2::before{ content: none; display: none; }

  /* Slide in from the LEFT (old menu came from the right). */
  #mobile-nav.v2{
    left: 0;
    right: auto;
    width: min(88vw, 360px);
    border-left: none;
    border-right: 1px solid var(--m-gold-line);
    transform: translateX(-100%);
    background: #FFFFFF;
    padding-bottom: 24px;
  }
  #mobile-nav.v2.open{
    transform: translateX(0);
    /* Scrim now falls to the RIGHT of the panel. */
    box-shadow:
      100vw 0 0 var(--m-scrim),
      12px 0 32px rgba(0,0,0,0.22);
  }

  /* ── Header: brand + circular dark close ── */
  #mobile-nav.v2 .mnav-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 18px 18px;
    background: linear-gradient(180deg, #FBF6EC, #FFFFFF);
    border-bottom: 1px solid var(--m-gold-line);
  }
  #mobile-nav.v2 .mnav-brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; }
  #mobile-nav.v2 .mnav-brand-icon{
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #D9A521, #B8860B);
    color: #fff; font-family: 'Manrope','Inter',sans-serif; font-weight: 800; font-size: 20px;
  }
  #mobile-nav.v2 .mnav-brand-text{ display: flex; flex-direction: column; }
  #mobile-nav.v2 .mnav-brand-name{ font-family:'Manrope','Inter',sans-serif; font-size: 18px; font-weight: 800; color: var(--m-charcoal); line-height: 1.1; }
  #mobile-nav.v2 .mnav-brand-sub{ font-size: 9.5px; color: var(--m-mist); letter-spacing: 0.02em; margin-top: 2px; }
  #mobile-nav.v2 .mnav-close{
    flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--m-charcoal); border: none; color: #fff; cursor: pointer;
    transition: transform 0.25s var(--m-ease), background 0.2s;
  }
  #mobile-nav.v2 .mnav-close svg{ width: 20px; height: 20px; }
  #mobile-nav.v2 .mnav-close:active{ transform: rotate(90deg); background: var(--m-gold); }

  /* ── Section labels ── */
  #mobile-nav.v2 .mnav-section-label{
    padding: 18px 20px 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--m-mist);
  }

  /* ── Menu rows ── */
  #mobile-nav.v2 .mnav-list{ display: flex; flex-direction: column; padding: 0 12px; }
  #mobile-nav.v2 .mnav-item{
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 12px 10px; margin: 0; background: transparent;
    border: none; border-radius: 14px; cursor: pointer; text-align: left;
    transition: background 0.16s var(--m-ease);
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-nav.v2 .mnav-item:active{ background: rgba(20,25,40,0.04); }
  #mobile-nav.v2 .mnav-item.highlight{ background: rgba(124,58,237,0.07); }

  #mobile-nav.v2 .mnav-ic{
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
  }
  #mobile-nav.v2 .mnav-ic svg{ width: 22px; height: 22px; }
  /* Tinted icon tiles (background + icon colour per item). */
  #mobile-nav.v2 .ic-markets{ background: #FCEFCF; color: #B8860B; }
  #mobile-nav.v2 .ic-charts { background: #EEE7FD; color: #7C3AED; }
  #mobile-nav.v2 .ic-calc   { background: #FDE8D9; color: #E06A2C; }
  #mobile-nav.v2 .ic-ai     { background: #EAE2FE; color: #7C3AED; }
  #mobile-nav.v2 .ic-news   { background: #DEF3E6; color: #12A150; }
  #mobile-nav.v2 .ic-jewel  { background: #DCEEFB; color: #2A7DE1; }

  #mobile-nav.v2 .mnav-txt{ display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
  #mobile-nav.v2 .mnav-title{ font-family:'Manrope','Inter',sans-serif; font-size: 15px; font-weight: 700; color: var(--m-charcoal); display: flex; align-items: center; gap: 6px; }
  #mobile-nav.v2 .mnav-desc{ font-size: 11.5px; color: var(--m-slate); line-height: 1.3; }
  #mobile-nav.v2 .mnav-badge{
    font-size: 8.5px; font-weight: 800; letter-spacing: 0.04em;
    color: #fff; background: #7C3AED; padding: 2px 5px; border-radius: 5px;
  }
  #mobile-nav.v2 .mnav-chev{ flex-shrink: 0; font-size: 22px; color: var(--m-mist); font-weight: 400; }

  /* ── Quick actions grid ── */
  #mobile-nav.v2 .mnav-quick{
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px; padding: 0 16px;
  }
  #mobile-nav.v2 .mnav-qa{
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 4px; background: #FFFFFF;
    border: 1px solid rgba(20,25,40,0.08); border-radius: 12px;
    cursor: pointer; font-family:'Manrope','Inter',sans-serif;
    font-size: 10.5px; font-weight: 600; color: var(--m-slate);
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.16s, transform 0.16s var(--m-ease);
  }
  #mobile-nav.v2 .mnav-qa:active{ transform: scale(0.96); border-color: var(--m-gold-line); }
  #mobile-nav.v2 .mnav-qa-ic{
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
  }
  #mobile-nav.v2 .mnav-qa-ic svg{ width: 18px; height: 18px; }
  #mobile-nav.v2 .qa-alert  { background: #FCEFCF; color: #B8860B; }
  #mobile-nav.v2 .qa-watch  { background: #EEE7FD; color: #7C3AED; }
  #mobile-nav.v2 .qa-compare{ background: #DEF3E6; color: #12A150; }
  #mobile-nav.v2 .qa-history{ background: #FDE8D9; color: #E06A2C; }
}

/* ============================================================
   MOBILE BOTTOM TAB BAR
   New element (#mobile-tabbar). Hidden on desktop, fixed to the
   bottom on <=1024px. Gold center item is elevated like an app.
   ============================================================ */

/* Desktop: never shown. */
#mobile-tabbar{ display: none; }

@media (max-width: 1024px){
  #mobile-tabbar{
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    align-items: stretch;
    justify-content: space-around;
    height: 62px;
    padding: 0 4px calc(env(safe-area-inset-bottom, 0px));
    background: #FFFFFF;
    border-top: 1px solid rgba(20,25,40,0.07);
    box-shadow: 0 -6px 20px rgba(20,25,40,0.06);
  }
  /* Don't let content hide behind the fixed bar. */
  body:has(#mobile-tabbar){ padding-bottom: 74px; }

  #mobile-tabbar .mtab{
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    padding: 8px 2px 6px;
    cursor: pointer;
    color: var(--m-mist);
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s var(--m-ease);
  }
  #mobile-tabbar .mtab svg{ width: 23px; height: 23px; }
  #mobile-tabbar .mtab span{ line-height: 1; }
  #mobile-tabbar .mtab.active{ color: var(--m-gold); }
  #mobile-tabbar .mtab:active{ color: var(--m-gold-2); }

  /* Elevated center (Gold) item. */
  #mobile-tabbar .mtab-center{ position: relative; color: var(--m-gold); }
  #mobile-tabbar .mtab-center-circle{
    position: relative;
    top: -18px;
    margin-bottom: -14px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #D9A521, #B8860B);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(184,134,11,0.42);
    border: 4px solid #FFFFFF;
  }
  #mobile-tabbar .mtab-center-circle svg{ width: 27px; height: 27px; }
  #mobile-tabbar .mtab-center span{ margin-top: 2px; }
}

/* ============================================================
   HOMEPAGE MOBILE CONTENT (design match)
   Placed late in the file so source order wins over the earlier
   768/600/480 breakpoint rules. Only classes that exist on the
   homepage are targeted, so other pages are unaffected.
   ============================================================ */
@media (max-width: 1024px){
  /* 3 metal cards in a single row, app-style. */
  .price-cards{
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px;
  }
  .price-card{
    /* min-width:0 lets each grid track stay an equal 1/3 instead of the
       nowrap price/change text forcing a track wide (which clipped the
       rightmost Platinum card past the viewport edge). */
    min-width: 0;
    overflow: hidden;
    padding: 14px 6px;
    border-radius: 16px;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid rgba(20,25,40,0.07);
    box-shadow: 0 1px 3px rgba(20,25,40,0.04);
  }
  /* Icon + name stack and centre (desktop had them in a row). */
  .price-card .pc-header{
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
  }
  .price-card .pc-icon{ width: 40px; height: 40px; font-size: 23px; }
  .price-card .pc-metal{ font-size: 11.5px; font-weight: 700; }
  .price-card .pc-price{
    font-size: 14.5px; font-weight: 800;
    white-space: nowrap; letter-spacing: -0.02em;
  }
  .price-card .pc-unit{ font-size: 10px; color: var(--m-mist); margin-bottom: 5px; }
  .price-card .pc-change{
    font-size: 9.5px; font-weight: 700;
    /* Stack the "Today" label below the ▲/▼ % change (was inline). */
    display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
    white-space: nowrap; letter-spacing: -0.01em;
  }
  .price-card .pc-change .pc-change-label{
    margin-left: 0;
    font-size: 9px;
    font-weight: 500;
  }
  /* Highlight the gold card (cream fill + gold border), like the design. */
  #card-gold{
    background: linear-gradient(180deg, #FDF6E6, #FFFFFF);
    border: 1.5px solid rgba(184,134,11,0.45);
    box-shadow: 0 4px 14px rgba(184,134,11,0.12);
  }

  /* ── Latest News rows: fix clipped badge + 3-line dates ──
     Desktop .news-meta is a single nowrap flex row; on mobile the long
     source domain squeezed the date onto 3 lines and pushed the category
     badge off the right edge. Let the row wrap and keep each token intact. */
  .page-home-v2 .news-item{ padding: 14px 16px; gap: 12px; }
  .page-home-v2 .news-thumb{ width: 64px; height: 52px; }
  .page-home-v2 .news-headline{ font-size: 13px; line-height: 1.4; margin-bottom: 6px; }
  .page-home-v2 .news-meta{
    flex-wrap: wrap;
    row-gap: 5px;
    column-gap: 7px;
    font-size: 10.5px;
  }
  /* Keep multi-word tokens (source, "5 days ago") on one line each. */
  .page-home-v2 .news-meta > span{ white-space: nowrap; }
  /* Badge drops to its own line instead of being clipped. */
  .page-home-v2 .news-meta .news-cat-badge{
    flex-basis: 100%;
    width: max-content;
    margin-top: 1px;
    font-size: 9px;
    padding: 2px 6px;
  }

  /* ── Alert banner "Never miss the right price": shrink for mobile ── */
  .page-home-v2 #alert-banner{ padding: 0 16px 20px; }
  .page-home-v2 .alert-banner-inner{ padding: 18px 18px; gap: 14px; }
  .page-home-v2 .alert-bell{ font-size: 32px; }
  .page-home-v2 .alert-headline{ font-size: 16px; margin-bottom: 3px; }
  .page-home-v2 .alert-sub{ font-size: 11.5px; line-height: 1.4; }
}

@media (max-width: 380px){
  /* Very narrow phones: keep 3-across readable. Must stay <= the base
     mobile sizes above, otherwise this narrower query re-inflates the
     price text and re-clips the rightmost card at 375px. */
  .price-card{ padding: 13px 4px; }
  .price-card .pc-icon{ width: 36px; height: 36px; font-size: 20px; }
  .price-card .pc-metal{ font-size: 11px; }
  .price-card .pc-price{ font-size: 13px; }
  .price-card .pc-unit{ font-size: 9.5px; }
  .price-card .pc-change{ font-size: 9px; }
  .price-cards{ gap: 6px; }
}

/* ============================================================
   HOMEPAGE MOBILE — end the page at the alert banner
   The app-style design stops after the alert banner (nav lives in
   the bottom tab bar), so the desktop footer + trailing ad are
   hidden on mobile. Homepage-only + desktop keeps its footer.
   ============================================================ */
@media (max-width: 1024px){
  .page-home-v2 #footer{ display: none; }
  /* The trailing ad <ins> carries an inline display:block, so !important
     is required to override it (stylesheet rules lose to inline styles). */
  .page-home-v2 > .adsbygoogle{ display: none !important; }
}

/* ============================================================
   MOBILE TOP BAR (location pill + LIVE badge)
   New element (#mobile-topbar). Hidden on desktop, shown under
   the navbar on <=1024px, matching the design.
   ============================================================ */
#mobile-topbar{ display: none; }

@media (max-width: 1024px){
  #mobile-topbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--panel, #F7F7FB);
  }
  #mobile-topbar .mtb-location{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: #FFFFFF;
    border: 1px solid rgba(20,25,40,0.10);
    border-radius: 22px;
    font-family: 'Manrope','Inter',sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--m-charcoal);
    cursor: pointer;
    max-width: 68%;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-topbar .mtb-pin{ color: var(--m-gold); flex-shrink: 0; }
  #mobile-topbar .mtb-city{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #mobile-topbar .mtb-chev{ color: var(--m-mist); flex-shrink: 0; font-size: 11px; }
  #mobile-topbar .mtb-live{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: #E6F6EC;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #12A150;
    flex-shrink: 0;
  }
  #mobile-topbar .mtb-live-dot{
    width: 7px; height: 7px; border-radius: 50%;
    background: #12A150; animation: pulse 2s infinite;
  }
}

/* ============================================================
   METAL RATE PAGES — MOBILE CONTENT (design match)
   Scoped to body.page-metal-v2, shared by gold / silver /
   platinum rate-today pages (identical .rate-card / .karat-tabs
   / .chart-card / .history-table / #ai-banner / #app-banner
   markup). Gold also keeps .page-gold-v2 for back-compat.
   ============================================================ */
@media (max-width: 1024px){
  /* Show the REAL in-hero city dropdown (previously trapped inside
     .ph-actions{display:none}, which caused the invisible-picker bug);
     keep only the share button hidden. The mock topbar pill is hidden,
     LIVE badge stays at the right — mirrors the calculator/home pattern. */
  .page-metal-v2 #breadcrumb{ display: none; }
  .page-metal-v2 #page-header .ph-actions{ display: flex; width: 100%; }
  .page-metal-v2 #page-header .ph-actions .btn-share{ display: none; }
  .page-metal-v2 #page-header .ph-live-badge{ display: none; }
  .page-metal-v2 #mobile-topbar{ justify-content: flex-end; }
  .page-metal-v2 #mobile-topbar .mtb-location{ display: none; }

  /* Charts & News aren't city-specific — the topbar pill was a pure mock
     (it only linked home). Hide it; keep the LIVE badge at the right. */
  .page-charts-v2 #mobile-topbar,
  .page-news-v2 #mobile-topbar{ justify-content: flex-end; }
  .page-charts-v2 #mobile-topbar .mtb-location,
  .page-news-v2 #mobile-topbar .mtb-location{ display: none; }
  .page-metal-v2 #page-header{ padding: 14px 16px 6px; }
  .page-metal-v2 .ph-title{ font-size: 22px; }
  .page-metal-v2 .ph-sub{ font-size: 12.5px; }

  /* Karat + unit tabs: horizontal pill rows that scroll, never wrap
     awkwardly. Matches the "24K / 22K / 18K / Silver" scroller. */
  .page-metal-v2 #tabs-row{ padding: 8px 0 4px; }
  .page-metal-v2 .tabs-inner{ flex-direction: column; gap: 10px; }
  .page-metal-v2 .karat-tabs,
  .page-metal-v2 .unit-tabs{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 4px 16px;
    background: transparent;
    border: none;
  }
  .page-metal-v2 .karat-tabs::-webkit-scrollbar,
  .page-metal-v2 .unit-tabs::-webkit-scrollbar{ display: none; }
  .page-metal-v2 .karat-tab,
  .page-metal-v2 .unit-tab{
    flex: 0 0 auto;
    padding: 10px 18px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid rgba(20,25,40,0.10);
    font-size: 13px;
    font-weight: 700;
  }
  .page-metal-v2 .karat-tab.active,
  .page-metal-v2 .unit-tab.active{
    background: var(--m-charcoal);
    color: #fff;
    border-color: var(--m-charcoal);
  }

  /* Rate cards stack; the featured card is the big metal hero. */
  .page-metal-v2 #rate-cards{ padding-left: 16px; padding-right: 16px; }
  .page-metal-v2 .rc-grid{ display: flex; flex-direction: column; gap: 12px; padding: 0; }

  /* ── Uniform card width: every card fills the same 16px→16px track
     (edge-to-edge, matching the AI Insight banner). width:100% +
     border-box forces a consistent box; min-width:0 lets wide content
     (the chart canvas) shrink instead of pushing the card wider. Shared
     by gold / silver / platinum via .page-metal-v2. ── */
  .page-metal-v2 .rate-card,
  .page-metal-v2 .chart-card,
  .page-metal-v2 .market-summary-card,
  .page-metal-v2 .history-card,
  .page-metal-v2 .alert-card,
  .page-metal-v2 .jewellers-card{
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-self: stretch;
  }
  .page-metal-v2 .rate-card{
    border-radius: 18px;
    padding: 18px;
    background: #FFFFFF;
    border: 1px solid rgba(20,25,40,0.08);
  }
  .page-metal-v2 .rate-card.featured{
    background: linear-gradient(135deg, #FBE9C6 0%, #F6D98E 55%, #EFC868 100%);
    border: 1px solid rgba(184,134,11,0.35);
    box-shadow: 0 8px 24px rgba(184,134,11,0.18);
    position: relative;
    overflow: hidden;
  }
  .page-metal-v2 .rate-card.featured .rc-title{ font-size: 15px; font-weight: 700; color: #5C4708; }
  .page-metal-v2 .rate-card.featured .rc-icon{ font-size: 40px; }
  .page-metal-v2 .rate-card.featured .rc-price{ font-size: 32px; color: #1A1B2E; }
  .page-metal-v2 .rate-card.featured .rc-price-unit{ color: #6B5A20; }
  .page-metal-v2 .rate-card.featured .rc-hilo{
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgba(92,71,8,0.18);
    display: flex; justify-content: space-between;
    font-size: 13px; color: #5C4708;
  }
  .page-metal-v2 .rate-card .rc-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .page-metal-v2 .rate-card .rc-change{ display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; margin-top: 4px; }

  /* Section side padding for the stacked sections. */
  .page-metal-v2 #insight-banner,
  .page-metal-v2 #main-grid,
  .page-metal-v2 #ai-banner,
  .page-metal-v2 #quick-calcs,
  .page-metal-v2 #bottom-grid,
  .page-metal-v2 #app-banner{ padding-left: 16px; padding-right: 16px; }

  /* ── Main grid: single column (chart above market summary) ── */
  .page-metal-v2 .mg-inner{ display: flex; flex-direction: column; gap: 14px; }

  /* ── Chart card: readable canvas + scrollable period pills ── */
  .page-metal-v2 .chart-card{ padding: 16px 14px; border-radius: 18px; }
  .page-metal-v2 .chart-header{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-metal-v2 .chart-title{ font-size: 15px; font-weight: 700; }
  .page-metal-v2 .chart-period-tabs{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    width: 100%;
  }
  .page-metal-v2 .chart-period-tabs::-webkit-scrollbar{ display: none; }
  .page-metal-v2 .chart-period-tabs .cpt,
  .page-metal-v2 .chart-period-tabs .cpt-refresh{ flex: 0 0 auto; }
  .page-metal-v2 #gold-trend-canvas,
  .page-metal-v2 #silver-trend-canvas,
  .page-metal-v2 #platinum-trend-canvas{ height: 240px !important; width: 100%; }
  .page-metal-v2 .chart-footer{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
  }

  /* ── Market Summary card ── */
  .page-metal-v2 .market-summary-card{ border-radius: 18px; padding: 18px 16px; }

  /* ── AI banner: stack icon + text + button ── */
  .page-metal-v2 .ai-banner-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 16px;
    border-radius: 18px;
  }
  .page-metal-v2 .ai-banner-text{ width: 100%; }
  .page-metal-v2 .btn-ask-ai{ width: 100%; justify-content: center; }

  /* ── Historical Prices table: override the global table{display:block}
     overflow rule (which destroys column alignment) back to a real,
     fixed-layout 3-column table that fits the screen. ── */
  .page-metal-v2 .history-card{ border-radius: 18px; }
  .page-metal-v2 .history-table{
    display: table !important;
    table-layout: fixed;
    width: 100%;
    overflow-x: visible;
  }
  .page-metal-v2 .history-table th,
  .page-metal-v2 .history-table td{
    padding: 12px 7px;
    font-size: 12px;
    white-space: normal;
    vertical-align: middle;
  }
  .page-metal-v2 .history-table th:nth-child(1),
  .page-metal-v2 .history-table td:nth-child(1){ width: 28%; }
  .page-metal-v2 .history-table th:nth-child(2),
  .page-metal-v2 .history-table td:nth-child(2){ width: 34%; text-align: right; }
  .page-metal-v2 .history-table th:nth-child(3),
  .page-metal-v2 .history-table td:nth-child(3){ width: 38%; text-align: right; }
  /* Desktop .ht-change is display:flex, which pulls the cell out of the
     fixed table-column grid and lets the price overlap the change column.
     Force it back to a real right-aligned table cell; keep the arrow+text
     together with the number so nothing wraps oddly. */
  .page-metal-v2 .history-table td.ht-change{
    display: table-cell !important;
    text-align: right;
    white-space: nowrap;
  }
  .page-metal-v2 .history-table td.ht-price{ white-space: nowrap; }

  /* ── App banner + tail: trim padding, hide desktop footer/ad so there's
     no big blank gap after the app card (app-style page ending). ── */
  .page-metal-v2 #app-banner{ padding: 16px 16px 8px; }
  .page-metal-v2 .app-banner-inner{ padding: 20px 18px; border-radius: 18px; }
  .page-metal-v2 #footer{ display: none; }
  .page-metal-v2 > .adsbygoogle{ display: none !important; }
}

/* ============================================================
   CHARTS PAGE — MOBILE CONTENT (design match)
   Scoped to body.page-charts-v2. Note: several selectors here
   (#main-chart-canvas, .chart-big-price, .metal-tabs, .period-tabs)
   are ALSO targeted by earlier GLOBAL rules in this file from the
   homepage work. The .page-charts-v2 prefix raises specificity and
   these rules come later in source order, so they win — required,
   or the charts canvas would collapse to the homepage's 140px and
   the tab rows would wrap instead of scroll.
   ============================================================ */
@media (max-width: 1024px){
  /* Breadcrumb: compact top strip. */
  .page-charts-v2 #breadcrumb{ padding: 12px 16px 0; }
  .page-charts-v2 .breadcrumb-inner{ font-size: 12px; }

  /* Header: title block stacks above the action cards. */
  .page-charts-v2 #page-header{ padding: 10px 16px 14px; }
  .page-charts-v2 .ph-inner{ flex-direction: column; align-items: stretch; gap: 14px; }
  .page-charts-v2 .ph-title{ font-size: 23px; }
  .page-charts-v2 .ph-sub{ font-size: 13px; line-height: 1.45; }

  /* Compare / Export / Save become equal icon-cards (icon over label). */
  .page-charts-v2 .ph-actions{ width: 100%; gap: 10px; }
  .page-charts-v2 .btn-action{
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 14px;
    font-size: 12px;
    background: #FFFFFF;
    border: 1px solid rgba(20,25,40,0.10);
  }
  .page-charts-v2 .btn-action .ba-ic{ font-size: 19px; line-height: 1; }

  /* Metal + period tabs: horizontal scroll pill rows (never wrap). */
  .page-charts-v2 #tabs-row{ padding: 0 0 12px; }
  /* nowrap here is essential: the global overflow-fix rule sets .tabs-inner
     to flex-wrap:wrap, and wrap + column direction breaks cross-axis
     stretch so .period-tabs sized to its 521px content instead of the
     360px container — pushing 5Y/10Y/All off-screen with no scroll. */
  .page-charts-v2 .tabs-inner{ flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  .page-charts-v2 .metal-tabs,
  .page-charts-v2 .period-tabs{
    display: flex;
    flex-wrap: nowrap;
    /* Explicit width clamps the row to the screen regardless of flex
       stretch quirks; overflow-x:auto then scrolls the pills inside it. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 4px 16px;
    background: transparent;
    border: none;
  }
  .page-charts-v2 .metal-tabs::-webkit-scrollbar,
  .page-charts-v2 .period-tabs::-webkit-scrollbar{ display: none; }
  .page-charts-v2 .metal-tab{
    flex: 0 0 auto;
    padding: 9px 18px;
    border-radius: 11px;
    font-size: 13px;
  }
  .page-charts-v2 .pt{
    flex: 0 0 auto;
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 12.5px;
  }

  /* Main grid: single column, tighter side padding. */
  .page-charts-v2 #main-grid{ padding: 0 16px 16px; }
  .page-charts-v2 .mg-inner{ gap: 16px; }
  .page-charts-v2 .mg-left{ gap: 16px; }

  /* Chart card. */
  .page-charts-v2 .chart-card{ padding: 16px; border-radius: 16px; }
  .page-charts-v2 .chart-card-title{ font-size: 14px; }
  .page-charts-v2 .unit-select{ padding: 6px 8px; font-size: 11.5px; }
  .page-charts-v2 .chart-big-price{ font-size: 26px; }
  .page-charts-v2 #main-chart-canvas{ height: 240px; }
  .page-charts-v2 .chart-stats-row{ grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .page-charts-v2 .cstat-val{ font-size: 12.5px; }
  .page-charts-v2 .cstat-label{ font-size: 10px; }

  /* Sidebar cards stack full-width. */
  .page-charts-v2 .side-card,
  .page-charts-v2 .didyouknow-card{ padding: 16px; border-radius: 16px; margin-bottom: 16px; }

  /* Bottom grid (heatmap + events) stacks. */
  .page-charts-v2 #bottom-grid{ padding: 0 16px 16px; }
  .page-charts-v2 .bottom-inner{ gap: 16px; }
  /* The single 1fr track was forced to ~345px (wider than its ~328px
     container at 360px) because the 13-col heatmap grid inside refuses
     to shrink below its intrinsic width. min-width:0 lets the track and
     the cards collapse to the container so they sit inside the screen. */
  .page-charts-v2 .bottom-inner{ min-width: 0; }
  .page-charts-v2 .bottom-inner > *{ min-width: 0; }
  .page-charts-v2 .heatmap-card,
  .page-charts-v2 .events-card{
    min-width: 0;
    overflow: hidden;
    padding: 16px;
    border-radius: 16px;
  }
  /* Heatmap grid: tighter so 12 month cells + year label fit ~296px. */
  .page-charts-v2 .heatmap-grid{ gap: 2px; font-size: 8.5px; }
  .page-charts-v2 .heatmap-cell{ font-size: 0; }
  /* Events rows: keep date/title/impact on their line, never push wide. */
  .page-charts-v2 .event-date{ width: 58px; font-size: 10.5px; }
  .page-charts-v2 .event-title{ font-size: 12.5px; }
  .page-charts-v2 .event-impact{ font-size: 12.5px; }

  /* Feature strip: compact 2-col grid. NOTE: #ai-cta-strip sits AFTER
     this strip, so feature-strip is NO LONGER the last element and must
     not carry the tabbar clearance itself (doing so left the AI box below
     it hidden behind the fixed tabbar). Normal padding; the body carries
     the clearance, same as every other tabbar page. */
  .page-charts-v2 #feature-strip{
    padding: 18px 16px;
  }
  .page-charts-v2 .fs-inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 14px;
  }
  .page-charts-v2 .fs-item{ align-items: flex-start; }

  /* Keep the global body tabbar clearance (74px) so the trailing
     #ai-cta-strip clears the fixed bottom bar, same as every other
     tabbar page. (Previously zeroed when feature-strip was the last
     element and carried the clearance itself.) */

  /* App-style: end the page at the feature strip; hide desktop footer. */
  .page-charts-v2 #footer{ display: none; }
  /* Trailing AdSense <ins> sits after the feature strip. It collapses to
     0 locally (no ad) but reserves a tall white block on the live site,
     leaving a big blank gap below the dark strip. Its inline display:block
     needs !important to override. Same treatment as the homepage ad. */
  .page-charts-v2 > .adsbygoogle{ display: none !important; }
}

/* ============================================================
   NEWS PAGE — MOBILE CONTENT (design match)
   Scoped to body.page-news-v2. News cards become a thumbnail-left
   list; the first (featured) card stays an image-top hero.
   ============================================================ */
@media (max-width: 1024px){
  /* Breadcrumb + header. */
  .page-news-v2 #breadcrumb{ padding: 12px 16px 0; }
  .page-news-v2 .breadcrumb-inner{ font-size: 12px; }
  .page-news-v2 #page-header{ padding: 10px 16px 14px; }
  .page-news-v2 .ph-inner{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-news-v2 .ph-title{ font-size: 23px; }
  .page-news-v2 .ph-sub{ font-size: 13px; line-height: 1.45; }
  .page-news-v2 .ph-updated{ font-size: 11.5px; }

  /* Category pills: horizontal scroll row (never wrap). The global
     overflow-fix rule sets .ct-inner to flex-wrap:wrap — override to
     nowrap so the pills scroll sideways instead of stacking. */
  .page-news-v2 #category-tabs{ padding: 0 0 14px; }
  .page-news-v2 .ct-inner{
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 0 16px;
  }
  .page-news-v2 .ct-inner::-webkit-scrollbar{ display: none; }
  .page-news-v2 .cat-tab{ flex: 0 0 auto; font-size: 12.5px; padding: 8px 15px; }

  /* Main grid: single column, tighter padding. */
  .page-news-v2 #main-grid{ padding: 0 16px 16px; }
  .page-news-v2 .mg-inner{ gap: 16px; }

  /* News cards: vertical list. */
  .page-news-v2 .news-grid{ display: flex; flex-direction: column; gap: 12px; }

  /* Non-featured cards: compact thumbnail-left rows. */
  .page-news-v2 .news-card{ flex-direction: row; border-radius: 14px; }
  .page-news-v2 .nc-thumb{
    width: 104px;
    height: auto;
    min-height: 100px;
    flex-shrink: 0;
    font-size: 24px;
  }
  .page-news-v2 .nc-body{ padding: 12px 14px; }
  .page-news-v2 .nc-category{ margin-bottom: 6px; }
  .page-news-v2 .nc-title{ font-size: 13.5px; line-height: 1.35; }
  .page-news-v2 .nc-desc{ font-size: 12px; -webkit-line-clamp: 2; margin-bottom: 8px; }
  .page-news-v2 .nc-meta{ font-size: 10.5px; flex-wrap: wrap; row-gap: 4px; }

  /* Featured (first) card: image-top hero. The page's own <=1100 rule
     already stacks it; here we size the hero image and title. */
  .page-news-v2 .news-card.featured{ flex-direction: column; }
  .page-news-v2 .news-card.featured .nc-thumb{ width: 100%; height: 188px; }
  .page-news-v2 .news-card.featured .nc-body{ padding: 14px 16px; }
  .page-news-v2 .news-card.featured .nc-title{ font-size: 18px; line-height: 1.3; }
  .page-news-v2 .news-card.featured .nc-desc{ -webkit-line-clamp: 3; }

  /* Pagination sits centred under the list. */
  .page-news-v2 .pagination{ margin-top: 18px; flex-wrap: wrap; }

  /* Sidebar: the page hides .side-col at <=1100; show it stacked below
     the news list on mobile so its content isn't lost. Hide the
     placeholder ad-slot (it reads as an unfilled grey box). */
  .page-news-v2 .side-col{ display: block; margin-top: 4px; }
  .page-news-v2 .side-card,
  .page-news-v2 .subscribe-card{ border-radius: 14px; }
  .page-news-v2 .ad-slot{ display: none; }

  /* App-style: end the page cleanly; hide desktop footer + trailing ad. */
  .page-news-v2 #footer{ display: none; }
  .page-news-v2 > .adsbygoogle{ display: none !important; }
}

/* ============================================================
   GOLD CALCULATOR PAGE — MOBILE CONTENT (design match)
   Scoped to body.page-calc-v2. Shows the REAL, working in-page
   .city-selector dropdown; hides the mock #mobile-topbar pill
   (which only links home). Mirrors the homepage pattern. The
   calculator's selector sits directly in the page-header (not
   inside .ph-actions), so it has no picker bug.
   ============================================================ */
@media (max-width: 1024px){
  .page-calc-v2 #breadcrumb{ display: none; }

  /* Hide the mock topbar location pill; keep the LIVE badge at the right. */
  .page-calc-v2 #mobile-topbar{ justify-content: flex-end; }
  .page-calc-v2 #mobile-topbar .mtb-location{ display: none; }

  /* ── Page header ── */
  .page-calc-v2 #page-header{ padding: 14px 16px 10px; }
  .page-calc-v2 #page-header .ph-inner{ flex-direction: column; gap: 14px; }
  .page-calc-v2 .ph-left{ align-items: flex-start; gap: 12px; }
  .page-calc-v2 .ph-icon{ width: 46px; height: 46px; border-radius: 13px; font-size: 22px; }
  .page-calc-v2 .ph-title{ font-size: 22px; line-height: 1.15; }
  .page-calc-v2 .ph-sub{ font-size: 12.5px; line-height: 1.4; margin-top: 4px; }

  /* Trust badges → single white card, 3 columns. */
  .page-calc-v2 .ph-badges{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid rgba(20,25,40,0.08);
    border-radius: 14px;
    padding: 14px 10px;
    box-shadow: 0 1px 4px rgba(20,25,40,0.05);
  }
  .page-calc-v2 .ph-badge{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--m-slate);
  }
  .page-calc-v2 .ph-badge-icon{ font-size: 18px; }
  .page-calc-v2 .ph-badge b{ font-size: 11.5px; }

  /* ── Tab strip (single Jewellery Calculator, styled as active pill) ── */
  .page-calc-v2 #calc-tabs{ padding: 0 16px 16px; }
  .page-calc-v2 .tabs-inner{ flex-wrap: nowrap; }
  .page-calc-v2 .calc-tab{
    flex: 1;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13.5px;
  }
  .page-calc-v2 .calc-tab.active{
    background: var(--m-gold-soft);
    border-color: var(--m-gold-line);
    color: var(--m-gold);
  }

  /* ── Layout: single column ── */
  .page-calc-v2 #main-grid{ padding: 0 16px 16px; }
  .page-calc-v2 .mg-inner{ grid-template-columns: 1fr; gap: 16px; }
  .page-calc-v2 .calc-card{
    padding: 18px 16px;
    border-radius: 18px;
    border: 1px solid rgba(20,25,40,0.08);
  }
  .page-calc-v2 .step-title{ font-size: 14px; margin-bottom: 12px; }

  /* Purity: keep 4 columns (compact) to match the mockup. */
  .page-calc-v2 .purity-grid{
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-bottom: 22px;
  }
  .page-calc-v2 .purity-card{ padding: 10px 6px; border-radius: 12px; text-align: center; }
  .page-calc-v2 .purity-name{ font-size: 12px; margin-bottom: 3px; }
  .page-calc-v2 .purity-price{ font-size: 10px; }
  .page-calc-v2 .purity-check{ top: 6px; right: 6px; width: 16px; height: 16px; font-size: 10px; }

  /* Weight + making-charge input rows. */
  .page-calc-v2 .weight-row,
  .page-calc-v2 .charge-row{ gap: 8px; margin-bottom: 10px; }
  /* min-width:0 lets the number input shrink; without it the input keeps
     its intrinsic width and pushes the unit <select> off the card edge. */
  .page-calc-v2 .weight-input,
  .page-calc-v2 .charge-input{ padding: 13px 14px; font-size: 15px; border-radius: 12px; min-width: 0; }
  .page-calc-v2 .weight-unit-select,
  .page-calc-v2 .charge-unit-select{ padding: 13px 12px; border-radius: 12px; min-width: 96px; }

  /* Preset pill rows: tidy wrapping grid of tap-friendly chips. */
  .page-calc-v2 .weight-presets,
  .page-calc-v2 .charge-presets{ gap: 8px; margin-bottom: 22px; }
  .page-calc-v2 .preset-btn{
    flex: 1 1 auto;
    min-width: 60px;
    text-align: center;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 13px;
  }
  .page-calc-v2 .preset-btn.active{
    background: var(--m-gold-soft);
    border-color: var(--m-gold-line);
    color: var(--m-gold);
  }

  /* Additional charges: comfortable rows, boxed like the mockup. */
  .page-calc-v2 .addl-charge-row{
    padding: 14px 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(20,25,40,0.08);
    border-radius: 12px;
  }
  .page-calc-v2 .addl-charge-row:last-of-type{ border-bottom: 1px solid rgba(20,25,40,0.08); margin-bottom: 0; }
  .page-calc-v2 .addl-checkbox{ width: 22px; height: 22px; border-radius: 6px; }
  .page-calc-v2 .addl-label{ font-size: 13.5px; }
  .page-calc-v2 .stone-input{ width: 96px; padding: 9px 10px; border-radius: 10px; }

  /* Button row: Calculate full-width, then Reset + How-it-works below. */
  .page-calc-v2 .btn-row{ flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  .page-calc-v2 .btn-calculate{
    flex: 1 1 100%;
    padding: 16px;
    border-radius: 14px;
    font-size: 15px;
    background: var(--m-charcoal);
  }
  .page-calc-v2 .btn-reset{
    flex: 1 1 0;
    justify-content: center;
    padding: 14px;
    border-radius: 14px;
  }
  .page-calc-v2 .btn-howto{ display: flex !important; }

  /* ── Summary card ── */
  .page-calc-v2 .summary-card{ border-radius: 18px; padding: 20px 18px; }
  .page-calc-v2 .summary-total-value{ font-size: 30px; }
  .page-calc-v2 .savings-box{ border-radius: 12px; }
  .page-calc-v2 .btn-save{ padding: 14px; border-radius: 12px; font-size: 14px; }
  .page-calc-v2 .summary-actions{ gap: 10px; }
  .page-calc-v2 .btn-summary-secondary{ padding: 12px; border-radius: 12px; }

  /* Popular calculators grid: omitted on mobile (not in the mockup). */
  .page-calc-v2 #popular-calcs{ display: none; }

  /* ── Bottom grid: stack donut → rates → FAQ ── */
  .page-calc-v2 #bottom-grid{ padding: 0 16px 20px; }
  .page-calc-v2 .bg-inner{ grid-template-columns: 1fr; gap: 16px; }
  .page-calc-v2 .bg-card{ border-radius: 18px; padding: 18px 16px; }
  .page-calc-v2 .donut-wrap{ gap: 16px; }
  .page-calc-v2 .donut-legend{ gap: 8px; }
  .page-calc-v2 #donut-svg{ flex-shrink: 0; }

  /* App-style ending: hide desktop footer + trailing ad. */
  .page-calc-v2 #footer{ display: none; }
  .page-calc-v2 > .adsbygoogle{ display: none !important; }
}

/* ============================================================
   HERO CITY SELECTOR — hide on mobile (duplicate of top-bar pill)
   The #mobile-topbar location pill replaces the in-hero city
   selector on mobile, so showing both is redundant. BUT the
   city-picker dropdown (#city-dropdown) lives INSIDE .city-selector
   and the pill opens it — an ancestor display:none would kill the
   dropdown too. So collapse the visible chrome (pin/text/chevron)
   to zero height and keep the dropdown working.
   Scoped to the two redesigned pages that HAVE the pill; silver/
   platinum/gold-calculator still rely on this selector directly.
   ============================================================ */
@media (max-width: 1024px){
  /* Homepage ONLY: it shows both the in-hero city selector (the real,
     working dropdown host) AND the top-bar pill — a duplicate. Keep the
     hero selector, hide the redundant pill; LIVE badge moves right.
     NOT applied to gold: gold's hero selector sits inside .ph-actions
     (display:none on mobile), so there the pill is the only city control
     and must stay. Charts/news have only the pill — untouched. */
  .page-home-v2 #mobile-topbar{ justify-content: flex-end; }
  .page-home-v2 #mobile-topbar .mtb-location{ display: none; }
}

/* ============================================================
   HOMEPAGE hamburger alignment
   The homepage <style> has a global button{min-width:44px;min-height:44px}
   touch-target rule (charts/news don't), inflating the hamburger box to
   44px. The 20px bars then (a) sit ~6px right of the content below and
   (b) pin to the TOP of the 44px column-flex box, ~8px above the logo's
   vertical centre. Keep the 44px tap target but left-align (align-items)
   AND vertically centre (justify-content) the bars so they line up with
   the logo like charts/news do.
   ============================================================ */
@media (max-width: 1024px){
  /* min-width comes from the homepage-only global button{min-width:44px},
     which widens the hamburger box to 44px and pushes the logo ~12px
     further right than on other pages (their box is the natural 32px).
     Narrow it back to 32px so the bars sit the same distance from the
     logo everywhere; min-height keeps the 44px vertical tap target. */
  .page-home-v2 .nav-hamburger{ align-items: flex-start; justify-content: center; min-width: 32px; }
}

/* ============================================================
   AI ADVISOR — mobile (v2)
   Scoped to body.page-ai-v2. Desktop is a 3-column grid
   (suggested-prompts sidebar / chat / live-data sidebar); the
   page's own CSS hides BOTH sidebars on mobile, leaving only the
   chat. Here we: stack to one column, drop the fixed 100vh chat
   height so the page scrolls naturally, keep the chat first, then
   surface the valuable right-column data (live metals, trend,
   news, tools). The left sidebar stays hidden — its prompts
   duplicate the in-chat "Try asking" chips.
   ============================================================ */
@media (max-width: 1024px){
  /* No city on this page — hide the topbar location pill, keep LIVE. */
  .page-ai-v2 #mobile-topbar{ justify-content: flex-end; }
  .page-ai-v2 #mobile-topbar .mtb-location{ display: none; }
  .page-ai-v2 #breadcrumb{ display: none; }

  /* Header: trim padding, shrink title, tuck the bot avatar top-right
     without overlapping the copy. */
  .page-ai-v2 #page-header{ padding: 14px 16px 8px; }
  .page-ai-v2 .ph-inner{ padding-right: 48px; }
  .page-ai-v2 .ph-title{ font-size: 24px; }
  .page-ai-v2 .ph-sub{ font-size: 13px; line-height: 1.5; max-width: none; }
  .page-ai-v2 .bot-avatar{ top: 2px; right: 2px; font-size: 30px; }

  /* One column. Override the desktop grid + reorder via flex so the
     chat leads and the live-data cards follow. */
  .page-ai-v2 #main-grid{ padding: 8px 16px 16px; }
  .page-ai-v2 .mg-inner{
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  .page-ai-v2 .left-col{ display: none; }
  .page-ai-v2 .chat-card{ order: 1; }
  .page-ai-v2 .right-col{ order: 2; display: block; }

  /* Uniform edge-to-edge cards (match the AI Insight box on other pages). */
  .page-ai-v2 .chat-card,
  .page-ai-v2 .side-card{
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-bottom: 0;
  }

  /* Chat card: desktop pins it to calc(100vh - 200px)/min 600px with an
     inner scroll. On mobile that traps scrolling and leaves dead space —
     let it grow with its content and use natural page scroll instead. */
  .page-ai-v2 .chat-card{
    height: auto;
    min-height: 0;
    border-radius: 16px;
  }
  .page-ai-v2 .chat-messages{
    flex: none;
    overflow-y: visible;
    padding: 16px;
  }
  .page-ai-v2 .try-asking{ padding: 16px; }
  .page-ai-v2 .chat-input-area{ padding: 12px 16px; }
  .page-ai-v2 .msg-content{ max-width: 84%; }
  /* Any 3-col mini-grids inside an AI answer (Trend/Support/Resistance)
     shrink instead of forcing the bubble wide. */
  .page-ai-v2 .msg-bubble [style*="grid"],
  .page-ai-v2 .msg-bubble table{ min-width: 0; max-width: 100%; }

  .page-ai-v2 .side-card{ border-radius: 16px; padding: 16px; }
  .page-ai-v2 #mini-trend-canvas{ height: 130px; }

  /* Feature strip: stack the four value props as full-width rows. */
  .page-ai-v2 #feature-strip{ padding: 16px; }
  .page-ai-v2 .fs-inner{ flex-direction: column; align-items: stretch; gap: 14px; }
  .page-ai-v2 .fs-item{ width: 100%; }

  /* Tabbar replaces the desktop footer. */
  .page-ai-v2 #footer{ display: none; }
}

/* ============================================================
   JEWELLERS — mobile (v2)
   Scoped to body.page-jewellers-v2. Desktop is a 3-column grid
   (filters / results / sidebar). The listing data comes from
   OpenStreetMap, so real cards have NO ratings or rate columns
   (the mockup's ratings/rates are illustrative only). Here we
   stack to one column, make the header stats a horizontal scroll
   row, stack the search controls, drop the sidebar down to just
   the "List Your Business" card, and lay each jeweller card out
   as thumb+info over a full-width Get Directions button.
   ============================================================ */
@media (max-width: 1024px){
  /* No city pill on this page (city lives in the search bar). */
  .page-jewellers-v2 #mobile-topbar{ justify-content: flex-end; }
  .page-jewellers-v2 #mobile-topbar .mtb-location{ display: none; }
  .page-jewellers-v2 #breadcrumb{ display: none; }

  /* Header */
  .page-jewellers-v2 #page-header{ padding: 14px 16px 8px; }
  .page-jewellers-v2 .ph-inner{ display: flex; flex-direction: column; gap: 14px; }
  .page-jewellers-v2 .ph-title{ font-size: 24px; }
  .page-jewellers-v2 .ph-sub{ font-size: 13px; line-height: 1.5; max-width: none; }
  /* Stat chips: WRAP so all three are fully visible. A horizontal scroll
     row hid the third chip ("Real / Names & locations") off-screen with no
     scroll hint — it read as stuck and fought the page's vertical scroll.
     Wrapping keeps every chip on screen and stacks cleanly on narrow phones. */
  .page-jewellers-v2 .ph-stats{
    flex-wrap: wrap;
    gap: 8px;
  }
  .page-jewellers-v2 .ph-stat{
    flex: 1 1 auto;
    min-width: calc(50% - 4px);
    box-sizing: border-box;
  }

  /* Search controls stack full-width. */
  .page-jewellers-v2 #search-bar{ padding: 0 16px 12px; }
  .page-jewellers-v2 .sb-inner{ flex-direction: column; gap: 10px; }
  .page-jewellers-v2 .sb-input-wrap,
  .page-jewellers-v2 .sb-city-wrap,
  .page-jewellers-v2 .sb-select,
  .page-jewellers-v2 .btn-locate,
  .page-jewellers-v2 .btn-search{ width: 100%; box-sizing: border-box; }

  /* One column. */
  .page-jewellers-v2 #main-grid{ padding: 0 16px 16px; }
  .page-jewellers-v2 .mg-inner{
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  /* Uniform edge-to-edge cards. */
  .page-jewellers-v2 .filters-card,
  .page-jewellers-v2 .jeweller-card,
  .page-jewellers-v2 .list-business-card,
  .page-jewellers-v2 .ad-slot-inline{
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .page-jewellers-v2 .filters-card{ position: static; border-radius: 16px; }

  /* Results header: label over sort control. */
  .page-jewellers-v2 .results-header{ gap: 10px; }
  .page-jewellers-v2 .sort-select{ width: 100%; box-sizing: border-box; }

  /* Jeweller card: thumb + info on the top row, Get Directions button
     wraps to a full-width row below. */
  .page-jewellers-v2 .jeweller-card{
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
  }
  .page-jewellers-v2 .jc-thumb{ width: 82px; height: 82px; }
  .page-jewellers-v2 .jc-info{ flex: 1; min-width: 0; }
  .page-jewellers-v2 .jc-right{
    width: 100%;
    min-width: 0;
    flex-direction: row;
    align-items: stretch;
  }
  .page-jewellers-v2 .btn-directions,
  .page-jewellers-v2 .btn-view-rates{ flex: 1; width: auto; }

  .page-jewellers-v2 .ad-slot-inline{ border-radius: 14px; }

  /* Pagination wraps instead of overflowing. */
  .page-jewellers-v2 .pagination{ flex-wrap: wrap; gap: 6px; }

  /* Sidebar: drop everything except the "List Your Business" card so the
     page ends on that CTA (matches the mockup) without the desktop map,
     ad slots and featured list cluttering the mobile flow. */
  .page-jewellers-v2 .side-col{ display: block; }
  .page-jewellers-v2 .side-col > *{ display: none; }
  .page-jewellers-v2 .side-col > .list-business-card{ display: block; width: 100%; box-sizing: border-box; border-radius: 16px; }

  /* Tabbar replaces the desktop footer. */
  .page-jewellers-v2 #footer{ display: none; }
}

/* ============================================================
   AI CTA STRIP — the "Ask Aurixa AI" banner added to charts,
   news, calculator and jewellers. Inline-styled with a desktop
   24px gutter; on mobile drop to the standard 16px so it lines
   up edge-to-edge with the cards above it. Only these 4 pages
   contain #ai-cta-strip, so no body-class scope is needed.
   ============================================================ */
@media (max-width: 1024px){
  /* !important overrides the banner's inline padding:0 24px (inline styles
     otherwise win over stylesheet rules). */
  #ai-cta-strip{ padding-left: 16px !important; padding-right: 16px !important; }
  /* Charts only: the AI box sits directly under the dark feature-strip with
     no gap (its inline padding-top is 0). Add breathing room so the purple
     card separates from the dark block above. !important beats the inline 0. */
  .page-charts-v2 #ai-cta-strip{ padding-top: 16px !important; }
}

/* ─── Accessibility ─── */
@media (prefers-reduced-motion: reduce){
  #mobile-nav{ transition-duration: 0.01ms; }
  #mobile-nav .mobile-close,
  #mobile-nav .mobile-nav-link{ transition-duration: 0.01ms; }
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}