/* Variables */
:root{
  --gold:#c9a958;
  --ink:#1b1306;
  --paper:rgba(255,255,240,.55);
  --line:#d9d0b5;
  --blue:#3a7bd5;
}

/* Global background */
html, body { height:100%; min-height:100%; }
body{
  margin:0;
  color:var(--ink);
  font-family:'Hanken Grotesk', Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-color:#f2e4c6;
  background-image:linear-gradient(rgba(0,0,0,0.16), rgba(0,0,0,0.16)), url("images/parchment_tile_768.png");
  background-repeat:repeat;
  background-size:768px 768px;
  background-position:top left;
  background-attachment:scroll;
}

/* Layout */
.wrap{ max-width:1100px; margin:0 auto; padding:0 20px; }
.section{ padding:56px 0; border-bottom:1px solid var(--line); background:transparent; }
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .grid-3{ grid-template-columns:1fr; } }

/* Header / nav */
.strip{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; text-decoration:none; color:var(--ink); }
.brand-icon{ width:64px; height:64px; vertical-align:middle; margin-right:0; border-radius:6px; display:inline-block; background:transparent; border:0; box-shadow:none; }
.nav a{ margin:0 10px; font-weight:800; color:#5a3e1b; text-decoration:none; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#ecdba0,var(--gold));
  color:#1b1306; padding:12px 16px; border-radius:12px; font-weight:900;
  text-decoration:none; border:0; box-shadow:0 2px 0 rgba(0,0,0,.08); cursor:pointer;
}
.btn-outline{
  background:rgba(255,255,255,.45); backdrop-filter:saturate(1.1) blur(2px);
  border:2px solid var(--gold); color:var(--gold);
}

/* Section headings (consistent) */
.section-title{
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  text-align: center;
  margin: 0 0 .75rem;
}
.section .sub{
  text-align: center;
  color:#6d5a36;
  margin: -4px auto 18px;
}

/* Hero */
.hero{ padding:52px 0 20px; border-bottom:1px solid var(--line); background:transparent; }
.kicker{
  display:inline-block; padding:6px 10px; border:2px solid var(--gold);
  border-radius:999px; color:#5a3e1b; font-weight:900; text-transform:uppercase;
  font-size:12px; letter-spacing:.08em; background:rgba(255,255,255,.5);
}
.hero h1{ font-family:Cinzel, serif; font-size:48px; line-height:1.02; margin:10px 0; }
.punch{ font-size:18px; color:#5a3e1b; max-width:680px; }
.cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* Hero layout */
.hero-grid{ display:grid; align-items:center; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(12px,4vw,40px); }
.hero-copy{ min-width:0; }
.hero-coin{ margin:0; justify-self:center; max-width:min(520px,45vw); }
/* === FIX HERO COIN CIRCLE === */
.hero-coin img{
  border-radius: 0 !important;     /* stop circular crop */
  box-shadow: none !important;      /* remove circular plate shadow */
  background: transparent !important;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35)); /* natural edge shadow */
  width: 80%;
  height: auto;
  display: block;
}
.hero-coin,
.hero-coin::before,
.hero-coin::after{
  box-shadow: none !important;
  background: transparent !important;
  content: none !important;       /* in case pseudo-elements were used */
}

/* Countdown + stats */
.countdown{ display:flex; gap:10px; margin-top:16px; }
.cd{ min-width:70px; background:var(--paper); border:1px solid var(--line);
  border-radius:10px; padding:10px; text-align:center; box-shadow:0 2px 0 rgba(0,0,0,.06);
}
.cd .num{ font-weight:900; font-size:24px; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px; }
.stat{ background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:12px; text-align:center; box-shadow:0 2px 0 rgba(0,0,0,.06);
}
.stat .lab{ color:#6d5a36; font-size:12px; }

/* Hide empty countdown */
#cdWrap:has(.num:contains("00")){ display:none; }

/* Pills + marquee */
.badge-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.pill{ display:inline-block; padding:6px 10px; border-radius:999px; background:#f3e7c3;
  color:#5a3e1b; font-weight:800; box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.marquee{ margin:18px 0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line);
  padding:8px 0; overflow:hidden; white-space:nowrap; background:rgba(255,255,255,.45);
}
.marquee span{ display:inline-block; padding-right:40px; animation:scroll 18s linear infinite; }
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-100%)} }

