/*
Theme Name: Retro Gaming Nerd
Theme URI: https://retrogamingnerd.com
Author: Retro Gaming Nerd
Author URI: https://retrogamingnerd.com
Description: A dark cyberpunk retro gaming theme with neon glitch aesthetics, vaporwave collage elements, and metaverse energy. Built for WooCommerce and Easy Digital Downloads.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: retrogamingnerd
Tags: dark, gaming, retro, woocommerce, custom-menu, featured-images, blog
*/

/* ============================================================
   DESIGN TOKENS — Retro Gaming Nerd
   Palette: Deep space black + electric magenta + teal glow + amber pixel
   Type: Orbitron (display/logo), Share Tech Mono (UI), Inter (body)
   Signature: Scanline overlay + CRT flicker on hover
   ============================================================ */

:root {
  --color-bg:         #080b10;
  --color-bg-2:       #0d1220;
  --color-bg-3:       #111827;
  --color-panel:      #0f1929;
  --color-border:     rgba(0, 255, 200, 0.15);
  --color-border-hot: rgba(255, 30, 140, 0.4);

  --color-teal:       #00ffc8;
  --color-magenta:    #ff1e8c;
  --color-amber:      #ffb300;
  --color-purple:     #9b5de5;
  /* Spacing scale. Every padding, margin and gap in this theme snaps to one
     of these steps. Before the scale there were 22 arbitrary values (4,6,7,8,
     10,12,14,16,20,24,28,32,40,44,48,56,60,64,72,80,100) and nothing lined up
     -- that mismatch is what makes a layout read as untidy without anyone
     being able to say why. Add a new value here only if the scale genuinely
     cannot express it. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  --color-text:       #c8d4e8;
  /* Excerpt / secondary copy. 7.1:1 on panels -- passes WCAG AA while still
     reading as quieter than body text. */
  --color-text-soft:  #b3c2d8;
  /* Was #5a6a82, which measured 3.21:1 on panels and failed AA. */
  --color-text-dim:   #94a6c2;
  /* Decorative micro-labels only -- still 5.7:1, never used for sentences. */
  --color-text-faint: #7a8ba5;
  --color-white:      #ffffff;

  --font-display:     'Orbitron', monospace;
  --font-mono:        'Share Tech Mono', monospace;
  --font-body:        'Inter', sans-serif;

  --radius:           4px;
  --radius-lg:        8px;
  --glow-teal:        0 0 20px rgba(0, 255, 200, 0.5), 0 0 60px rgba(0, 255, 200, 0.2);
  --glow-magenta:     0 0 20px rgba(255, 30, 140, 0.5), 0 0 60px rgba(255, 30, 140, 0.2);
  /* Two glow intensities, deliberately. Before this there were seven different
     one-off text-shadows -- neon everywhere at slightly different strengths,
     which reads as accidental rather than designed. Standard for most neon
     text; -strong only for the hero and headline moments. */
  --glow-teal-strong: 0 0 20px var(--color-teal), 0 0 70px rgba(0, 255, 200, 0.5);
  --glow-magenta-strong: 0 0 20px var(--color-magenta), 0 0 70px rgba(255, 30, 140, 0.5);
  --transition:       all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* CRT scanline overlay — the signature element */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-teal); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--color-magenta); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-white);
  line-height: 1.2;
  letter-spacing: 0.05em;
}

p { margin-bottom: 1rem; }

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 80px 0; }

/* ============================================================
   GLITCH TEXT EFFECT
   ============================================================ */
@keyframes glitch-1 {
  0%, 100% { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 0); }
  50%       { clip-path: inset(50% 0 20% 0); transform: translate(4px, 0); }
}
@keyframes glitch-2 {
  0%, 100% { clip-path: inset(60% 0 10% 0); transform: translate(4px, 0); }
  50%       { clip-path: inset(10% 0 70% 0); transform: translate(-4px, 0); }
}
@keyframes scanflicker {
  0%   { opacity: 1; }
  92%  { opacity: 1; }
  93%  { opacity: 0.85; }
  94%  { opacity: 1; }
  96%  { opacity: 0.9; }
  100% { opacity: 1; }
}
@keyframes neon-pulse {
  0%, 100% { text-shadow: var(--glow-teal); }
  50%       { text-shadow: var(--glow-teal-strong); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.rgn-announcement-bar {
  background: var(--color-magenta);
  padding: 0;
  overflow: hidden;
  position: relative;
  height: 34px;
  display: flex;
  align-items: center;
}
.rgn-announcement-bar .ticker-track {
  display: flex;
  align-items: center;
  animation: ticker 30s linear infinite;
  width: max-content;
  height: 34px;
}
.rgn-announcement-bar .ticker-item {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #fff;
  padding: 0 32px;
  white-space: nowrap;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  align-items: center;
  height: 34px;
}
.rgn-announcement-bar .ticker-item::before {
  content: '◆  ';
  color: rgba(255,255,255,0.6);
}

@media (max-width: 768px) {
  .rgn-announcement-bar {
    height: 28px;
    font-size: 10px;
  }
  .rgn-announcement-bar .ticker-track,
  .rgn-announcement-bar .ticker-item {
    height: 28px;
  }
  .rgn-announcement-bar .ticker-item {
    font-size: 10px;
    padding: 0 20px;
    letter-spacing: 0.06em;
  }
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.rgn-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(8, 11, 16, 0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
}
.rgn-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.rgn-logo img {
  height: 44px;
  width: auto;
  filter: drop-shadow(var(--glow-teal));
  transition: var(--transition);
}
.rgn-logo img:hover {
  filter: drop-shadow(var(--glow-magenta));
  transform: scale(1.05);
}
.rgn-logo a { display: block; }

/* Text logo — responsive */
.rgn-logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  min-width: 0;
}
.rgn-logo-icon {
  font-size: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(0,255,200,0.5));
}
.rgn-logo-text {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 2vw, 1.1rem);
  color: var(--color-teal);
  text-shadow: var(--glow-teal);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  transition: var(--transition);
}
.rgn-logo-link:hover .rgn-logo-text {
  color: var(--color-magenta);
  text-shadow: var(--glow-magenta);
}

/* Primary Nav */
.rgn-nav ul {
  list-style: none;
  display: flex;
  gap: 4px;
  align-items: center;
}
.rgn-nav ul li { position: relative; }
.rgn-nav ul li a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  padding: 8px 12px;
  border-radius: var(--radius);
  display: block;
  transition: var(--transition);
}
.rgn-nav ul li a:hover,
.rgn-nav ul li.current-menu-item > a {
  color: var(--color-teal);
  background: rgba(0, 255, 200, 0.08);
  text-shadow: var(--glow-teal);
}

