/*
 * Retro Gaming Nerd — Mobile Stylesheet
 * Loaded only on screens ≤ 768px
 * Overrides desktop styles cleanly
 */


@media (max-width: 768px) {

/* ============================================================
   BASE RESET FOR MOBILE
   ============================================================ */
* { box-sizing: border-box; }

body {
  font-size: 15px;
  overflow-x: hidden;
}

.container {
  padding: 0 16px;
  width: 100%;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   ANNOUNCEMENT BAR — single slim line, never grows
   ============================================================ */
.rgn-announcement-bar {
  height: 30px !important;
  min-height: 0 !important;
  max-height: 30px !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
}

.rgn-announcement-bar .ticker-track {
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
}

.rgn-announcement-bar .ticker-item {
  height: 30px !important;
  font-size: 10px !important;
  padding: 0 16px !important;
  letter-spacing: 0.04em !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* ============================================================
   HEADER — compact, no overflow
   ============================================================ */
.rgn-header-inner {
  height: 56px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

/* Logo — icon + truncated name */
.rgn-logo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.rgn-logo a,
.rgn-logo-link {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  min-width: 0 !important;
}

.rgn-logo img {
  height: 30px !important;
  width: auto !important;
}

.rgn-logo-icon {
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.rgn-logo-text,
.rgn-logo a > span {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  color: var(--color-teal) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 120px !important;
  letter-spacing: 0.03em !important;
  /* Force any inline font-size to 12px */
  font-size: 12px !important;
}

/* Hide desktop nav entirely */
.rgn-nav {
  display: none !important;
}

/* Header actions — icon-only buttons in a tight row */
.rgn-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

/* Every action button: fixed 36×36 square */
.rgn-search-toggle,
.rgn-cart-icon,
.rgn-account-btn,
.btn-icon {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
  min-width: 36px !important;
}

/* Hide text labels inside buttons */
.rgn-account-btn .rgn-account-label,
.rgn-account-btn span:last-child,
.rgn-cart-icon > span:first-child + span:not(.cart-count):not(.rgn-cart-count) {
  display: none !important;
}

/* Keep cart count badge visible */
.rgn-cart-count,
.cart-count {
  display: flex !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 9px !important;
}

/* Hamburger — always visible, always 36px */
.rgn-mobile-toggle {
  display: flex !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 20px !important;
  background: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 4px !important;
  color: var(--color-teal) !important;
  cursor: pointer !important;
}

/* ============================================================
   MOBILE DRAWER NAV — slides in from right
   ============================================================ */
#rgn-primary-nav {
  position: fixed !important;
  top: 0 !important;
  right: -100% !important;
  bottom: 0 !important;
  width: 80vw !important;
  max-width: 300px !important;
  background: var(--color-bg-2) !important;
  z-index: 9999 !important;
  transition: right 0.28s ease !important;
  overflow-y: auto !important;
  padding: 64px 0 32px !important;
  border-left: 1px solid var(--color-border) !important;
  display: block !important;
  box-shadow: -8px 0 32px rgba(0,0,0,0.5) !important;
}

#rgn-primary-nav.rgn-drawer-open {
  right: 0 !important;
}

#rgn-primary-nav ul {
  flex-direction: column !important;
  gap: 0 !important;
  display: flex !important;
  padding: 0 !important;
  margin: 0 !important;
}

#rgn-primary-nav ul li {
  display: block !important;
  width: 100% !important;
}

#rgn-primary-nav ul li > a {
  display: block !important;
  padding: 14px 24px !important;
  font-size: 13px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-right: none !important;
  color: var(--color-text) !important;
  letter-spacing: 0.06em !important;
}

#rgn-primary-nav ul li > a:hover {
  color: var(--color-teal) !important;
  background: rgba(0,255,200,0.05) !important;
}

/* Dropdown inside drawer — always show, indented */
#rgn-primary-nav ul li ul {
  position: static !important;
  display: block !important;
  background: rgba(0,0,0,0.25) !important;
  border: none !important;
  box-shadow: none !important;
  min-width: auto !important;
  padding: 0 !important;
}