/* Cards / tiles */
.card, .tile{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(120,84,40,.18);
  border-radius:14px; padding:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  backdrop-filter:blur(4px);
}

/* Token section */
#tokenomics{ background:transparent; }
#tokenomics .grid-3{ align-items:stretch; }
#tokenomics .grid-3 .card{ display:flex; align-items:center; gap:8px; height:100%; }
#tokenomics #mintFull, #tokenomics #mintInline{ overflow-wrap:anywhere; word-break:break-all; }
.buy-wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:16px; }
@media (max-width:900px){ .buy-wrap{ grid-template-columns:1fr; } }
#tokenomics img{ display:block; max-width:100%; height:auto; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.12); }
@media (min-width:901px){ #tokenomics .tile img{ max-height:520px; object-fit:contain; width:100%; } }

/* FAQ / Footer */
.footer{ padding:28px 0; color:#6d5a36; font-size:13px; }
.joke{ font-weight:800; color:#5a3e1b; }
.meter{ height:12px; border-radius:999px; background:#efe6c6; position:relative; overflow:hidden; border:1px solid var(--line); }
.meter>span{ position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,#f6d365,#fda085); width:18%; }

/* Toast */
.toast{ position:fixed; bottom:20px; right:20px; background:#2b2b2b; color:#fff;
  padding:.75rem 1rem; border-radius:.6rem; display:none; box-shadow:0 6px 20px rgba(0,0,0,.25);
}

/* Game */
#game{ text-align:center; background:transparent; border:0; box-shadow:none; padding:0; }
#game .sub{ color:#6d5a36; margin-bottom:18px; font-style:italic; }
#game .game-area{
  position:relative; display:inline-block; margin-top:20px;
  background:rgba(255,255,255,.55); border:1px solid var(--line);
  border-radius:12px; padding:12px; box-shadow:inset 0 2px 8px rgba(0,0,0,.06);
  max-width: 940px;
}
#desert{ width:100%; max-width:900px; height:auto; border-radius:12px; display:block; }
#coin{ position:absolute; width:40px; height:40px; display:none; pointer-events:none; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #f2f2f2, #c0c0c0 70%, #8a8a8a 100%);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.35);
  transform: translate(-50%, -50%); z-index:4;
}
#coin.found{
  animation: coinPulse 800ms ease-out 1;
  filter: drop-shadow(0 0 8px rgba(255,255,200,0.8)) drop-shadow(0 0 16px rgba(255,255,180,0.5));
}
@keyframes coinPulse { 0%{transform:scale(0.6);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1} }
.sparkle{
  position:absolute; width:10px; height:10px; pointer-events:none;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,.7) 40%, rgba(255,255,255,0) 70%);
  mix-blend-mode: screen; animation: spark 700ms ease-out forwards;
}
@keyframes spark { from{transform:translate(0,0) scale(0.2);opacity:1} to{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0} }

#pointer{ position:absolute; left:0; top:0; pointer-events:none; display:none; overflow:visible; z-index:5; }
#pointer.show { display:block; animation: pointer-pop 180ms ease-out; }
@keyframes pointer-pop { from{transform:scale(0.8);opacity:.5} to{transform:scale(1);opacity:1} }