/* Dropdown */
.rgn-nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-width: 200px;
  padding: 8px 0;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), var(--glow-teal);
}
.rgn-nav ul li:hover > ul { display: flex; }
.rgn-nav ul li ul li a {
  font-size: 12px;
  padding: 8px 20px;
  border-radius: 0;
  border-left: 2px solid transparent;
}
.rgn-nav ul li ul li a:hover {
  border-left-color: var(--color-teal);
  background: rgba(0,255,200,0.05);
}

/* Header Actions */
.rgn-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.rgn-cart-icon {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text);
  background: rgba(0,255,200,0.1);
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  border-radius: var(--radius);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rgn-cart-icon:hover {
  background: rgba(0,255,200,0.2);
  border-color: var(--color-teal);
  color: var(--color-teal);
  box-shadow: var(--glow-teal);
}
.rgn-cart-icon .cart-count {
  background: var(--color-magenta);
  color: #fff;
  border-radius: 50%;
  width: 18px; height: 18px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Search toggle button */
.rgn-search-toggle {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
  width: 36px; height: 36px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.rgn-search-toggle:hover {
  border-color: var(--color-teal);
  color: var(--color-teal);
}

/* Account button */
.rgn-account-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.rgn-account-btn:hover {
  border-color: var(--color-teal);
  color: var(--color-teal);
}
.rgn-account-icon { font-size: 15px; flex-shrink: 0; }
.rgn-account-label { /* shown on desktop, hidden on mobile via media query */ }

/* Mobile toggle — hamburger lines */
.rgn-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 8px;
  cursor: pointer;
  width: 40px; height: 40px;
  flex-shrink: 0;
}
.rgn-mobile-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--color-teal);
  border-radius: 2px;
  transition: var(--transition);
}

/* ============================================================
   HERO
   ============================================================ */
.rgn-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(8,11,16,0.82) 0%, rgba(8,11,16,0.55) 50%, rgba(8,11,16,0.78) 100%),
    url('assets/images/hero-bg-v2.jpg') center center / cover no-repeat;
  animation: scanflicker 8s infinite;
}

/* Grid overlay inspired by metaverse theme */
.rgn-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0,255,200,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,200,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.rgn-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.rgn-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rgn-hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: var(--color-teal);
  box-shadow: var(--glow-teal);
}
.rgn-hero-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-family: var(--font-display);
  color: var(--color-white);
  text-transform: uppercase;
  margin-bottom: 8px;
  animation: neon-pulse 4s ease-in-out infinite;
}
.rgn-hero-title .accent {
  color: var(--color-magenta);
  text-shadow: var(--glow-magenta);
  font-style: italic;
  animation: neon-pulse 4s ease-in-out infinite reverse;
}
.rgn-hero-subtitle {
  font-size: 1.125rem;
  color: var(--color-text-dim);
  margin-bottom: 40px;
  max-width: 480px;
  line-height: 1.7;
}
.rgn-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* Floating 3D element container — inspired by metaverse theme */
.rgn-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rgn-hero-pixel-art {
  font-size: 120px;
  filter: drop-shadow(0 0 40px rgba(0,255,200,0.4)) drop-shadow(0 0 80px rgba(155,93,229,0.3));
  animation: float 4s ease-in-out infinite;
  line-height: 1;
  text-align: center;
  user-select: none;
}
.rgn-hero-badge {
  position: absolute;
  bottom: 20px; right: 20px;
  background: rgba(255,30,140,0.15);
  border: 1px solid var(--color-magenta);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-magenta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.4s;
}
.btn:hover::before { left: 100%; }

.btn-primary {
  background: var(--color-teal);
  color: var(--color-bg);
  box-shadow: var(--glow-teal);
  font-weight: 700;
}
.btn-primary:hover {
  background: #00e6b4;
  box-shadow: 0 0 40px rgba(0,255,200,0.8);
  color: var(--color-bg);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--color-magenta);
  border: 1px solid var(--color-magenta);
  box-shadow: inset 0 0 20px rgba(255,30,140,0.05);
}
.btn-outline:hover {
  background: rgba(255,30,140,0.1);
  box-shadow: var(--glow-magenta);
  color: var(--color-magenta);
  transform: translateY(-2px);
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.rgn-section-header {
  text-align: center;
  margin-bottom: 60px;
}
.rgn-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 12px;
  display: block;
}
.rgn-section-title {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rgn-section-title .accent { color: var(--color-magenta); }

/* ============================================================
   STAT BAR
   ============================================================ */
.rgn-stats {
  background: var(--color-panel);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 40px 0;
}
.rgn-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}
.rgn-stat-number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--color-teal);
  text-shadow: var(--glow-teal);
  display: block;
}
.rgn-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-top: 4px;
}

/* ============================================================
   BLOG POSTS — FEATURED
   ============================================================ */
.rgn-posts {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0,255,200,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255,30,140,0.04) 0%, transparent 50%),
    var(--color-bg);
}
.rgn-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Cards with glitch-inspired borders */
.rgn-card {
  /* Match sidebar widget — solid dark navy, no backdrop-filter grey bleed */
  background: #0f1929;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0, 255, 200, 0.22);
  border-top: 1px solid rgba(0, 255, 200, 0.22);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  position: relative;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Teal accent line on top */
.rgn-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--color-teal) 40%, var(--color-magenta) 100%);
  opacity: 0.6;
  z-index: 2;
  transition: var(--transition);
}
/* Inner glass sheen */
.rgn-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.rgn-card:hover {
  border-color: rgba(0, 255, 200, 0.55);
  border-top-color: rgba(0, 255, 200, 0.55);
  transform: translateY(-6px);
  background: #111e35;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.7),
    0 4px 16px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 255, 200, 0.2),
    0 0 40px rgba(0, 255, 200, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.rgn-card:hover::before { opacity: 1; }

.rgn-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  z-index: 2;
}
.rgn-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: saturate(0.9) brightness(0.95);
}
.rgn-card:hover .rgn-card-image img {
  transform: scale(1.05);
  filter: saturate(1.15) brightness(1.05);
}
/* Category pill */
.rgn-card-category {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--color-magenta);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--radius);
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
/* Card body — solid dark, matches sidebar panel */
.rgn-card-body {
  padding: 20px 24px 24px;
  position: relative;
  z-index: 2;
  background: #0f1929;
  border-top: 1px solid rgba(0, 255, 200, 0.12);
}
/* Date / author meta. Was #1a2a3a on a #0f1929 card -- about 1.1:1. */
.rgn-card-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
/* Title. The whole card block was styled for a light card -- #0a0f1a title on
   a #0f1929 card body measures ~1.05:1, i.e. invisible. Now white, which is
   also the strongest signal of "this is the clickable thing" in a card grid. */
