/* Myles Hustler Store 21 · V39 (owner): clean 6-item menu, top bar with contacts + social, structured homepage,
   Fun Hub cards, FAQ, 4-column footer. Loaded after v39.css. 4/8 px spacing scale, 12 px card radius. */

/* Top bar: e-mail · phone · shipping (left), social icons (right) */
.topbar .tb-main { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.topbar .tb-main a { color: #f4efe4; text-decoration: none; white-space: nowrap; }
.topbar .tb-main a:hover { color: var(--gold); }
.tb-dot { color: rgba(212,175,55,.6); }
.tb-ship { color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-social { display: inline-flex; gap: 8px; }
.tb-social .social-ico { width: 20px; height: 20px; box-shadow: none; }
@media (max-width: 899px) { .tb-social { display: none; } .topbar .tb-mail, .topbar .tb-mail + .tb-dot { display: none; } .topbar .tb-main { justify-content: center; } }
@media (max-width: 479px) { .tb-ship { display: none; } .topbar .tb-phone + .tb-dot { display: none; } }

/* Menu: six items, centred on computers, scrollable on phones */
.cat-bar .cat-row { justify-content: center; gap: 8px; }
@media (max-width: 899px) { .cat-bar .cat-row { justify-content: flex-start; } }

/* Hero: 60 % of the screen (owner) */
.ent-hero.ent-home { min-height: min(60vh, 560px); }
.ent-home .home-line { margin: 4px 0 0; color: #ece6d8; font-size: 15px; }

/* Why us */
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.why-grid li { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 12px; border: 1px solid rgba(212,175,55,.3); background: var(--panel); }
.why-ico { font-size: 32px; line-height: 1; }

/* Story + shop video + addresses */
.story-shops { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .story-shops { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.story-shops .ivg { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
.ss-shops { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.ss-shops li { display: flex; flex-direction: column; padding: 12px 16px; border-left: 3px solid var(--gold); background: rgba(212,175,55,.06); border-radius: 0 12px 12px 0; }

/* Fun Hub cards (homepage + Fun Hub page) */
.fun-cards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.fun-card { display: flex; flex-direction: column; height: 100%; border-radius: 12px; overflow: hidden; background: #fbf8f1; color: #121212; text-decoration: none; border: 1px solid #ece4cf; box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: transform .2s, box-shadow .2s; }
.fun-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.35), 0 0 0 1px var(--gold); color: #000; }
.fc-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.fc-media img { width: 100%; height: 100%; object-fit: cover; }
.fc-panel { background: radial-gradient(circle at 70% 30%, rgba(212,175,55,.45), transparent 60%), linear-gradient(135deg, #000, #1d1a15); }
.fc-icon { position: absolute; left: 16px; bottom: 12px; font-size: 48px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.fc-panel .fc-icon { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); font-size: 64px; }
.fc-free { position: absolute; top: 12px; right: 12px; padding: 2px 10px; border-radius: 999px; background: var(--gold); color: #000; font-size: 12px; font-weight: 800; }
.fc-body { display: flex; flex-direction: column; gap: 6px; padding: 16px; flex: 1; }
.fc-body strong { font-size: 17px; }
.fc-body .muted { color: #555; }
.fc-cta { align-self: flex-start; margin-top: auto; }

/* Follow us, FAQ */
.follow-row { gap: 12px; flex-wrap: wrap; }
.faq-search { margin: 8px 0 16px; max-width: 520px; }
.faq-topic { margin-top: 24px; }
.faq-item { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin: 8px 0; }
.faq-item summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; padding: 8px 16px; font-weight: 700; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; margin-left: auto; color: var(--gold); font-size: 22px; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: 0; padding: 0 16px 16px; color: #d9d2c3; line-height: 1.6; }

/* Footer: 4 columns on computers */
@media (min-width: 1000px) { .footer-grid.footer-grid4 { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-grid4 .wa-pill { min-height: 40px; }

/* V45 top bar: pay chips · contact + delivery · social icons. Groups wrap, nothing overflows (checked 320 → 1440 px). */
.topbar .tb45 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
.tb45 .tb-pay { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.tb45 .tb-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; }
.tb45 .tb-chip b { font-weight: 800; }
.tb45 .tb-mtn { background: #FFCC00; color: #111; }
.tb45 .tb-orange { background: #FF6600; color: #fff; }
.topbar .tb45 .tb-main { display: inline-flex; flex: 1 1 0; justify-content: center; align-items: center; gap: 12px; min-width: 0; overflow: hidden; white-space: nowrap; padding: 0; text-align: left; }
.tb45 .tb-phone, .tb45 .tb-mail { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.tb45 .tb-ico { flex: none; color: var(--gold); }
.tb45 .tb-ship { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar .tb45 .tb-social { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.tb45 .tb-social a { display: inline-flex; line-height: 0; }
.tb45 .tb-social .social-ico { width: 20px; height: 20px; }
@media (max-width: 899px) { .topbar .tb45 .tb-mail { display: none; } }
@media (max-width: 1099px) { .tb45 .tb-ship { display: none; } }
@media (max-width: 899px) { .topbar .tb45 { justify-content: center; } .topbar .tb45 .tb-main { flex: 0 1 auto; } }
@media (max-width: 599px) { .topbar .tb45 .tb-social { display: none; } .tb45 .tb-num { display: none; } }
@media (max-width: 359px) { .tb45 .tb-chip { padding: 0 6px; font-size: 11px; } .topbar .tb45 { gap: 4px 8px; } }
.hs-list .hs-ico { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; background: #f6f0de; border-radius: 8px; flex: none; }
/* V45.1 footer "We accept": real MTN MoMo / Orange Money logos (22 px) + menu code, black rounded chips, wrap on 320 px. */
.accept-list { gap: 8px; }
.accept-item.accept-mm { gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #000; border-color: rgba(212,175,55,.35); white-space: nowrap; }
.accept-mm .pay-mark.pay-mark-sm { width: 22px; height: 22px; border-radius: 6px; box-shadow: none; }
.accept-ussd { font-size: 12px; font-weight: 800; color: #111; background: var(--gold); border-radius: 999px; padding: 2px 7px; line-height: 1.3; }
@media (max-width: 359px) { .accept-item.accept-mm { padding-right: 8px; font-size: 13px; } }
/* V45.1 map: address bar on top, dark tiles (OSM tiles recoloured in the browser, no extra service), bigger gold pin, 400 px / 300 px. */
.map-bar { display: flex; flex-wrap: wrap; gap: 6px 18px; background: #000; color: #fff; border: 1px solid rgba(212,175,55,.35); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; font-size: 14px; line-height: 1.4; }
.map-bar-item b { color: var(--gold); font-size: 16px; }
.map-bar-item strong { color: var(--gold); }
.map-bar-hours { color: rgba(255,255,255,.75); }
.map-card .map-canvas { height: 400px !important; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.map-canvas .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.6); }
.map-canvas .mh-pin-ball { inset: 9px; box-shadow: 0 0 16px 6px rgba(255,215,0,.85); border: 2px solid #000; }
.map-canvas .mh-pin-ring { border-width: 3px; }
@media (max-width: 599px) { .map-card .map-canvas { height: 300px !important; } .map-bar { font-size: 13px; } }
/* V47 Giveaway Hub (/giveaways/) + wheel look from the owner's reference photos, in black and gold. */
.gw-hero { background: radial-gradient(ellipse at top, rgba(212,175,55,.18), transparent 60%), #000; padding: 28px 0 18px; border-bottom: 1px solid rgba(212,175,55,.25); }
.gw-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.gw-hero-text { flex: 1 1 420px; min-width: 0; }
.gw-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(26px, 5vw, 44px); line-height: 1.1; margin: 4px 0 6px; background: linear-gradient(180deg, #fff3b0, #d4af37 55%, #a67c00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gw-sub { color: var(--gold); font-weight: 600; margin: 0 0 14px; }
.gw-search { display: flex; gap: 8px; max-width: 560px; }
.gw-search .input { flex: 1; min-width: 0; }
.gw-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gw-cats a { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(212,175,55,.35); color: #f4efe4; text-decoration: none; font-size: 13px; font-weight: 600; }
.gw-cats a:hover { border-color: var(--gold); color: var(--gold); }
.gw-cats .gw-join { background: #f5c518; color: #000; border-color: #f5c518; font-weight: 800; }
.gw-mini-wheel { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.gw-wheel { position: relative; width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(#0b0a08 0 60deg, #f5c518 60deg 120deg, #0b0a08 120deg 180deg, #f5c518 180deg 240deg, #0b0a08 240deg 300deg, #f5c518 300deg 360deg);
  border: 8px solid #d4af37; box-shadow: 0 0 0 3px #8a6a12, 0 0 24px rgba(255,215,0,.45); animation: gw-spin 12s linear infinite; }
.gw-wheel::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, #fffbe6 0 3px, transparent 4px) 0 0 / 22px 22px; mask: radial-gradient(circle, transparent 54px, #000 55px); -webkit-mask: radial-gradient(circle, transparent 54px, #000 55px); animation: gw-blink 1s steps(2) infinite; }
.gw-wheel i { position: absolute; inset: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0, #e6b422 50%, #8a6a12); border: 3px solid #000; }
.gw-spin-btn, .spin-luck { background: linear-gradient(180deg, #5ff2ff, #00b8d4); color: #002b33; border: 2px solid #fff; font-weight: 900; box-shadow: 0 6px 18px rgba(0,184,212,.45); }
.gw-spin-btn:hover, .spin-luck:hover { filter: brightness(1.08); }
@keyframes gw-spin { to { transform: rotate(360deg); } }
@keyframes gw-blink { 50% { opacity: .35; } }
.gw-flash { margin-top: 14px; color: #f5c518; font-weight: 700; }
.gw-flash a { color: #f5c518; }
.gw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; padding-top: 24px; padding-bottom: 12px; }
.gw-card { position: relative; display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #14110a, #000); border: 2px solid #d4af37; color: #f4efe4; cursor: pointer; box-shadow: 0 0 24px rgba(212,175,55,.15); font: inherit; transition: transform .2s, box-shadow .2s; }
.gw-card:hover, .gw-card:focus-visible { transform: translateY(-3px); box-shadow: 0 0 34px rgba(212,175,55,.35); }
.gw-badge { position: absolute; top: 12px; right: 12px; background: #f5c518; color: #000; font-size: 11px; font-weight: 900; padding: 3px 9px; border-radius: 999px; z-index: 1; }
.gw-art { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 170px; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at bottom, rgba(212,175,55,.35), transparent 70%); }
.gw-art img { height: 150px; width: auto; max-width: 32%; object-fit: cover; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.6); }
.gw-podium::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 18px; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, #f7dc6f, #a67c00); }
.gw-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.65); color: #f5c518; border: 2px solid #f5c518; font-size: 20px; }
.gw-boxes { align-items: center; font-size: 54px; }
.gw-boxes i { font-style: normal; filter: drop-shadow(0 0 10px rgba(255,215,0,.55)); }
.gw-boxes img { height: 110px; }
.gw-vs { align-items: center; }
.gw-vs img { max-width: 40%; height: 150px; }
.gw-vs b, .gw-vs-badge { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(180deg, #fff3b0, #d4af37); color: #000; font-weight: 900; flex: none; box-shadow: 0 0 16px rgba(255,215,0,.6); }
.gw-h { font-family: 'Syne', 'Manrope', sans-serif; font-size: 20px; letter-spacing: .02em; color: #f5c518; }
.gw-p { color: rgba(244,239,228,.85); font-size: 14px; }
.gw-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto; border: 2px solid #d4af37; border-radius: 18px; background: #0b0a08; color: #f4efe4; padding: 20px; }
.gw-dialog::backdrop { background: rgba(0,0,0,.75); }
.gw-x { float: right; background: none; border: 0; color: var(--gold); font-size: 28px; line-height: 1; cursor: pointer; }
.gw-video { width: 100%; max-height: 52vh; border-radius: 12px; background: #000; }
.gw-progress { height: 8px; border-radius: 99px; background: #2a2518; overflow: hidden; margin: 10px 0; }
.gw-progress i, .gw-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #d4af37, #f5c518); transition: width .3s; }
.gw-prize img { max-height: 200px; border-radius: 12px; }
.gw-duel { display: flex; align-items: center; gap: 10px; }
.gw-look { flex: 1; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; min-width: 0; }
.gw-look img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; }
.gw-bar { display: block; width: 100%; height: 8px; border-radius: 99px; background: #2a2518; overflow: hidden; }
.gw-leader { padding-left: 20px; }
.spin-hello { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 14px; background: #000; border: 1px solid rgba(212,175,55,.4); color: #f5c518; font-weight: 700; }
.spin-hello-face { font-size: 30px; }
@media (max-width: 599px) { .gw-art { height: 140px; } .gw-art img { height: 120px; } .gw-wheel { width: 96px; height: 96px; } .gw-wheel i { inset: 30px; } }
@media (prefers-reduced-motion: reduce) { .gw-wheel, .gw-wheel::before { animation: none; } }
/* V47 fixes: 12 thin slices + dotted bulb rim (reads as a casino wheel), gift card fits 320 px, mini wheel centred on phones. */
.gw-wheel { background: repeating-conic-gradient(#0b0a08 0 30deg, #f5c518 30deg 60deg); outline: 5px dotted #fffbe6; outline-offset: -9px; }
.gw-wheel::before { display: none; }
.gw-wheel::after { content: ''; position: absolute; top: -16px; left: 50%; margin-left: -9px; border-style: solid; border-width: 18px 9px 0; border-color: #d4af37 transparent transparent; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.gw-mini-wheel { padding-top: 14px; }
.gw-wheel { animation: gw-bulbs 1s steps(2) infinite; } /* no rotation: the gold pointer stays on top */
@keyframes gw-bulbs { 50% { outline-color: #c9a227; } }
.gw-boxes { gap: 2px; font-size: 46px; }
.gw-boxes img { max-width: 30%; }
@media (max-width: 899px) { .gw-mini-wheel { flex-direction: row; width: 100%; justify-content: center; gap: 16px; } }
@media (max-width: 399px) { .gw-boxes { font-size: 36px; } }
.spin-pointer { border-color: #d4af37 transparent transparent; top: -10px; z-index: 1; }
/* V50: bank logos, app coming soon badges, reviews, welcome toast, scroll reveal. */
.pay-logo-chip.pay-banks { gap: 6px; padding: 0 6px; background: #fff; border-radius: 10px; }
.pay-banks img { display: block; width: auto; border-radius: 4px; }
.footer-extra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 8px; border-top: 1px solid rgba(212,175,55,.2); }
.app-soon-title { margin: 0 0 8px; color: #f5c518; font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.app-soon-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.app-soon-badges img { display: block; height: 40px; width: auto; border-radius: 8px; opacity: .92; }
.app-soon .muted { margin: 6px 0 0; }
.footer-trust { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 360px; }
.footer-trust p { margin: 0; }
.more-drawer .app-soon-sm { flex-basis: 100%; padding-top: 8px; }
.more-drawer .app-soon-badges img { height: 32px; }
.rv-stars { color: #f5c518; letter-spacing: 1px; white-space: nowrap; }
.rv-off { color: rgba(245,197,24,.25); }
.rv-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rv-card { padding: 12px 14px; border: 1px solid rgba(212,175,55,.25); border-radius: 14px; background: rgba(255,255,255,.02); }
.rv-card p { margin: 6px 0 0; }
.rv-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 18px; }
.rv-big { font-size: 44px; font-weight: 800; margin: 0; color: #f5c518; line-height: 1; }
.rv-big small { font-size: 18px; color: rgba(244,239,228,.6); }
.rv-cols { display: grid; gap: 20px; }
@media (min-width: 900px) { .rv-cols { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.rv-pick { border: 0; padding: 0; margin: 0; }
.rv-pick-row { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.rv-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-pick label { font-size: 30px; color: rgba(245,197,24,.3); cursor: pointer; line-height: 1; }
.rv-pick label:hover, .rv-pick label:hover ~ label, .rv-pick input:checked ~ label { color: #f5c518; }
.rv-pick input:focus-visible + label { outline: 2px solid #f5c518; border-radius: 4px; }
.rv-leave summary { list-style: none; display: inline-flex; cursor: pointer; }
.rv-leave summary::-webkit-details-marker { display: none; }
.rv-leave[open] summary { margin-bottom: 12px; }
.rv-inline { font-size: 15px; font-weight: 600; color: rgba(244,239,228,.8); }
.rv-tp { margin-top: 8px; }
.mh-welcome { position: fixed; top: 12px; left: 50%; z-index: 9990; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 14px;
  background: rgba(11,10,8,.96); border: 1px solid #d4af37; color: #f4efe4; box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 18px rgba(212,175,55,.25);
  transform: translate(-50%, -140%); opacity: 0; transition: transform .5s cubic-bezier(.2,.9,.3,1.2), opacity .4s; }
.mh-welcome.is-in { transform: translate(-50%, 0); opacity: 1; }
.mh-welcome-flag { font-size: 28px; line-height: 1; }
.mh-welcome-text { display: flex; flex-direction: column; min-width: 0; }
.mh-welcome-text strong { color: #f5c518; font-size: 14px; }
.mh-welcome-text small { font-size: 12px; color: rgba(244,239,228,.75); }
.mh-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.mh-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mh-welcome { transition: none; } }
.mh-welcome { width: max-content; }
.mh-welcome-flag img { display: block; width: 32px; height: 24px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
@media (max-width: 599px) { .mh-welcome { left: 12px; right: 12px; width: auto; max-width: none; transform: translateY(-140%); } .mh-welcome.is-in { transform: translateY(0); } }
.footer-accept .pay-banks { height: 40px !important; } .footer-accept .pay-banks img { height: 28px; }