/* Roadmap */
.section.roadmap { padding: clamp(2rem, 4vw, 4rem) 0; background: radial-gradient(1200px 600px at 50% -20%, rgba(0,0,0,.05), transparent 60%); }
.section.roadmap .container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.section.roadmap .section-title { font-family: Cinzel, serif; }
.roadmap-figure { margin: 0; }
.roadmap-img { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.15); }
.roadmap-actions { margin-top: 1rem; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.section.roadmap .btn { padding: .6rem 1rem; border-radius: 999px; text-decoration: none; border: 1px solid currentColor; font-weight: 600; }
.section.roadmap .btn.ghost { opacity: .8 }

/* Show burger on small screens; optionally hide the full nav */
@media (max-width: 900px){
  #navToggle{ display:inline-flex !important; }
  header .nav{ display:none; }           /* if you’re using a JS drawer */
  header .nav.open{ display:flex; }      /* toggle this class in JS */
}

/* Countdown title above the boxes */
.countdown { flex-wrap: wrap; }              /* let items wrap to a new line */
.countdown .cd-title{
  flex: 0 0 100%;                            /* take full row above */
  font-weight: 900;
  font-size: 14px;
  color: #5a3e1b;                            /* matches your theme */
  margin: 0 0 6px;
}

/* Kill any filter/box-shadow anywhere inside the hero coin */
.hero-coin, .hero-coin * , .hero-coin *::before, .hero-coin *::after{
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* === Hero coin: light hover wobble === */
.hero-coin img{
  will-change: transform;
  transform-origin: 50% 60%;
  transition: transform 280ms ease;
  backface-visibility: hidden;
}

.hero-coin:hover img,
.hero-coin:focus-within img{
  animation: coin-wobble 600ms ease both;
}

@keyframes coin-wobble{
  0%   { transform: rotate(0deg) scale(1); }
  20%  { transform: rotate(-1.2deg) scale(1.01); }
  40%  { transform: rotate(1.0deg)  scale(1.01); }
  60%  { transform: rotate(-0.8deg) scale(1.005); }
  80%  { transform: rotate(0.6deg)  scale(1.002); }
  100% { transform: rotate(0deg)    scale(1); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-coin img{ transition:none; animation:none !important; }
}

/* X/Twitter embed styling */
.twitter-tile{ overflow:hidden; }
.twitter-tile .twitter-timeline{
  width:100% !important;
  min-height: 420px; /* adjust to taste */
  display:block;
}
.twitter-fallback{
  display:none;           /* hidden when the widget loads */
  text-align:center;
  margin-top:.75rem;
}
/* If the widget fails to load (e.g., blocked by extensions), show fallback */
.no-twitter .twitter-fallback{ display:block; }

/* --- Tokenomics layout tune-up --- */
#tokenomics .token-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 16px 0 24px;
}
#tokenomics .token-grid .card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  min-height:64px;                 /* consistent height */
}

/* Long mints wrap nicely (no overflow) */
#tokenomics #mintFull,
#tokenomics #mintInline{
  overflow-wrap:anywhere;
}

/* Abacus row alignment */
#tokenomics .buy-wrap{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;  /* text | image */
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px){
  #tokenomics .buy-wrap{
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Ensure the abacus image scales cleanly */
#tokenomics .tile img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.15);
}

/* Desktop stays the same */
#navToggle { display: none; }
.nav { display: flex; gap: 16px; }

/* ===== Mobile: full-screen overlay ===== */
@media (max-width: 900px){
  /* Show burger on mobile */
  #navToggle { display: inline-flex; align-items: center; gap: 8px; z-index: 1100; }

  /* Lock page when menu is open */
  html.menu-open { overflow: hidden; }

  /* Full-screen overlay panel */
  .nav{
    position: fixed;
    inset: 0;                    /* top:0; right:0; bottom:0; left:0 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;     /* center links vertically */
    gap: 10px;
    padding: calc(env(safe-area-inset-top,0) + 48px) 48px calc(env(safe-area-inset-bottom,0) + 24px);
    background: rgba(25, 18, 10, 0.70);   /* parchment-tinted dark veil */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index: 1000;
  }

  .nav.open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Menu links: big, readable, wrapped */
  .nav a{
    display: block;
    width: min(560px, 90vw);
    text-align: center;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: clamp(18px, 2.6vh, 22px);
    line-height: 1.25;
    color: #fff;
    background: rgba(255,255,255,0.06);
    text-decoration: none;
    white-space: normal;         /* allow wrapping */
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    outline: none;
  }

  .nav a:hover,
  .nav a:focus { background: rgba(255,255,255,0.12); }

  /* Optional: a subtle divider */
  .nav a + a { margin-top: 6px; }
}