.rgn-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
  color: var(--color-white);
  line-height: 1.4;
  text-shadow: none;
}
.rgn-card-title a { color: var(--color-white); text-decoration: none; transition: color 0.18s ease; }
/* --color-ember was never defined in this palette, so the hover silently fell
   back to a red that appears nowhere else. Teal is the theme's link colour. */
.rgn-card-title a:hover { color: var(--color-teal); }
/* Excerpt. #2a3a4a was left over from a light-background design and measured
   1.51:1 against the panel -- effectively invisible on this dark theme. */
.rgn-card-excerpt {
  font-size: 0.875rem;
  color: var(--color-text-soft);
  line-height: 1.7;
  margin-bottom: 16px;
}
/* Read more link */
.rgn-card-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0, 255, 200, 0.25);
  transition: var(--transition);
}
.rgn-card-link:hover {
  gap: 12px;
  color: var(--color-teal);
  border-bottom-color: var(--color-teal);
}
.rgn-card-link::after { content: '→'; }

/* Featured post — first card spans 2 cols */
.rgn-posts-grid .rgn-card:first-child {
  grid-column: span 2;
}
.rgn-posts-grid .rgn-card:first-child .rgn-card-image {
  aspect-ratio: 16/7;
}
.rgn-posts-grid .rgn-card:first-child .rgn-card-title {
  font-size: 1.375rem;
}

/* ============================================================
   SHOP / WOOCOMMERCE SECTION
   ============================================================ */
.rgn-shop {
  background:
    linear-gradient(180deg, rgba(8,11,16,0.92) 0%, rgba(13,18,32,0.88) 100%),
    url('assets/images/metaverse-bg-v2.jpg') center center / cover no-repeat fixed;
}
/* --------------------------------------------------------------
   Product grid

   THE BUG THIS FIXES
   The wrapper was the grid:  .rgn-products-grid { display:grid;
   grid-template-columns: repeat(4,1fr) }. But the [products] shortcode
   outputs a single <ul class="products"> inside that wrapper, so the
   grid had exactly ONE child. The <ul> landed in column 1 and was given
   a quarter of the available width, crushing every card into the left
   edge with three empty columns beside it.

   The grid has to be on the <ul>, because that is what actually
   contains the <li class="product"> items.
   -------------------------------------------------------------- */

.rgn-products-grid {
  display: block;
}

.rgn-products-grid ul.products,
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* WooCommerce sets float:left and a percentage width on each item, plus
   clear:both on every nth child. Inside a grid those fight the columns,
   so they are unset here. */
.rgn-products-grid ul.products li.product,
.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

/* WooCommerce's own column classes must not re-impose a width. */
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 {
  display: grid;
}

.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }

/* Product images vary in aspect ratio between suppliers, which is the
   other reason rows look ragged. A fixed ratio evens them up. */
.rgn-products-grid ul.products li.product img,
.woocommerce ul.products li.product img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  margin: 0 0 12px;
}

/* WooCommerce product card overrides */
.rgn-shop .woocommerce ul.products li.product,
.rgn-product-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  /* padding/margin removed: they were !important and beat the grid rules
     further down the file, leaving cards with no internal spacing. */
  list-style: none;
}
.rgn-shop .woocommerce ul.products li.product:hover,
.rgn-product-card:hover {
  border-color: rgba(255,30,140,0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), var(--glow-magenta);
}
.rgn-shop .woocommerce ul.products li.product a img,
.rgn-product-card img {
  width: 100%;
  /* Was height:220px + cover, which crops supplier photos badly.
     The ratio is set once in the grid block below. */
  height: auto;
}
.rgn-shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
.rgn-product-card h3 {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--color-white);
  padding: 16px 16px 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rgn-shop .woocommerce ul.products li.product .price,
.rgn-product-card .price {
  color: var(--color-teal);
  font-family: var(--font-mono);
  font-size: 1.125rem;
  padding: 4px 16px;
  display: block;
  text-shadow: var(--glow-teal);
}
.rgn-shop .woocommerce ul.products li.product .button,
.rgn-product-card .button {
  display: block;
  margin: 12px 16px 16px;
  padding: 8px;
  text-align: center;
  background: transparent;
  border: 1px solid var(--color-magenta);
  color: var(--color-magenta);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer;
}
.rgn-shop .woocommerce ul.products li.product .button:hover,
.rgn-product-card .button:hover {
  background: var(--color-magenta);
  color: #fff;
  box-shadow: var(--glow-magenta);
}

/* View all products link */
.rgn-shop-footer { text-align: center; margin-top: 48px; }

/* ============================================================
   CATEGORIES
   ============================================================ */
.rgn-categories { background: var(--color-bg); }
.rgn-categories-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.rgn-category-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 16px;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
  display: block;
  color: inherit;
}
.rgn-category-card:hover {
  border-color: var(--color-teal);
  background: rgba(0,255,200,0.05);
  transform: translateY(-4px);
  color: inherit;
}
.rgn-category-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  display: block;
  filter: drop-shadow(0 0 10px rgba(0,255,200,0.4));
}
.rgn-category-name {
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-white);
}

/* ============================================================
   CTA BAND
   ============================================================ */
.rgn-cta-band {
  background:
    linear-gradient(135deg, rgba(155,93,229,0.75) 0%, rgba(255,30,140,0.65) 50%, rgba(0,255,200,0.5) 100%),
    url('assets/images/collage-bg-v2.jpg') center center / cover no-repeat;
  border-top: 1px solid var(--color-border-hot);
  border-bottom: 1px solid var(--color-border-hot);
  padding: 80px 0;
  text-align: center;
}
.rgn-cta-band h2 {
  font-size: clamp(1.8rem, 3vw, 3rem);
  margin-bottom: 16px;
  text-shadow: var(--glow-teal);
}
.rgn-cta-band p {
  color: var(--color-text-dim);
  max-width: 480px;
  margin: 0 auto 32px;
}
.rgn-cta-band .btn { margin: 0 8px; }

/* ============================================================
   FOOTER
   ============================================================ */
