/* Myles Hustler Store 21 · V38: top bar contacts, founder story, paid ads (gold frame), ad popup, hub ads. */

/* Top bar: PIN warning, two WhatsApp numbers, e-mail (computers); phones keep the short delivery line */
.tb-right { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.tb-wa, .tb-mail { display: inline-flex; align-items: center; gap: 5px; color: #f4efe4; text-decoration: none; white-space: nowrap; font-weight: 700; }
.tb-wa .social-ico { width: 16px; height: 16px; box-shadow: none; }
.tb-wa:hover, .tb-mail:hover { color: var(--gold); }
@media (max-width: 1279px) { .tb-mail { display: none; } }
@media (max-width: 1099px) { .tb-safe { display: none; } }
@media (max-width: 899px) { .tb-right { display: none; } }

/* Founder story */
.story-wrap { max-width: 900px; }
.story-title { font-family: var(--serif); color: var(--gold); font-size: clamp(28px, 5vw, 42px); font-weight: 900; line-height: 1.15; margin: 4px 0 20px; }
.founder-story p { font-size: 17px; line-height: 1.75; margin: 0 0 16px; color: #ece6d8; }
.founder-story .story-lead { font-size: 20px; color: #fff; }
.founder-story .story-punch { font-family: var(--serif); font-size: 22px; color: var(--gold); }
.founder-story .story-sign { font-style: italic; color: var(--gold); margin-top: 24px; }
.story-tl { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.story-tl li { display: flex; gap: 16px; align-items: baseline; padding: 12px 16px; border-left: 3px solid var(--gold); background: rgba(212,175,55,.06); border-radius: 0 12px 12px 0; }
.tl-year { flex: none; font-family: var(--serif); font-weight: 900; font-size: 22px; color: var(--gold); min-width: 56px; }

/* Ads on the main website: clearly "Sponsored"; paid ads in a gold frame */
.container > .ad-slot, .shop-page .ad-slot, .hub-ads .ad-slot { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 16px 0; }
.ad-slot .ad-label { flex-basis: 100%; }
.ad-banner { display: flex; gap: 12px; align-items: center; flex: 1 1 260px; min-height: 64px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: #0d0c0a; color: #f4efe4; text-decoration: none; }
.ad-banner img { width: 96px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; }
.ad-banner .ad-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-banner .ad-text span { font-size: 13px; color: var(--muted); }
.ad-paid { border: 2px solid var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.12); }
.ad-home_top .ad-banner { flex-basis: 100%; }
.ad-home_top .ad-banner img { width: 160px; height: 96px; }
@media (max-width: 599px) { .ad-home_top .ad-banner { flex-direction: column; align-items: stretch; } .ad-home_top .ad-banner img { width: 100%; height: auto; aspect-ratio: 16 / 9; } }
.ad-pop { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.7); }
.ad-pop[hidden] { display: none; }
.ad-pop-card { position: relative; width: min(100%, 440px); padding: 20px; border-radius: 18px; background: #000; border: 2px solid var(--gold); }
.ad-pop-card .ad-banner { flex-direction: column; align-items: stretch; border: 0; padding: 0; background: none; }
.ad-pop-card .ad-banner img { width: 100%; height: auto; max-height: 50vh; object-fit: cover; }
.ad-pop-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: none; color: var(--gold); font-size: 26px; cursor: pointer; }

/* Promote page */
.slot-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.slot-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.slot-card.is-best { border: 2px solid var(--gold); }
.slot-price { font-size: 24px; font-weight: 900; color: var(--gold); }
.promo-ad .check { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.promo-ad .check .pay-mark { width: 32px; height: 32px; }
.my-ad { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--raised); }
.pill-approved { background: #1f6f43; color: #fff; } .pill-pending { background: #6b5a1a; color: #fff; } .pill-rejected { background: #7a2323; color: #fff; }

/* Hub: community (free) ads */
.hub-ads-row { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.hub-ads-row a { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: #f4efe4; text-decoration: none; }
.hub-ads-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.footer-sells { color: #d9d2c3; }