/* ===== Mobile: full-screen overlay nav ===== */
@media (max-width: 900px){
  /* Show burger on mobile */
  #navToggle { display: inline-flex; align-items: center; gap: 8px; z-index: 1100; }

  /* Lock page scrolling when menu is open */
  html.menu-open { overflow: hidden; }

  /* Full-viewport overlay panel (hidden by default) */
  .nav{
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: calc(env(safe-area-inset-top,0) + 24px) 24px calc(env(safe-area-inset-bottom,0) + 24px);
    background: rgba(25, 18, 10, 0.70);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index: 1000;
  }
  .nav.open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Menu links: big, centered, and allowed to wrap */
  .nav a{
    display: block;
    width: min(560px, 90vw);
    text-align: center;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: clamp(18px, 2.6vh, 22px);
    line-height: 1.25;
    color: #fff;
    background: rgba(255,255,255,0.06);
    text-decoration: none;
    white-space: normal;
    overflow-wrap: break-word; /* modern wrapping */
    word-break: break-word;    /* fallback */
    hyphens: auto;             /* extra niceness */
    outline: none;
  }
  .nav a:hover,
  .nav a:focus { background: rgba(255,255,255,0.12); }
}

/* === Move overlay menu below the header === */
@media (max-width: 900px){
  /* The overlay already has position:fixed; inset:0; from earlier rules.
     We override only the top so it begins under the header. */
  .nav{
    top: var(--header-h, 64px);   /* start below header */
    padding-top: 8px;             /* small gap under header */
    justify-content: center;      /* keep links centered vertically within remaining area */
  }
}

/* Neigh toast: left align + move to bottom-left so it won't sit under the chatbot */
#toast{
  left: max(16px, env(safe-area-inset-left));
  right: auto;
  bottom: 24px;
  transform: none;           /* was center translate if you had it */
  text-align: left;          /* left-justify the text */
  max-width: min(92vw, 420px);
  justify-content: flex-start;  /* if it's a flex container */
  align-items: flex-start;      /* if it's a flex container */
}

/* --- Buy section width clamp + overflow safety --- */
@media (max-width: 900px){
  /* 1) Clamp the section like the others */
  #buy, #buySection {
    margin-inline: auto;
  }
  #buy .wrap, #buySection .wrap{
    max-width: var(--content-w, 960px);
    padding-inline: 16px;        /* match your other sections’ padding */
  }

  /* 2) Anything inside the Buy section must not exceed 100% */
  #buy, #buySection{
    overflow-x: hidden;           /* safety net for rogue children */
  }
  #buy img, #buy iframe,
  #buySection img, #buySection iframe{
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* 3) Jupiter terminal specifics */
  #jupiter-terminal{
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;             /* clip any inner bleed */
  }
  #jupiter-terminal iframe,
  #jupiter-terminal > *{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 4) If any child uses 100vw (common culprit), neutralize it on mobile */
  #buy [style*="100vw"], #buySection [style*="100vw"]{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Optional (global): avoid horizontal scrollbars from surprise overflows */
html, body { overflow-x: hidden; }