.rgn-footer {
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
  padding: 64px 0 0;
}
.rgn-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.rgn-footer-logo {
  margin-bottom: 16px;
}
.rgn-footer-logo img { height: 36px; filter: brightness(0.9); }
.rgn-footer-about {
  font-size: 0.875rem;
  color: var(--color-text-dim);
  line-height: 1.7;
  margin-bottom: 24px;
}
.rgn-footer-social { display: flex; gap: 12px; }
.rgn-footer-social a {
  width: 36px; height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-dim);
  font-size: 14px;
  transition: var(--transition);
}
.rgn-footer-social a:hover {
  border-color: var(--color-teal);
  color: var(--color-teal);
  box-shadow: var(--glow-teal);
}
.rgn-footer-col-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-white);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
.rgn-footer-col ul { list-style: none; }
.rgn-footer-col ul li { margin-bottom: 8px; }
.rgn-footer-col ul li a {
  font-size: 0.875rem;
  color: var(--color-text-dim);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 4px;
}
.rgn-footer-col ul li a:hover { color: var(--color-teal); padding-left: 6px; }
.rgn-footer-col ul li a::before { content: '›'; color: var(--color-teal); }

.rgn-footer-bottom {
  border-top: 1px solid var(--color-border);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
}
.rgn-footer-copyright {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-dim);
  letter-spacing: 0.05em;
}

/* ============================================================
   SINGLE POST / PAGE
   ============================================================ */
.rgn-content-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 24px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: start;
}
.rgn-main { min-width: 0; }
.rgn-post-header { margin-bottom: 32px; }
.rgn-post-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 16px;
}
.rgn-post-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-dim);
  letter-spacing: 0.1em;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.rgn-post-featured-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 40px;
  border: 1px solid var(--color-border);
}
.rgn-post-content {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
}
.rgn-post-content h2, .rgn-post-content h3 {
  margin: 2rem 0 1rem;
  font-size: 1.375rem;
  color: var(--color-teal);
}
.rgn-post-content h3 { font-size: 1.125rem; color: var(--color-white); }
.rgn-post-content p { margin-bottom: 1.2rem; }
.rgn-post-content a { color: var(--color-teal); border-bottom: 1px solid rgba(0,255,200,0.3); }
.rgn-post-content a:hover { color: var(--color-magenta); border-bottom-color: var(--color-magenta); }
.rgn-post-content ul, .rgn-post-content ol {
  padding-left: 24px;
  margin-bottom: 1.2rem;
}
.rgn-post-content li { margin-bottom: 8px; }
.rgn-post-content blockquote {
  border-left: 3px solid var(--color-teal);
  padding: 16px 24px;
  background: rgba(0,255,200,0.05);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 2rem 0;
  color: var(--color-text-dim);
  font-style: italic;
}
.rgn-post-content img {
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  margin: 1rem 0;
}
.rgn-post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.rgn-post-content th {
  background: var(--color-panel);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  text-align: left;
  color: var(--color-teal);
}
.rgn-post-content td {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  font-size: 0.875rem;
}
.rgn-post-content tr:nth-child(even) { background: rgba(255,255,255,0.02); }

/* ============================================================
   SIDEBAR
   ============================================================ */
.rgn-sidebar { position: sticky; top: 90px; }
.rgn-widget {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}
.rgn-widget-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-teal);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.rgn-widget ul { list-style: none; }
.rgn-widget ul li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.875rem;
}
.rgn-widget ul li:last-child { border-bottom: none; }
.rgn-widget ul li a { color: var(--color-text-dim); }
.rgn-widget ul li a:hover { color: var(--color-teal); }

/* Search widget */
.rgn-search-form {
  display: flex;
  gap: 8px;
}
.rgn-search-form input {
  flex: 1;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 12px;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
  transition: var(--transition);
}
.rgn-search-form input:focus { border-color: var(--color-teal); box-shadow: 0 0 0 3px rgba(0,255,200,0.1); }
.rgn-search-form button {
  background: var(--color-teal);
  border: none;
  border-radius: var(--radius);
  padding: 8px 12px;
  color: var(--color-bg);
  cursor: pointer;
  font-size: 14px;
  transition: var(--transition);
}
.rgn-search-form button:hover { background: #00e6b4; }

/* ============================================================
   WOOCOMMERCE FULL OVERRIDES
   ============================================================ */
.woocommerce-page .rgn-main,
.woocommerce .rgn-main { /* already handled by content-wrapper grid */ }

/* WC notices */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  background: var(--color-panel);
  border-left: 4px solid var(--color-teal);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 24px;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 13px;
}
.woocommerce-error { border-left-color: var(--color-magenta); }

/* Checkout / Account forms */
.woocommerce form .form-row label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
}
.woocommerce form .form-row input,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  padding: 12px 16px;
  width: 100%;
  font-family: var(--font-body);
  transition: var(--transition);
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--color-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,255,200,0.1);
}
.woocommerce #place_order,
.woocommerce .button.alt,
.woocommerce button[type="submit"] {
  background: var(--color-teal) !important;
  color: var(--color-bg) !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: none;
  border-radius: var(--radius);
  padding: 12px 24px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--glow-teal);
}
.woocommerce #place_order:hover,
.woocommerce .button.alt:hover,
.woocommerce button[type="submit"]:hover {
  background: #00e6b4 !important;
  box-shadow: 0 0 40px rgba(0,255,200,0.8);
}

/* Cart table */
.woocommerce-cart-form table,
.woocommerce table {
  background: var(--color-panel);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}
.woocommerce table th {
  background: rgba(0,255,200,0.05);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-teal);
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border);
}
.woocommerce table td {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--color-text);
  font-size: 0.875rem;
}

/* ============================================================
   EDD (Easy Digital Downloads)
   ============================================================ */
.edd-purchase-link,
.edd-submit {
  background: var(--color-teal) !important;
  color: var(--color-bg) !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: none;
  border-radius: var(--radius);
  padding: 12px 24px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--glow-teal);
  font-size: 13px;
}
.edd-purchase-link:hover, .edd-submit:hover {
  background: #00e6b4 !important;
}
#edd_purchase_form input, #edd_purchase_form select {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--radius);
  padding: 8px 12px;
}

/* ============================================================
   PAGE HERO (non-home)
   ============================================================ */
.rgn-page-hero {
  background:
    linear-gradient(135deg, rgba(8,11,16,0.92) 0%, rgba(13,18,32,0.85) 100%),
    url('assets/images/hero-bg-v2.jpg') center top / cover no-repeat;
  border-bottom: 1px solid var(--color-border);
  padding: 56px 24px;
  text-align: center;
}
.rgn-breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.rgn-breadcrumb a { color: var(--color-teal); }
.rgn-breadcrumb span { margin: 0 8px; }

/* ============================================================
   PAGINATION
   ============================================================ */