#rgn-primary-nav ul li ul li a {
  padding-left: 40px !important;
  font-size: 12px !important;
  color: var(--color-text-dim) !important;
}

/* ============================================================
   HERO — single column, no side visual
   ============================================================ */
.rgn-hero {
  min-height: auto !important;
}

.rgn-hero-content {
  grid-template-columns: 1fr !important;
  padding: 48px 16px 44px !important;
  gap: 0 !important;
  text-align: center !important;
}

.rgn-hero-visual {
  display: none !important;
}

.rgn-hero-eyebrow {
  justify-content: center !important;
}

.rgn-hero-title {
  font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
  margin-bottom: 14px !important;
}

.rgn-hero-subtitle {
  font-size: 14px !important;
  margin: 0 auto 28px !important;
}

.rgn-hero-ctas {
  justify-content: center !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

.rgn-hero-ctas .btn {
  width: 100% !important;
  max-width: 260px !important;
  justify-content: center !important;
}

/* ============================================================
   STATS BAR — 2 × 2 grid
   ============================================================ */
.rgn-stats { padding: 28px 0 !important; }

.rgn-stats-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  text-align: center !important;
}

.rgn-stat-number { font-size: 1.8rem !important; }
.rgn-stat-label  { font-size: 10px !important; }

/* ============================================================
   CATEGORIES — 2 columns
   ============================================================ */
.rgn-categories { padding: 44px 0 !important; }

.rgn-categories-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

.rgn-category-card  { padding: 20px 10px !important; }
.rgn-category-icon  { font-size: 1.8rem !important; }
.rgn-category-name  { font-size: 0.65rem !important; }

/* ============================================================
   POSTS — single column
   ============================================================ */
.rgn-posts { padding: 44px 0 !important; }