/* --- Fix Buy section being a hair wider on mobile --- */
@media (max-width: 900px){
  /* Safety: never let the section scroll horizontally */
  #buy{ overflow-x: hidden; }

  /* Prevent flex min-content overflow from children */
  #buy .wrap > *{ min-width: 0; }

  /* Let the buttons wrap cleanly */
  #buy .cta-row{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  #buy .cta-row .btn{
    flex: 1 1 140px;            /* allows 1 or 2 per row without overflow */
  }

  /* Long mint address: break nicely instead of pushing width */
  #buy #mintInline{
    overflow-wrap: anywhere;    /* modern */
    word-break: break-word;     /* fallback */
  }

  /* Clamp the embedded Jupiter terminal to the container width */
  #jupiter-terminal{
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  #jupiter-terminal iframe,
  #jupiter-terminal > *{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Socials: 2-column layout (Twitter left, Telegram right) */
#socials .socials-grid{
  display: grid;
  gap: 24px;
  align-items: start;
}
@media (min-width: 920px){
  #socials .socials-grid{
    grid-template-columns: minmax(0,1fr) 360px; /* right column width */
  }
}
@media (max-width: 919px){
  #socials .socials-grid{ grid-template-columns: 1fr; }
}

/* Right column styles shared by Telegram + TikTok */
.social-col{ text-align: center; }
.social-col .social-badge{ display:inline-block; }
.social-col .social-badge + .social-badge{ margin-top: 12px; } /* space between badges */
.social-col .social-badge img{
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.social-col .social-badge img:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* === Desert fixed background (site-wide) ===
   Elements scroll over a static desert photo. */
body{
  background: transparent !important; /* override parchment */
}
body::before{
  
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;                 /* sit behind everything */
  background-image: url("images/desert-sunset.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Slight warm overlay for legibility; tweak or remove as desired */
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.05);
  will-change: transform;       /* keeps it smooth on mobile */
}
/* Improve text contrast over the photo background */
.section .sub, .nav a, .footer { color: #5a3e1b; }

/* Make hero title span full width above the 2-column grid */
.hero .hero-title{ grid-column:1 / -1; text-align:center; margin-bottom:1rem; }
.hero .hero-title h1{ margin:0.25rem 0 0.5rem; font-size:clamp(2rem,6vw,3.25rem); line-height:1.1; }
@media (min-width: 900px){
  .hero .hero-title h1{ font-size:clamp(2.5rem,5vw,4rem); }
}

/* === Punch paragraph color helpers === */
/* Default: strong white with soft dark outline for legibility on photo */
.punch{ color:#fff; -webkit-text-stroke: 0 transparent; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
/* Force all-white (no outline) */
.punch.white{ color:#fff !important; text-shadow:none !important; -webkit-text-stroke:0 !important; }
/* White text with darker outline */
.punch.white-outline{ color:#fff !important; text-shadow:-1px 0 rgba(0,0,0,.7), 1px 0 rgba(0,0,0,.7), 0 -1px rgba(0,0,0,.7), 0 1px rgba(0,0,0,.7) !important; }
/* Black text with white outline */
.punch.black-outline{ color:#111 !important; -webkit-text-stroke: 0.75px #fff; text-shadow:-1px 0 #fff, 1px 0 #fff, 0 -1px #fff, 0 1px #fff; }
/* Default: strong white with soft dark outline for legibility on photo */
.punch.joke{ font-weight:800; color:#fff; -webkit-text-stroke: 0 transparent; text-shadow: 0 1px 2px rgba(0,0,0,.55); }

/* Hide spinning coin on mobile and switch hero to single column */

}

/* Mobile: keep spinning coin, smaller & centered; single-column hero */
@media (max-width: 900px){
  .hero .hero-grid{ grid-template-columns: 1fr !important; }
  .hero-coin{ order: 2; justify-self: center; align-self: start; margin-top: 0.75rem; }
  .hero-coin img{ width: 220px; height: 220px; object-fit: contain; }
}

/* --- Social icon buttons in the nav --- */
.nav .social-icons{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
}
.nav .social-icons img{
  width: 42px;
  height: 42px;
  display: block;
  border-radius: 4px;
  /* optional: make them pop slightly on parchment */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}

/* In the full-screen mobile overlay, give them a bit more size */
@media (max-width: 900px){
  .nav .social-icons img{
    width: 28px;
    height: 28px;
  }
  /* space the icon row away from text buttons */
  .nav .social-icons{
    gap: 12px;
    margin-top: 4px;
  }
}

/* Row of icons above the video */
.social-icons-bar{
  display:flex;
  gap:30px;
  align-items:center;
  justify-content:center;        /* center row under hero copy */
  margin: 10px 0 6px;
}

.social-icons-bar a{
  display:inline-flex;
  width:64px; height:64px;       /* looks good with 64px sources */
  border-radius:8px;
}

.social-icons-bar img{
  width:100%; height:100%;
  display:block;
  border-radius:inherit;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}

/* tighten on small screens, nudge spacing on large */
@media (max-width:900px){
  .social-icons-bar{ gap:12px; margin: 6px 0 2px; }
  .social-icons-bar a{ width:64px; height:64px; }
}
@media (min-width:1100px){
  .social-icons-bar{ margin-top: 4px; }
}

/* Stack icon + tiny label */
.icon-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  width:48px;                    /* neat size for 64px sources */
  text-decoration:none;
}
.icon-btn img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}
.icon-btn .icon-label{
  font-size:10px;
  line-height:1;
  color:#fff;                 /* tweak for your theme */
  letter-spacing:0.2px;
  user-select:none;
  text-align:center;
}

/* Tooltip styling */
.has-tip{ position:relative; }
.has-tip::after{
  content: attr(data-tip);
  position:absolute;
  bottom: calc(100% + 8px);
  left:50%;
  transform: translateX(-50%) translateY(2px);
  background:#111; color:#fff; font-size:12px; line-height:1;
  padding:6px 8px; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition: opacity .15s ease, transform .15s ease;
  z-index:50;
}
.has-tip::before{
  content:"";
  position:absolute;
  bottom:100%; left:50%;
  transform: translateX(-50%);
  border:6px solid transparent; border-top-color:#111;
  opacity:0; transition: opacity .15s ease;
}
.has-tip:hover::after,
.has-tip:hover::before{
  opacity:1; transform: translateX(-50%) translateY(0);
}
/* Don’t show tooltips on touch devices */
@media (hover: none){
  .has-tip::after, .has-tip::before{ display:none !important; }
}

/* Tighten on small screens */
@media (max-width: 900px){
  .icon-btn{ width:42px; }
  .icon-btn .icon-label{ font-size:9px; }
}

/* Stack image over tiny label (same pattern as hero icons) */
.buy-link.icon-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  width:64px;             /* same visual size as hero icons */
  padding:0;
  text-decoration:none;
  border-radius:8px;
}
.buy-link.icon-btn img{
  width:100%;
  height:auto;
  display:block;
  border-radius:inherit;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}
.buy-link.icon-btn .icon-label{
  font-size:10px;
  line-height:1;
  letter-spacing:.2px;
  color:#fff;          /* tweak for your theme */
  text-align:center;
  user-select:none;
}

/* Optional hover highlight */
.buy-link.icon-btn:hover{
  background: rgba(0,0,0,.06);
}

/* Mobile tweak to keep it tidy */
@media (max-width:900px){
  .buy-link.icon-btn{ width:64px; }
  .buy-link.icon-btn .icon-label{ font-size:9px; }
}

/* Tooltip BELOW (for items near top edge) */
.tip-bottom::after{
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-2px);
}
.tip-bottom::before{
  bottom: auto;
  top: 100%;
  border:6px solid transparent;
  border-bottom-color:#111;   /* arrow points up from below */
}
.tip-bottom:hover::after,
.tip-bottom:hover::before{
  transform: translateX(-50%) translateY(0);
}