.rgn-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 60px;
  flex-wrap: wrap;
}
.rgn-pagination a,
.rgn-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-dim);
  transition: var(--transition);
}
.rgn-pagination a:hover,
.rgn-pagination .current {
  border-color: var(--color-teal);
  color: var(--color-teal);
  background: rgba(0,255,200,0.08);
}

/* ============================================================
   COMMENTS
   ============================================================ */
.rgn-comments { margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--color-border); }
.rgn-comments h3 {
  font-size: 1.125rem;
  margin-bottom: 24px;
  color: var(--color-teal);
}
.comment {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
}
.comment-author { font-family: var(--font-mono); font-size: 13px; color: var(--color-white); margin-bottom: 8px; }
.comment-content { font-size: 0.875rem; color: var(--color-text-dim); }

#respond { margin-top: 40px; }
#respond h3 { font-size: 1.125rem; margin-bottom: 20px; color: var(--color-teal); }
#respond input[type="text"],
#respond input[type="email"],
#respond textarea {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  padding: 12px 16px;
  width: 100%;
  font-family: var(--font-body);
  margin-bottom: 16px;
  transition: var(--transition);
  display: block;
}
#respond input:focus, #respond textarea:focus {
  border-color: var(--color-teal);
  outline: none;
}
#respond textarea { min-height: 120px; resize: vertical; }
#respond input[type="submit"],
#submit {
  background: var(--color-teal);
  color: var(--color-bg);
  border: none;
  border-radius: var(--radius);
  padding: 12px 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
}
#respond input[type="submit"]:hover { background: #00e6b4; }

/* ============================================================
   UTILITY
   ============================================================ */
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-32 { margin-top: 32px; }
.mb-32 { margin-bottom: 32px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============================================================
   RESPONSIVE — Mobile-first, full overhaul
   Breakpoints: 1200 · 1024 · 768 · 480 · 360
   ============================================================ */

/* ── 1200px — large tablet / small desktop ── */
@media (max-width: 1200px) {
  .container { padding: 0 20px; }
  .rgn-hero-title { font-size: clamp(2rem, 5vw, 3.8rem); }
  .rgn-products-grid ul.products,
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
  .rgn-footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 24px; }
}

/* ── 1024px — tablet landscape ── */
@media (max-width: 1024px) {
  /* Header */
  .rgn-header-inner { padding: 12px 20px; }
  .rgn-nav ul { gap: 0; }
  .rgn-nav ul li > a { padding: 8px 8px; font-size: 11px; }

  /* Hero */
  .rgn-hero-content {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 64px 20px;
  }
  .rgn-hero-title { font-size: clamp(1.9rem, 4vw, 3rem); }

  /* Grids */
  .rgn-products-grid ul.products,
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
  .rgn-categories-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .rgn-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .rgn-posts-grid { grid-template-columns: repeat(2, 1fr); }
  .rgn-posts-grid .rgn-card:first-child { grid-column: span 2; }

  /* Content + sidebar stack */
  .rgn-content-wrapper { grid-template-columns: 1fr; gap: 32px; }
  .rgn-sidebar { position: static; }

  /* Footer */
  .rgn-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* WooCommerce */
  .woocommerce-cart-form table { font-size: 14px; }
  .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Section padding */
  .section { padding: 64px 0; }
}

/* ── 768px — tablet portrait / large phone ── */
@media (max-width: 768px) {
  /* Announcement bar */
  .rgn-announcement-bar .ticker-item { padding: 0 24px; font-size: 11px; }

  /* Header — hide nav, show hamburger */
  .rgn-nav { display: none; }
  .rgn-header-actions .rgn-cart-icon { padding: 8px 12px; }
  .rgn-header-actions .rgn-cart-icon span:not(.cart-count) { display: none; }
  .rgn-mobile-toggle { display: block; }
  .rgn-logo img { height: 36px; }

  /* Hero — single column */
  .rgn-hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 64px 20px 56px;
    gap: 32px;
  }
  .rgn-hero-visual { display: none; }
  .rgn-hero-eyebrow { justify-content: center; }
  .rgn-hero-ctas { justify-content: center; flex-wrap: wrap; gap: 12px; }
  .rgn-hero-subtitle { margin: 0 auto 32px; }
  .rgn-hero-title { font-size: clamp(1.7rem, 6vw, 2.6rem); }

  /* Stats */
  .rgn-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    text-align: center;
  }
  .rgn-stat-number { font-size: 2rem; }

  /* Categories */
  .rgn-categories-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rgn-category-card { padding: 24px 12px; }
  .rgn-category-icon { font-size: 2rem; }
  .rgn-category-name { font-size: 0.75rem; }

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

  /* Posts */
  .rgn-posts-grid { grid-template-columns: 1fr; gap: 16px; }
  .rgn-posts-grid .rgn-card:first-child { grid-column: span 1; }
  .rgn-posts-grid .rgn-card:first-child .rgn-card-image { aspect-ratio: 16/9; }

  /* CTA band */
  .rgn-cta-band { padding: 56px 20px; }
  .rgn-cta-band h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
  .rgn-cta-band .btn { margin: 4px 4px; }

  /* Content wrapper */
  .rgn-content-wrapper { padding: 40px 20px; }
  .rgn-post-title { font-size: clamp(1.4rem, 5vw, 2rem); }

  /* Sidebar search */
  .rgn-search-form input { font-size: 14px; }

  /* Footer */
  .rgn-footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .rgn-footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 16px 20px;
  }
  .rgn-footer-social { justify-content: flex-start; }

  /* WooCommerce */
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
  .woocommerce-checkout .col-1,
  .woocommerce-checkout .col-2 { float: none !important; width: 100% !important; }
  .woocommerce table.shop_table { font-size: 13px; }
  .woocommerce table.shop_table td,
  .woocommerce table.shop_table th { padding: 8px 12px; }

  /* Comments */
  .comment { padding: 16px; }

  /* Section padding */
  .section { padding: 56px 0; }

  /* Buttons — full width on small screens when stacked */
  .rgn-hero-ctas .btn { min-width: 160px; justify-content: center; }

  /* Homepage HTML sections — override inline grid styles */
  .rgn-home-brands-grid,
  .rgn-home-cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .rgn-home-reviews-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 480px — phone ── */
