<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Cloudflare Turnstile API -->
  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CyberSmrt Store | Support Our Mission</title>
  <meta name="description" content="Shop CyberSmrt gear and support our mission to bridge the cybersecurity skills gap. Every purchase funds programs for underserved communities.">

  <!-- Orbitron font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&display=swap" rel="stylesheet">

  <!-- Theme System -->
  <link rel="stylesheet" href="/assets/css/theme.css">
  <script src="/assets/js/theme.js"></script>

  <!-- Translation System -->
  <script src="/assets/js/translator.js"></script>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
      color: var(--text-primary);
      line-height: 1.6;
      transition: background 0.3s ease, color 0.3s ease;
    }

    /* Hero Section */
    .store-hero {
      position: relative;
      z-index: 1;
      background: linear-gradient(135deg, #0f1729 0%, #4a1d6e 50%, #6b3d99 100%);
      padding: 4rem 2rem;
      text-align: center;
      border-radius: 20px;
      max-width: 1200px;
      margin: 80px auto 1.5rem;
    }

    .hero-content {
      max-width: 900px;
      margin: 0 auto;
    }

    .store-badge {
      display: inline-block;
      background: rgba(255, 255, 255, 0.2);
      color: white;
      padding: 0.5rem 1.25rem;
      border-radius: 25px;
      font-size: 0.9rem;
      font-weight: 600;
      margin-bottom: 1.5rem;
    }

    .store-hero h1 {
      font-family: "Orbitron", system-ui, sans-serif;
      font-size: 3.5rem;
      font-weight: 900;
      margin-bottom: 1.5rem;
      letter-spacing: 0.02em;
      color: white;
      line-height: 1.1;
    }

    .store-hero .tagline {
      font-size: 1.4rem;
      color: white;
      opacity: 0.95;
      margin-bottom: 2.5rem;
      font-weight: 500;
    }

    /* Shopping Cart Indicator */
    .cart-indicator {
      position: fixed;
      top: 130px;
      right: 2rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 1rem 1.5rem;
      border-radius: 50px;
      box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
      cursor: pointer;
      transition: all 0.3s;
      z-index: 1001;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-weight: 600;
    }

    .cart-indicator:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
    }

    .cart-count {
      background: white;
      color: #667eea;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.9rem;
    }

    /* Content Sections */
    .content-section {
      max-width: 1400px;
      margin: 0 auto;
      padding: 2.5rem 2rem;
    }

    .section-header {
      text-align: center;
      margin-bottom: 3rem;
    }

    .section-header h2 {
      font-family: "Orbitron", system-ui, sans-serif;
      font-size: 2.5rem;
      font-weight: 900;
      margin-bottom: 1rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .section-intro {
      font-size: 1.2rem;
      color: var(--text-secondary);
      max-width: 700px;
      margin: 0 auto;
    }

    /* Product Grid */
    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 2.5rem;
      margin-top: 3rem;
    }

    .product-card {
      background: var(--card-bg);
      border: 2px solid var(--card-border);
      border-radius: 20px;
      overflow: hidden;
      transition: all 0.3s;
      display: flex;
      flex-direction: column;
    }

    .product-card:hover {
      transform: translateY(-5px);
      border-color: #667eea;
      box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
    }

    .product-image {
      width: 100%;
      aspect-ratio: 1;
      background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .product-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .product-badge {
      position: absolute;
      top: 1rem;
      left: 1rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 0.4rem 0.9rem;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 700;
    }

    .product-info {
      padding: 2rem;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .product-category {
      color: #667eea;
      font-size: 0.85rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.5rem;
    }

    .product-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: 0.75rem;
    }

    .product-description {
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 1.5rem;
      flex-grow: 1;
    }

    .product-pricing {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.5rem;
    }

    .product-price {
      font-size: 2rem;
      font-weight: 900;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .product-impact {
      font-size: 0.85rem;
      color: var(--text-secondary);
      text-align: right;
    }

    .product-options {
      margin-bottom: 1.5rem;
    }

    .option-group {
      margin-bottom: 1rem;
    }

    .option-label {
      display: block;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-heading);
      margin-bottom: 0.5rem;
    }

    .option-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .option-btn {
      padding: 0.5rem 1rem;
      border: 2px solid var(--card-border);
      background: transparent;
      color: var(--text-primary);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      font-weight: 500;
    }

    .option-btn:hover {
      border-color: #667eea;
      background: rgba(102, 126, 234, 0.1);
    }

    .option-btn.selected {
      border-color: #667eea;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }

    .option-btn.out-of-stock {
      opacity: 0.4;
      cursor: not-allowed;
      text-decoration: line-through;
      border-color: var(--text-secondary);
      color: var(--text-secondary);
    }

    .option-btn.out-of-stock:hover {
      border-color: var(--text-secondary);
      background: transparent;
    }

    .add-to-cart-btn {
      width: 100%;
      padding: 1rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 12px;
      font-weight: 700;
      font-size: 1.05rem;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .add-to-cart-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }

    .add-to-cart-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    /* Cart Sidebar */
    .cart-sidebar {
      position: fixed;
      top: 0;
      right: -450px;
      width: 450px;
      height: 100vh;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-left: 2px solid var(--card-border);
      box-shadow: -4px 0 30px rgba(0, 0, 0, 0.5);
      transition: right 0.3s ease;
      z-index: 2000;
      display: flex;
      flex-direction: column;
    }

    [data-theme="dark"] .cart-sidebar {
      background: rgba(26, 32, 44, 0.98);
    }

    .cart-sidebar.open {
      right: 0;
    }

    .cart-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
      z-index: 1999;
    }

    .cart-overlay.active {
      opacity: 1;
      pointer-events: all;
    }

    .cart-header {
      padding: 2rem;
      border-bottom: 2px solid var(--card-border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .cart-header h2 {
      font-family: "Orbitron", system-ui, sans-serif;
      font-size: 1.8rem;
      font-weight: 900;
      color: var(--text-heading);
    }

    .cart-header-actions {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .empty-cart-btn {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 0.5rem;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
    }

    .empty-cart-btn:hover {
      color: #dc2626;
      background: rgba(220, 38, 38, 0.1);
    }

    .empty-cart-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .close-cart-btn {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 1.5rem;
      padding: 0.5rem;
      transition: color 0.2s;
    }

    .close-cart-btn:hover {
      color: var(--text-heading);
    }

    .cart-items {
      flex-grow: 1;
      overflow-y: auto;
      padding: 2rem;
    }

    .cart-item {
      display: flex;
      gap: 1.5rem;
      padding: 1.5rem 0;
      border-bottom: 1px solid var(--card-border);
    }

    .cart-item-image {
      width: 80px;
      height: 80px;
      border-radius: 12px;
      background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
      flex-shrink: 0;
    }

    .cart-item-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
    }

    .cart-item-details {
      flex-grow: 1;
    }

    .cart-item-title {
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: 0.25rem;
    }

    .cart-item-options {
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-bottom: 0.5rem;
    }

    .cart-item-price {
      font-weight: 700;
      color: #667eea;
    }

    .remove-item-btn {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 0.85rem;
      text-decoration: underline;
      padding: 0;
      margin-top: 0.5rem;
    }

    .remove-item-btn:hover {
      color: #dc2626;
    }

    .cart-empty {
      text-align: center;
      padding: 4rem 2rem;
      color: var(--text-secondary);
    }

    .cart-empty-icon {
      font-size: 4rem;
      margin-bottom: 1rem;
      opacity: 0.5;
    }

    .cart-footer {
      padding: 2rem;
      border-top: 2px solid var(--card-border);
    }

    .cart-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
      font-size: 1.3rem;
      font-weight: 700;
    }

    .cart-total-label {
      color: var(--text-heading);
    }

    .cart-total-amount {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 2rem;
    }

    .checkout-email-group {
      margin-bottom: 1.5rem;
    }

    .checkout-email-label {
      display: block;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.5rem;
    }

    .checkout-email-input {
      width: 100%;
      padding: 0.875rem;
      border: 2px solid var(--card-border);
      border-radius: 8px;
      background: var(--card-bg);
      color: var(--text-primary);
      font-size: 1rem;
      transition: all 0.2s;
    }

    .checkout-email-input:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .checkout-email-input::placeholder {
      color: var(--text-secondary);
      opacity: 0.6;
    }

    .checkout-email-input.error {
      border-color: #ef4444;
      background: rgba(239, 68, 68, 0.05);
    }

    .checkout-email-input.error:focus {
      border-color: #ef4444;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

    .email-error-message {
      color: #ef4444;
      font-size: 0.875rem;
      margin-top: 0.5rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      animation: fadeIn 0.2s ease;
    }

    .email-error-message::before {
      content: '⚠';
      font-size: 1rem;
    }

    .checkout-btn {
      width: 100%;
      padding: 1.2rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 12px;
      font-weight: 700;
      font-size: 1.1rem;
      cursor: pointer;
      transition: all 0.3s;
    }

    .checkout-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    }

    .checkout-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    /* Impact Callout */
    .impact-callout {
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
      border: 2px solid rgba(102, 126, 234, 0.3);
      border-radius: 20px;
      padding: 2.5rem;
      margin: 1.5rem 0;
      text-align: center;
    }

    .impact-callout h3 {
      font-size: 1.8rem;
      color: #667eea;
      margin-bottom: 1rem;
      font-weight: 700;
    }

    .impact-callout p {
      color: var(--text-secondary);
      line-height: 1.8;
      font-size: 1.1rem;
    }

    /* Categories Filter */
    .category-filter {
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
      margin-top: 2rem;
    }

    .category-btn {
      padding: 0.75rem 1.5rem;
      border: 2px solid var(--card-border);
      background: var(--card-bg);
      color: var(--text-primary);
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.2s;
      font-weight: 600;
    }

    .category-btn:hover {
      border-color: #667eea;
      background: rgba(102, 126, 234, 0.1);
    }

    .category-btn.active {
      border-color: #667eea;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }

    /* Product Card Carousel */
    .product-image-carousel {
      position: relative;
      width: 100%;
      aspect-ratio: 1;
      background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
      overflow: hidden;
    }

    .carousel-images {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .carousel-images img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .carousel-images img.active {
      opacity: 1;
    }

    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.7);
      color: white;
      border: 2px solid rgba(255, 255, 255, 0.8);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      z-index: 10;
      opacity: 0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .product-card:hover .carousel-btn {
      opacity: 1;
    }

    .carousel-btn:hover {
      background: rgba(0, 0, 0, 0.9);
      border-color: white;
      transform: translateY(-50%) scale(1.1);
    }

    .carousel-prev {
      left: 10px;
    }

    .carousel-next {
      right: 10px;
    }

    .carousel-dots {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 10;
    }

    .carousel-dots .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.6);
      border: 2px solid rgba(255, 255, 255, 0.9);
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .carousel-dots .dot.active {
      background: rgba(102, 126, 234, 0.9);
      border-color: white;
      width: 28px;
      border-radius: 5px;
    }

    .carousel-dots .dot:hover {
      background: rgba(102, 126, 234, 0.7);
      border-color: white;
      transform: scale(1.1);
    }

    /* Simplified Product Card Info */
    .product-info-simple {
      padding: 1.5rem;
    }

    .product-category-tag {
      display: inline-block;
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
      color: #667eea;
      padding: 0.3rem 0.8rem;
      border-radius: 15px;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.75rem;
    }

    .product-title-simple {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: 0.5rem;
      line-height: 1.3;
    }

    .product-price-simple {
      font-size: 1.8rem;
      font-weight: 900;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .card-options-row {
      display: flex;
      gap: 1rem;
      margin-top: 0.75rem;
      align-items: center;
      flex-wrap: wrap;
    }

    .card-color-selector {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .card-color-dot {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid var(--card-border);
      cursor: pointer;
      transition: all 0.2s;
      padding: 0;
      /* Background color set inline via style attribute */
    }

    .card-color-dot:hover {
      transform: scale(1.15);
      border-color: #667eea;
    }

    .card-color-dot.active {
      border-color: #667eea;
      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
      transform: scale(1.2);
    }

    .card-size-buttons {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .card-size-btn {
      position: relative;
      padding: 0.5rem 0.875rem;
      border: 2px solid var(--card-border);
      border-radius: 8px;
      background: var(--card-bg);
      color: var(--text-primary);
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      min-width: 48px;
      text-align: center;
    }

    .card-size-btn:hover:not(:disabled) {
      border-color: #667eea;
      background: rgba(102, 126, 234, 0.05);
      transform: translateY(-1px);
    }

    .card-size-btn.selected,
    .card-size-btn.active {
      border-color: #667eea;
      background: rgba(102, 126, 234, 0.15);
      color: #667eea;
      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
    }

    .card-size-btn.out-of-stock {
      opacity: 0.4;
      cursor: not-allowed;
      position: relative;
      text-decoration: line-through;
    }

    .card-size-btn.out-of-stock:hover {
      transform: none;
      border-color: var(--card-border);
      background: var(--card-bg);
    }

    .out-of-stock-label {
      position: absolute;
      top: -8px;
      right: -6px;
      background: #ef4444;
      color: white;
      font-size: 0.65rem;
      font-weight: 700;
      padding: 2px 4px;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      text-decoration: none;
    }

    .card-add-to-cart-btn {
      width: 100%;
      padding: 0.875rem 1.5rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 12px;
      font-weight: 700;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s;
      margin-top: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .card-add-to-cart-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    }

    .card-add-to-cart-btn:active {
      transform: translateY(0);
    }

    .card-option-group {
      margin-top: 0.75rem;
    }

    .card-option-label {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0.5rem;
      display: block;
    }

    .product-card {
      cursor: pointer;
    }

    /* Product Modal */
    #productModal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 3000;
      display: none;
    }

    #productModal.active {
      display: block;
    }

    .modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      animation: fadeIn 0.3s ease;
    }

    .modal-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--card-bg);
      border-radius: 24px;
      width: 90%;
      max-width: 1100px;
      max-height: 85vh;
      overflow-y: auto;
      animation: slideUp 0.3s ease;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }

    .modal-close-btn {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: all 0.2s;
    }

    .modal-close-btn:hover {
      background: rgba(0, 0, 0, 0.8);
      transform: scale(1.1);
    }

    .modal-single-column {
      padding: 2.5rem;
      max-height: 85vh;
      overflow-y: auto;
      max-width: 650px;
      margin: 0 auto;
    }

    /* Modal Header Section - Product info at top */
    .modal-header-section {
      margin-bottom: 2rem;
    }

    .modal-options-row {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
      margin-top: 1.5rem;
    }

    .modal-carousel {
      width: 100%;
      aspect-ratio: 1;
      background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 1rem;
      position: relative;
    }

    .modal-carousel img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: zoom-in;
      transition: transform 0.2s;
    }

    .modal-carousel img:hover {
      transform: scale(1.02);
    }

    .modal-carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.7);
      color: white;
      border: none;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      z-index: 10;
    }

    .modal-carousel-btn:hover {
      background: rgba(0, 0, 0, 0.9);
      transform: translateY(-50%) scale(1.1);
    }

    .modal-carousel-prev {
      left: 15px;
    }

    .modal-carousel-next {
      right: 15px;
    }

    .modal-thumbnails {
      display: flex;
      gap: 0.75rem;
      overflow-x: auto;
      padding-bottom: 0.5rem;
    }

    .modal-thumbnails::-webkit-scrollbar {
      height: 6px;
    }

    .modal-thumbnails::-webkit-scrollbar-track {
      background: var(--card-border);
      border-radius: 3px;
    }

    .modal-thumbnails::-webkit-scrollbar-thumb {
      background: #667eea;
      border-radius: 3px;
    }

    .modal-thumbnail {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      object-fit: cover;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .modal-thumbnail:hover {
      border-color: #667eea;
      transform: scale(1.05);
    }

    .modal-thumbnail.active {
      border-color: #667eea;
      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
    }

    .modal-title {
      font-family: "Orbitron", system-ui, sans-serif;
      font-size: 1.75rem;
      font-weight: 900;
      color: var(--text-heading);
      margin-bottom: 0.5rem;
      line-height: 1.2;
    }

    .modal-price {
      font-size: 1.5rem;
      font-weight: 900;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 0;
    }

    /* Description section below the grid */
    .modal-description-section {
      padding: 2rem 2.5rem;
      border-top: 1px solid var(--card-border);
    }

    .modal-description-title {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: 1rem;
    }

    .modal-description {
      color: var(--text-secondary);
      line-height: 1.8;
      font-size: 1.05rem;
      white-space: pre-wrap;
    }

    .modal-option-group {
      flex: 1;
      min-width: 200px;
    }

    .modal-option-label {
      display: block;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .modal-color-options,
    .modal-size-options {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .modal-color-btn,
    .modal-size-btn {
      padding: 0.75rem 1.5rem;
      border: 2px solid var(--card-border);
      background: var(--card-bg);
      color: var(--text-primary);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s;
      font-weight: 600;
      font-size: 0.95rem;
    }

    .modal-color-btn:hover,
    .modal-size-btn:hover {
      border-color: #667eea;
      background: rgba(102, 126, 234, 0.1);
      transform: translateY(-2px);
    }

    .modal-color-btn.selected,
    .modal-size-btn.selected {
      border-color: #667eea;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .modal-add-to-cart {
      width: 100%;
      padding: 1.25rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 12px;
      font-weight: 700;
      font-size: 1.15rem;
      cursor: pointer;
      transition: all 0.3s;
      margin-top: 1.5rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
    }

    .modal-add-to-cart:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
    }

    .modal-add-to-cart:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    .modal-color-dot {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 3px solid var(--card-border);
      cursor: pointer;
      transition: all 0.2s;
      padding: 0;
    }

    .modal-color-dot:hover {
      transform: scale(1.15);
      border-color: #667eea;
    }

    .modal-color-dot.selected {
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
      transform: scale(1.2);
    }

    .modal-description-full {
      padding-top: 1.5rem;
      border-top: 1px solid var(--card-border);
    }

    .modal-description-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: 0.75rem;
    }

    .modal-description-text {
      color: var(--text-secondary);
      line-height: 1.7;
      font-size: 0.95rem;
    }

    .modal-description-text p {
      margin-bottom: 1rem;
    }

    .modal-description-text p:last-child {
      margin-bottom: 0;
    }

    .modal-description-text ul {
      margin: 0.75rem 0;
      padding-left: 1.5rem;
      list-style-type: disc;
    }

    .modal-description-text li {
      margin-bottom: 0.5rem;
      line-height: 1.6;
    }

    .modal-description-text li:last-child {
      margin-bottom: 0;
    }

    .modal-description-text h4 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
    }

    .modal-description-text h4:first-child {
      margin-top: 0;
    }

    /* Animations */
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translate(-50%, -45%);
      }
      to {
        opacity: 1;
        transform: translate(-50%, -50%);
      }
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
      .store-hero {
        margin-top: 60px;
        padding: 3rem 1.5rem;
      }

      .store-hero h1 {
        font-size: 2.2rem;
      }

      .store-hero .tagline {
        font-size: 1.1rem;
      }

      .cart-indicator {
        top: 90px;
        right: 1rem;
        padding: 0.75rem 1rem;
      }

      .cart-sidebar {
        width: 100%;
        right: -100%;
      }

      .product-grid {
        grid-template-columns: 1fr;
      }

      .category-filter {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 0.5rem;
      }

      .modal-content {
        width: 95%;
        max-height: 90vh;
      }

      .modal-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.5rem;
      }

      .modal-image-section {
        position: relative;
      }

      .modal-title {
        font-size: 1.8rem;
      }

      .modal-price {
        font-size: 2rem;
      }
    }

    /* Image Zoom Modal */
    #imageZoomModal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 4000;
      display: none;
      background: rgba(0, 0, 0, 0.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    #imageZoomModal.active {
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeIn 0.2s ease;
    }

    .zoom-image-container {
      position: relative;
      max-width: 95vw;
      max-height: 95vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .zoom-image {
      max-width: 100%;
      max-height: 95vh;
      object-fit: contain;
      cursor: zoom-out;
      animation: zoomIn 0.3s ease;
    }

    .zoom-close-btn {
      position: fixed;
      top: 2rem;
      right: 2rem;
      background: rgba(255, 255, 255, 0.1);
      color: white;
      border: 2px solid rgba(255, 255, 255, 0.3);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: all 0.2s;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .zoom-close-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.5);
      transform: scale(1.1);
    }

    @keyframes zoomIn {
      from {
        opacity: 0;
        transform: scale(0.8);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* Loading State */
    .loading {
      text-align: center;
      padding: 4rem 2rem;
      color: var(--text-secondary);
    }

    .spinner {
      width: 50px;
      height: 50px;
      border: 4px solid var(--card-border);
      border-top-color: #667eea;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 1rem;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  </style>

  <!-- Google Analytics -->
  <script src="/assets/js/analytics-config.js" defer></script>
  <script src="/assets/js/analytics.js" defer></script>
</head>
<body>
  <!-- Shared header mount + loader -->
  <div id="header-mount"></div>
  <script defer src="/assets/js/header-loader.js?v=6"></script>

  <!-- No-JS header fallback -->
  <noscript>
    <nav style="background:#0a0a0a;border-bottom:1px solid #333;padding:.75rem 1rem">
      <a href="/" style="color:#8ab4ff;font-weight:900;margin-right:1rem">CYBERSMRT</a>
      <a href="/" style="color:#cbd5e1;margin-right:1rem">Home</a>
      <a href="/#programs" style="color:#cbd5e1;margin-right:1rem">Programs</a>
      <a href="/pages/blog/" style="color:#cbd5e1;margin-right:1rem">Blog</a>
      <a href="/pages/about/" style="color:#cbd5e1;margin-right:1rem">About</a>
      <a href="/pages/contact.html" style="color:#cbd5e1">Contact</a>
    </nav>
  </noscript>

  <!-- Shopping Cart Indicator -->
  <div class="cart-indicator" id="cartIndicator" onclick="openCart()">
    <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
    </svg>
    <span>Cart</span>
    <span class="cart-count" id="cartCount">0</span>
  </div>

  <!-- Cart Overlay -->
  <div class="cart-overlay" id="cartOverlay" onclick="closeCart()"></div>

  <!-- Cart Sidebar -->
  <aside class="cart-sidebar" id="cartSidebar">
    <div class="cart-header">
      <h2>Your Cart</h2>
      <div class="cart-header-actions">
        <button class="empty-cart-btn" onclick="Store.emptyCart()" title="Empty cart">
          <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
          </svg>
        </button>
        <button class="close-cart-btn" onclick="closeCart()" aria-label="Close cart">✕</button>
      </div>
    </div>

    <div class="cart-items" id="cartItems">
      <div class="cart-empty">
        <div class="cart-empty-icon">🛒</div>
        <h3>Your cart is empty</h3>
        <p>Add some awesome gear to support our mission!</p>
      </div>
    </div>

    <div class="cart-footer">
      <div class="cart-total">
        <span class="cart-total-label">Total:</span>
        <span class="cart-total-amount" id="cartTotal">$0.00</span>
      </div>
      <button class="checkout-btn" id="checkoutBtn" onclick="proceedToCheckout()" disabled>
        Proceed to Checkout
      </button>
    </div>
  </aside>

  <!-- Hero Section -->
  <section class="store-hero">
    <div class="hero-content">
      <span class="store-badge">OFFICIAL STORE</span>
      <h1>CyberSmrt Store</h1>
      <p class="tagline">Wear the mission. Support the cause. Every purchase funds cybersecurity education for underserved communities.</p>
    </div>
  </section>

  <!-- Impact Message -->
  <section class="content-section">
    <div class="impact-callout">
      <h3>🎯 Your Purchase Makes an Impact</h3>
      <p>
        100% of profits from store sales go directly to our K-12 cybersecurity programs,
        free student resources, and sliding-scale security services for nonprofits. When you wear
        CyberSmrt, you're not just showing support—you're actively funding the next generation of cybersecurity professionals.
      </p>
    </div>
  </section>

  <!-- Products Section -->
  <section class="content-section">
    <div class="section-header">
      <h2>Shop Our Collection</h2>
      <p class="section-intro">
        High-quality apparel and accessories featuring our mission-driven designs
      </p>
    </div>

    <!-- Category Filter -->
    <div class="category-filter" id="categoryFilter">
      <!-- Category buttons will be dynamically generated -->
    </div>

    <!-- Product Grid -->
    <div class="product-grid" id="productGrid">
      <div class="loading">
        <div class="spinner"></div>
        <p>Loading products...</p>
      </div>
    </div>
  </section>

  <div id="top"></div>

  <!-- Product Modal Container -->
  <div id="productModal"></div>

  <!-- Image Zoom Modal -->
  <div id="imageZoomModal" onclick="closeImageZoom()">
    <button class="zoom-close-btn" onclick="closeImageZoom()" aria-label="Close zoom">✕</button>
    <div class="zoom-image-container">
      <img id="zoomImage" class="zoom-image" src="" alt="Zoomed product image" onclick="event.stopPropagation()">
    </div>
  </div>

  <!-- Shared footer mount + loader -->
  <div id="footer-mount"></div>
  <script defer src="/assets/js/footer-loader.js"></script>
  <script defer src="/assets/js/footer-init.js"></script>

  <!-- Store JavaScript -->
  <script src="/assets/js/store.js?v=6" defer></script>
</body>
</html>