.rgn-posts-grid {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.rgn-posts-grid .rgn-card:first-child {
  grid-column: span 1 !important;
}

.rgn-posts-grid .rgn-card:first-child .rgn-card-image {
  aspect-ratio: 16/9 !important;
}

.rgn-card-body    { padding: 16px !important; }
.rgn-card-title   { font-size: 0.9rem !important; }
.rgn-card-excerpt { font-size: 13px !important; }

/* ============================================================
   SHOP / PRODUCTS — 2 columns on mobile, 1 on very small
   ============================================================ */
.rgn-shop { padding: 44px 0 !important; }

.rgn-products-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

.woocommerce ul.products,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-3 {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

/* ============================================================
   REVIEWS CAROUSEL — 1 card, swipeable
   ============================================================ */
.rgn-reviews-carousel {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 16px !important;
  padding-bottom: 4px !important;
}

.rgn-reviews-carousel::-webkit-scrollbar { display: none !important; }

.rgn-review-card {
  flex: 0 0 calc(100vw - 48px) !important;
  min-width: calc(100vw - 48px) !important;
  scroll-snap-align: start !important;
}

.rgn-carousel-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 16px !important;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.rgn-cta-band {
  padding: 44px 16px !important;
}

.rgn-cta-band h2 { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; }
.rgn-cta-band p  { font-size: 14px !important; }

.rgn-cta-band .btn {
  display: block !important;
  width: 100% !important;
  max-width: 260px !important;
  margin: 8px auto !important;
  text-align: center !important;
  justify-content: center !important;
}

/* ============================================================
   CONTENT + SIDEBAR — stack vertically
   ============================================================ */
.rgn-content-wrapper {
  grid-template-columns: 1fr !important;
  padding: 36px 16px !important;
  gap: 28px !important;
}

.rgn-sidebar { position: static !important; }

.rgn-post-title   { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; }
.rgn-post-content { font-size: 15px !important; }

/* ============================================================
   FOOTER — single column
   ============================================================ */
.rgn-footer { padding-top: 0 !important; }

.rgn-footer-grid {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  padding: 36px 16px !important;
}

.rgn-footer-bottom {
  flex-direction: column !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 16px !important;
  font-size: 11px !important;
}

.rgn-footer-social { justify-content: flex-start !important; }

/* ============================================================
   WOOCOMMERCE — mobile forms + tables
   ============================================================ */
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
  float: none !important;
  width: 100% !important;
}

.woocommerce table.shop_table {
  font-size: 13px !important;
  overflow-x: auto !important;
  display: block !important;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  padding: 10px 10px !important;
}

/* ============================================================
   HOMEPAGE HTML BLOCKS — inline-style overrides
   These fix the grids you built in the Classic Editor
   ============================================================ */

/* 5-col brand grid → 2 col */
div[style*="repeat(5,1fr)"],
div[style*="repeat(5, 1fr)"] {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

/* 3-col review grid → 1 col */
div[style*="repeat(3,1fr)"],
div[style*="repeat(3, 1fr)"] {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

/* 4-col product grid → 2 col */
div[style*="repeat(4,1fr)"],
div[style*="repeat(4, 1fr)"] {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

/* Section padding inside HTML blocks */
div[style*="padding:64px 24px"],
div[style*="padding: 64px 24px"] {
  padding: 40px 16px !important;
}

div[style*="padding:56px 24px"],
div[style*="padding: 56px 24px"] {
  padding: 36px 16px !important;
}

/* Hero section inside HTML block */
div[style*="min-height:480px"],
div[style*="min-height: 480px"] {
  min-height: 320px !important;
  padding: 40px 16px !important;
}

div[style*="min-height:480px"] h1,
div[style*="min-height: 480px"] h1 {
  font-size: clamp(1.4rem, 6vw, 2rem) !important;
  margin-bottom: 12px !important;
}

div[style*="min-height:480px"] p,
div[style*="min-height: 480px"] p {
  font-size: 13px !important;
  max-width: 100% !important;
}

/* Hero buttons — stack vertically */
div[style*="min-height:480px"] a[style*="display:inline-block"],
div[style*="min-height: 480px"] a[style*="display:inline-block"] {
  display: block !important;
  width: calc(100% - 32px) !important;
  max-width: 260px !important;
  margin: 6px auto !important;
  text-align: center !important;
}

/* Trust bar — stack items */
div[style*="justify-content:space-around"],
div[style*="justify-content: space-around"] {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

/* Category tiles — fix aspect ratio */
a[style*="aspect-ratio:3/4"],
a[style*="aspect-ratio: 3/4"] {
  aspect-ratio: 16/9 !important;
}

/* Section headings */
div[style*="padding:64px"] h2,
div[style*="padding: 64px"] h2 {
  font-size: clamp(1.4rem, 5vw, 2rem) !important;
}

/* Email strip */
div[style*="background:#ff1e8c"] {
  padding: 36px 16px !important;
}

div[style*="background:#ff1e8c"] h2 {
  font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
}

/* ============================================================
   VERY SMALL PHONES (≤ 400px)
   ============================================================ */

  .rgn-logo-text,
  .rgn-logo a > span {
    max-width: 90px !important;
    font-size: 11px !important;
  }

  .rgn-header-actions { gap: 4px !important; }

  .rgn-search-toggle,
  .rgn-cart-icon,
  .rgn-account-btn,
  .rgn-mobile-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 14px !important;
  }
}

/* ============================================================
   SECTION SPACING CLEANUP
   ============================================================ */
.section { padding: 44px 0 !important; }
.section-sm { padding: 28px 0 !important; }

/* Page hero */
.rgn-page-hero { padding: 36px 16px !important; }

} /* end 768px */

@media (max-width: 400px) {
  .rgn-products-grid,
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }

/* Card background — force match to sidebar widget on mobile */
@media (max-width: 768px) {
  .rgn-card,
  .rgn-card-body {
    background: #0f1929 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Force dark text on cards — readable on any background */
.rgn-card-title,
.rgn-card-title a,
.rgn-card-meta,
.rgn-card-excerpt { color: #0a0f1a !important; text-shadow: none !important; }
.rgn-card-meta { color: #2a3a4a !important; }
.rgn-card-excerpt { color: #2a3a4a !important; }

/* ==========================================================================
   MOBILE IMAGE & PERFORMANCE PASS
   Added on top of the existing mobile rules. Everything here is scoped to
   <=768px, so desktop rendering is unchanged.
   ========================================================================== */

@media (max-width: 768px) {

  /* ---------------------------------------------------------------
     1. Serve the 800px variants instead of the 1600px originals.

     The full-size backgrounds were 1.2-1.5MB each. On a phone the
     extra pixels are invisible and the download is not.
     --------------------------------------------------------------- */

  .rgn-hero {
    background:
      linear-gradient(135deg, rgba(8,11,16,0.88) 0%, rgba(8,11,16,0.65) 50%, rgba(8,11,16,0.85) 100%),
      url('../images/hero-bg-mobile-v2.jpg') center center / cover no-repeat !important;
  }

  .rgn-page-hero {
    background:
      linear-gradient(135deg, rgba(8,11,16,0.92) 0%, rgba(13,18,32,0.85) 100%),
      url('../images/hero-bg-mobile-v2.jpg') center top / cover no-repeat !important;
  }

  .rgn-shop {
    background:
      linear-gradient(180deg, rgba(8,11,16,0.92) 0%, rgba(13,18,32,0.88) 100%),
      /* 'fixed' is dropped deliberately: iOS Safari does not support
         background-attachment:fixed with cover, and renders the image
         wildly zoomed or juddering while scrolling. */
      url('../images/metaverse-bg-mobile-v2.jpg') center center / cover no-repeat scroll !important;
  }

  .rgn-cta-band {
    background:
      linear-gradient(135deg, rgba(155,93,229,0.78) 0%, rgba(255,30,140,0.68) 50%, rgba(0,255,200,0.5) 100%),
      url('../images/collage-bg-mobile-v2.jpg') center center / cover no-repeat !important;
  }

  /* Belt and braces: no fixed attachment anywhere on touch devices. */
  .rgn-hero,
  .rgn-shop,
  .rgn-cta-band,
  .rgn-page-hero {
    background-attachment: scroll !important;
  }

  /* ---------------------------------------------------------------
     2. Images inside post and page content

     Content pasted into a page or post is not covered by the theme's
     own class-based rules, so anything with a fixed width or a table
     wrapper can push the layout sideways.
     --------------------------------------------------------------- */

  .rgn-post-content img,
  .rgn-post-content iframe,
  .rgn-post-content video,
  .rgn-post-content embed,
  .rgn-post-content object {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
  }

  /* A broken image shows its alt text plus a browser placeholder icon,
     which looks like a layout bug. This keeps it contained. */
  .rgn-post-content img {
    min-height: 0;
    font-size: 13px;
    color: var(--color-text-dim, #7c8aa0);
  }

  /* Wide tables and preformatted blocks scroll inside their own box
     rather than dragging the whole page sideways. */
  .rgn-post-content table,
  .rgn-post-content pre {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Long URLs and code in retro guides are a common overflow source. */
  .rgn-post-content {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* ---------------------------------------------------------------
     3. Stop any sideways scroll at the root
     --------------------------------------------------------------- */

  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* ---------------------------------------------------------------
     4. The hero visual in index.php

     It carries an inline max-width:520px, which beats any stylesheet
     rule, so it needs !important to come down on a phone.
     --------------------------------------------------------------- */

  .rgn-hero-visual img {
    max-width: 100% !important;
    /* The float animation on a 4:10 image is a repaint on every frame
       and is the main scroll-jank source on cheaper Androids. */
    animation: none !important;
    box-shadow: 0 0 30px rgba(0,255,200,0.12) !important;
  }
}

/* Save-Data header, and anyone who has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .rgn-hero-visual img,
  .rgn-hero {
    animation: none !important;
  }
}