@media (max-width: 480px) {
  /* Header */
  .rgn-header-inner { padding: 12px 16px; }
  .rgn-logo img { height: 32px; }
  .rgn-header-actions { gap: 8px; }

  /* Hero */
  .rgn-hero-content { padding: 48px 16px 40px; }
  .rgn-hero-title { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .rgn-hero-subtitle { font-size: 14px; }
  .rgn-hero-ctas { flex-direction: column; align-items: center; }
  .rgn-hero-ctas .btn { width: 100%; max-width: 280px; justify-content: center; }

  /* Stats */
  .rgn-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rgn-stat-number { font-size: 1.75rem; }
  .rgn-stat-label { font-size: 10px; }

  /* Products — single column */
  .rgn-products-grid { grid-template-columns: 1fr; gap: 16px; }
  .rgn-shop .woocommerce ul.products { grid-template-columns: 1fr !important; }

  /* Categories — 2 column stays but smaller */
  .rgn-categories-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .rgn-category-card { padding: 20px 8px; }

  /* Posts */
  .rgn-card-title { font-size: 0.875rem; }
  .rgn-card-body { padding: 16px; }

  /* Footer */
  .rgn-footer-about { font-size: 13px; }
  .rgn-footer-col-title { font-size: 0.75rem; }
  .rgn-footer-col ul li a { font-size: 13px; }

  /* WooCommerce single product */
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { font-size: 12px; padding: 8px 12px; }

  /* Announcement bar — slow down for readability */
  .rgn-announcement-bar .ticker-track { animation-duration: 40s; }

  /* Section spacing */
  .section { padding: 40px 0; }
  .container { padding: 0 16px; }

  /* Homepage HTML block overrides */
  .rgn-home-brands-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .rgn-home-cats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .rgn-home-trust-bar { flex-direction: column !important; gap: 8px !important; }
}

/* ── 360px — small phones ── */
@media (max-width: 360px) {
  .rgn-hero-title { font-size: 1.375rem; }
  .rgn-categories-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .rgn-products-grid { grid-template-columns: 1fr; }
  .rgn-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .rgn-footer-social a { width: 30px; height: 30px; font-size: 12px; }
  .btn { padding: 12px 20px; font-size: 11px; }
  .container { padding: 0 12px; }
}

/* ── Homepage HTML block fluid fixes ──
   These target the inline-styled sections built in the Classic Editor
   so they collapse properly on mobile without touching the page HTML
   ── */
@media (max-width: 768px) {
  /* Trust bar */
  div[style*="justify-content:space-around"][style*="display:flex"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  /* Brand grid */
  div[style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  /* Category tile grid */
  div[style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Review grid */
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Hero text centering */
  div[style*="min-height:480px"] h1 { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; }
  div[style*="min-height:480px"] p { font-size: 14px !important; }
  div[style*="min-height:480px"] a[style*="display:inline-block"] {
    display: block !important;
    margin: 4px auto !important;
    max-width: 260px !important;
    text-align: center !important;
  }
  /* Section headings inside HTML blocks */
  div[style*="padding:64px 24px"] h2 { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
  /* Category tiles — fix height on mobile */
  a[style*="aspect-ratio:3/4"] { aspect-ratio: 4/3 !important; }
}

@media (max-width: 480px) {
  div[style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  div[style*="padding:64px 24px"] {
    padding: 40px 16px !important;
  }
  div[style*="padding:56px 24px"] {
    padding: 40px 16px !important;
  }
  /* Email signup strip */
  div[style*="background:#ff1e8c"] { padding: 40px 16px !important; }
  div[style*="background:#ff1e8c"] h2 { font-size: 1.375rem !important; }
}

/* ── Touch targets — all tappable elements at least 44px tall ── */
@media (max-width: 768px) {
  .rgn-nav ul li a,
  .rgn-footer-col ul li a,
  .rgn-category-card,
  .woocommerce ul.products li.product a,
  .rgn-card-link { min-height: 44px; }

  /* Prevent text too small on mobile */
  .rgn-card-meta,
  .rgn-footer-copyright,
  .rgn-announcement-bar .ticker-item { font-size: 11px; }
}

/* ── Fluid images everywhere ── */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* ── Prevent horizontal scroll from fixed-width elements ── */
* { max-width: 100%; }
pre, code { overflow-x: auto; }
table { overflow-x: auto; display: block; max-width: 100%; }
.woocommerce table,
.woocommerce-cart-form table {
  display: table;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   REVIEWS CAROUSEL — horizontal scroll, 1 card per view mobile
   ============================================================ */
.rgn-reviews-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.rgn-reviews-carousel::-webkit-scrollbar { display: none; }

.rgn-review-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  scroll-snap-align: start;
  /* Desktop: fit 3 per row */
  flex: 0 0 calc(33.333% - 14px);
  min-width: 260px;
}
.rgn-review-stars { color: var(--color-teal); font-size: 15px; margin-bottom: 12px; letter-spacing: 2px; }
.rgn-review-text  { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.7; margin-bottom: 16px; font-style: italic; }
.rgn-review-author {
  display: flex; align-items: center; gap: 8px;
}
.rgn-review-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-bg-3);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.rgn-review-name  { color: #fff; font-family: var(--font-mono); font-size: 12px; display: block; }
.rgn-review-badge { color: var(--color-text-dim); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }

/* Carousel dots */
.rgn-carousel-dots {
  display: none; /* shown only on mobile */
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.rgn-carousel-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-border);
  border: none; cursor: pointer; padding: 0;
  transition: var(--transition);
}
.rgn-carousel-dot.active { background: var(--color-teal); width: 20px; border-radius: 3px; }

@media (max-width: 768px) {
  /* ── Header: hide account label, shrink everything ── */
  .rgn-account-label { display: none; }
  .rgn-account-btn {
    padding: 8px 8px;
    border-radius: var(--radius);
    min-width: 36px;
    height: 36px;
    justify-content: center;
  }
  .rgn-account-icon { font-size: 16px; }
  .rgn-search-toggle { width: 34px; height: 34px; font-size: 14px; }
  .rgn-cart-icon { padding: 8px 8px; min-width: 36px; height: 36px; justify-content: center; }
  .rgn-header-actions { gap: 4px; }
  .rgn-mobile-toggle { display: flex; }

  /* Logo — clamp size on small screens */
  .rgn-logo-text {
    font-size: clamp(0.6rem, 3.5vw, 0.9rem);
    max-width: 130px;
  }
  .rgn-logo-icon { font-size: 18px; }

  /* Reviews — 1 card full width per snap */
  .rgn-review-card {
    flex: 0 0 calc(100% - 32px);
    min-width: calc(100% - 32px);
  }
  .rgn-carousel-dots { display: flex; }

  /* Header inner — tighter on mobile */
  .rgn-header-inner { padding: 8px 12px; gap: 8px; }
}

@media (max-width: 480px) {
  .rgn-logo-text { max-width: 100px; font-size: clamp(0.55rem, 3.5vw, 0.8rem); }
  .rgn-logo-icon { font-size: 16px; }
  .rgn-account-btn, .rgn-search-toggle, .rgn-cart-icon { width: 32px; height: 32px; padding: 4px; }
  .rgn-header-actions { gap: 4px; }
}

/* ============================================================
   POST META — emoji icon sizing
   WordPress converts emoji to <img class="emoji"> — target those
   ============================================================ */
.rgn-post-meta { align-items: center; }

.rgn-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* The icon wrapper — constrains WordPress emoji <img> tags */
.rgn-meta-icon {
  display: inline-flex;
  align-items: center;
  width: 14px;
  height: 14px;
  overflow: hidden;
  flex-shrink: 0;
}

/* WordPress emoji images inside the meta icon span */
.rgn-meta-icon img.emoji,
.rgn-meta-icon img {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

/* Also catch any emoji that WordPress renders outside the icon span
   but still inside the post meta row */
.rgn-post-meta img.emoji {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  vertical-align: middle !important;
  margin: 0 2px !important;
}

/* ============================================================
   EMAIL SIGNUP BAND
   ============================================================ */
.rgn-cta-band { padding: 64px 0; }

.rgn-signup-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.rgn-signup-text h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #fff;
  margin-bottom: 12px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

.rgn-signup-text p {
  color: rgba(255,255,255,0.78);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.rgn-email-form { width: 100%; }

.rgn-email-fields {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.rgn-email-fields input[type="email"] {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  transition: var(--transition);
  backdrop-filter: blur(8px);
}

.rgn-email-fields input[type="email"]::placeholder {
  color: rgba(255,255,255,0.45);
}

.rgn-email-fields input[type="email"]:focus {
  outline: none;
  border-color: var(--color-teal);
  background: rgba(255,255,255,0.16);
  box-shadow: 0 0 0 3px rgba(0,255,200,0.15);
}

.rgn-email-fields .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.rgn-form-note {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  margin: 0;
}

/* Success state */
.rgn-email-form.submitted .rgn-email-fields { display: none; }
.rgn-form-success {
  display: none;
  background: rgba(0,255,200,0.12);
  border: 1px solid rgba(0,255,200,0.35);
  border-radius: var(--radius);
  padding: 12px 20px;
  color: var(--color-teal);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.rgn-email-form.submitted .rgn-form-success { display: block; }

@media (max-width: 768px) {
  .rgn-signup-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center !important;
  }
  .rgn-email-fields {
    flex-direction: column !important;
  }
  .rgn-email-fields .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   ACCESSIBILITY
   The theme had no visible focus state and no skip link. Keyboard users
   could not see where they were, and had to tab the whole nav on every page.
   ========================================================================== */

.rgn-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--color-teal);
  color: #05080d;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}

/* Only revealed on keyboard focus, so it never disturbs the visual design. */
.rgn-skip-link:focus {
  left: 0;
  outline: 2px solid var(--color-magenta);
  outline-offset: 2px;
}

/* :focus-visible keeps the ring for keyboard users without putting an outline
   round everything a mouse user clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Standard WordPress a11y class -- required by html5 theme support and used
   by core markup such as the search form label. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  clip-path: none;
  background: var(--color-panel);
  color: var(--color-teal);
  height: auto;
  width: auto;
  padding: 12px 20px;
  z-index: 100000;
  border-radius: 6px;
}

/* ==========================================================================
   POLISH LAYER
   Neon stays loud. Everything around it becomes consistent — which is what
   actually reads as "professional". Loud colour plus disciplined craft is a
   deliberate look; loud colour plus inconsistent craft looks unfinished.
   ========================================================================== */

/* --------------------------------------------------------------
   Alignment: one container, one gutter, everywhere.
   Sections previously set their own horizontal padding, so content
   edges did not line up between one section and the next as you
   scrolled. This is the single most visible alignment problem on
   any page.
   -------------------------------------------------------------- */

.container,
.rgn-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
  box-sizing: border-box;
}

/* Reading width for article bodies. Long lines are the most common
   readability failure on wide screens — the eye loses the start of
   the next line somewhere past ~75 characters. */
.rgn-post-content > p,
.rgn-post-content > ul,
.rgn-post-content > ol,
.rgn-post-content > blockquote,
.rgn-post-content > h2,
.rgn-post-content > h3 {
  max-width: 68ch;
}

/* --------------------------------------------------------------
   Vertical rhythm
   -------------------------------------------------------------- */

.rgn-post-content h2 { margin: var(--sp-12) 0 var(--sp-4); }
.rgn-post-content h3 { margin: var(--sp-8) 0 var(--sp-3); }
.rgn-post-content p  { margin: 0 0 var(--sp-6); }
.rgn-post-content ul,
.rgn-post-content ol { margin: 0 0 var(--sp-6) var(--sp-6); }
.rgn-post-content li { margin-bottom: var(--sp-2); }

/* First heading in an article should not push away from the title. */
.rgn-post-content > h2:first-child,
.rgn-post-content > h3:first-child { margin-top: 0; }

/* --------------------------------------------------------------
   Consistent card and panel treatment

   Every surface in the theme now shares one border, one radius and
   one hover response. Previously each component invented its own.
   -------------------------------------------------------------- */

.rgn-card,
.rgn-panel,
.rgn-widget,
.rgn-ra-box,
.rgn-ch-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

/* One hover response, sitewide. Lift plus border, never a glow —
   glow on hover on a neon theme turns the whole page into noise. */
a.rgn-card:hover,
a.rgn-ch-card:hover,
.rgn-card-link:hover {
  border-color: var(--color-teal);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------
   Restraint on the glow

   Neon is the identity, so it stays — but only on things that are
   meant to shout. Body copy, article text and table cells never
   glow, because glowing text at paragraph length is genuinely
   tiring to read rather than stylish.
   -------------------------------------------------------------- */

.rgn-post-content,
.rgn-post-content p,
.rgn-post-content li,
.rgn-card-excerpt,
.rgn-ra-table td,
.rgn-ch-card-meta {
  text-shadow: none;
}

/* --------------------------------------------------------------
   Micro-labels

   The uppercase mono labels are a strong part of the identity.
   Making them identical everywhere is most of what "tidy" means.
   -------------------------------------------------------------- */

.rgn-eyebrow,
.rgn-label,
.rgn-ra-stat-label,
.rgn-ch-pill,
.rgn-card-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------
   Buttons: one height, one shape
   -------------------------------------------------------------- */

.btn,
.rgn-btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* --------------------------------------------------------------
   Images and media never break the grid
   -------------------------------------------------------------- */

.rgn-post-content img,
.rgn-post-content iframe,
.rgn-post-content video {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------
   Tables in articles
   -------------------------------------------------------------- */

.rgn-post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-6);
  font-size: 0.875rem;
}

.rgn-post-content th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--color-border);
}

.rgn-post-content td {
  padding: var(--sp-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --------------------------------------------------------------
   Respect reduced motion
   -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------
   Header: logged-out entry points

   "Join" is the primary action and is styled to stand out; "Log in"
   stays quiet, because most visitors who see it are not members yet.
   -------------------------------------------------------------- */

.rgn-register-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-teal);
  color: #05080d;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.rgn-register-btn:hover {
  background: var(--color-magenta);
  color: #fff;
  transform: translateY(-1px);
}

.rgn-login-btn .rgn-account-label {
  font-size: 0.75rem;
}

@media (max-width: 768px) {
  /* On a phone the header is tight, so the label goes and the button
     shortens rather than pushing the logo off screen. */
  .rgn-login-btn .rgn-account-label {
    display: none;
  }
  .rgn-register-btn {
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.75rem;
  }
}

/* --------------------------------------------------------------
   Community section
   -------------------------------------------------------------- */

.rgn-community-subhead {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin: var(--sp-8) 0 var(--sp-4);
}

.rgn-community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-6);
  align-items: start;
}

.rgn-community-cta { margin-top: var(--sp-8); }


/* ==========================================================================
   PRODUCT GRID — single source of truth

   This block is last in the file and uses !important on the layout
   properties, because WooCommerce's own stylesheet loads after the theme's
   and sets float:left, percentage widths and clear:both on every product.
   Those three fight CSS grid, and were what pushed the fourth card out of
   the row onto its own line.

   Everything about product layout is HERE. Earlier partial attempts have
   been removed rather than layered on top of, so there is one place to look.
   ========================================================================== */

/* The wrapper is not the grid. The [products] shortcode puts a single
   <ul class="products"> inside it, so a grid on the wrapper had one child
   and gave it a quarter of the width. */
.rgn-products-grid,
.rgn-shop .woocommerce {
  display: block !important;
}

.rgn-products-grid ul.products,
.woocommerce ul.products,
.rgn-shop .woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  float: none !important;
}

/* WooCommerce sets width:22.05%, float:left and clear:both on nth items.
   All three must go, or items break out of the grid rows. */
.rgn-products-grid ul.products li.product,
.woocommerce ul.products li.product,
.rgn-shop .woocommerce ul.products li.product {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px !important;
  float: none !important;
  clear: none !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* WooCommerce's column classes must not re-impose their own widths. */
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 {
  display: grid !important;
}

/* Images: one ratio, so rows are level whatever the supplier sent. */
.rgn-products-grid ul.products li.product img,
.woocommerce ul.products li.product img,
.rgn-shop .woocommerce ul.products li.product a img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  background: #fff;
  border-radius: var(--radius);
  margin: 0 0 12px !important;
}

/* Titles: two lines with an ellipsis, so cards match height. */
.rgn-products-grid ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.rgn-shop .woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  min-height: 2.8em !important;
  margin: 0 0 8px !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  overflow-wrap: break-word;
}

/* Price and button pinned to the bottom, so buttons line up across a row. */
.woocommerce ul.products li.product .price,
.rgn-shop .woocommerce ul.products li.product .price {
  margin-top: auto !important;
  padding-top: 8px !important;
  margin-bottom: 0 !important;
}

.woocommerce ul.products li.product .button,
.rgn-shop .woocommerce ul.products li.product .button {
  margin: 12px 0 0 !important;
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

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

@media (max-width: 900px) {
  .rgn-products-grid ul.products,
  .woocommerce ul.products,
  .rgn-shop .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

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

/* --------------------------------------------------------------
   Product grid: non-product children

   THE CAUSE OF THE EMPTY FIRST CELL.
   WooCommerce puts an empty <div class="woocommerce-notices-wrapper">
   inside the product list. While the <ul> was a plain list that div was
   invisible and harmless. The moment the <ul> became a grid, that empty
   div became a GRID ITEM and took cell 1 — pushing the first three
   products into columns 2, 3 and 4 and bumping the fourth onto its own
   row. That is exactly the gap in the top-left of the shop section.

   Anything in the list that is not a product is either hidden when
   empty, or made to span the full row so it can never occupy a column.
   -------------------------------------------------------------- */

.rgn-products-grid ul.products > *:not(li.product),
.woocommerce ul.products > *:not(li.product),
.rgn-shop .woocommerce ul.products > *:not(li.product) {
  grid-column: 1 / -1 !important;
}

/* An empty notices wrapper still creates a row gap, so remove it. */
.woocommerce ul.products > .woocommerce-notices-wrapper:empty,
.woocommerce ul.products > div:empty,
.woocommerce ul.products > p:empty {
  display: none !important;
}

/* Belt and braces: a notices wrapper anywhere it does not belong. */
.rgn-products-grid .woocommerce-notices-wrapper:empty {
  display: none !important;
}

/* --------------------------------------------------------------
   THE EMPTY FIRST CELL — actual cause

   WooCommerce applies a legacy clearfix to the product list:
       ul.products::before, ul.products::after { content: ""; display: table; }

   In a normal list those are invisible and harmless. In a GRID they
   become grid items. ::before therefore occupied cell 1, pushing the
   first three products into columns 2, 3 and 4 and bumping the fourth
   onto its own row — the gap visible at the top-left of the shop.

   A :not(li.product) selector cannot fix this, because pseudo-elements
   are not children and are never matched by :not(). They have to be
   removed explicitly.
   -------------------------------------------------------------- */

.rgn-products-grid ul.products::before,
.rgn-products-grid ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.rgn-shop .woocommerce ul.products::before,
.rgn-shop .woocommerce ul.products::after,
.woocommerce ul.products.columns-1::before,
.woocommerce ul.products.columns-2::before,
.woocommerce ul.products.columns-3::before,
.woocommerce ul.products.columns-4::before,
.woocommerce ul.products.columns-5::before,
.woocommerce ul.products.columns-6::before {
  content: none !important;
  display: none !important;
}

/* The same clearfix sits on the WooCommerce wrapper div and on the
   shop section, where it can add a stray row in any grid context. */
.rgn-products-grid .woocommerce::before,
.rgn-products-grid .woocommerce::after,
.rgn-shop .woocommerce::before,
.rgn-shop .woocommerce::after {
  content: none !important;
  display: none !important;
}