body {
      background: #f9f7f0;
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      padding-top: 90px;
    }
    
    /* PWA Install Prompt Styles */
    .pwa-install-prompt {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: var(--ghana-gold);
      color: var(--ghana-dark-green);
      padding: 15px 20px;
      border-radius: 50px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
      z-index: 1000;
      display: none;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      animation: slideUp 0.3s ease;
    }
    
    .pwa-install-prompt.show {
      display: flex;
    }
    
    .pwa-install-prompt:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    }
    
    @keyframes slideUp {
      from {
        transform: translateY(100px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    .bg-ghana {
      background: linear-gradient(145deg, #0b4f2e 0%, #006b3c 100%);
    }
    .bg-ghana-accent {
      background: #ce1126;
    }
    .text-ghana-gold {
      color: #fcd116;
    }
    .btn-ghana {
      background: #fcd116;
      border: none;
      color: #0b4f2e;
      font-weight: 700;
      transition: all 0.25s ease;
    }
    .btn-ghana:hover {
      background: #ffe064;
      transform: translateY(-3px);
      box-shadow: 0 15px 25px -10px #ce112680;
      color: #003d28;
    }
    .btn-outline-ghana {
      border: 2px solid #ce1126;
      color: #ce1126;
      background: transparent;
      font-weight: 600;
    }
    .btn-outline-ghana:hover {
      background: #ce1126;
      color: white !important;
    }
    .card-ghana {
      border: none;
      border-radius: 2rem 1rem 2rem 1rem;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 20px 30px -12px #0b4f2e40;
      transition: all 0.3s;
      height: 100%;
    }
    .card-ghana:hover {
      transform: translateY(-6px);
      box-shadow: 0 30px 40px -14px #ce112670;
    }
    .product-card {
      border: none;
      border-radius: 2rem 1rem 2rem 1rem;
      background: white;
      box-shadow: 0 10px 25px -8px rgba(0,60,50,0.1);
      transition: 0.3s;
      height: 100%;
      padding: 1.5rem 1rem;
      text-align: center;
      position: relative;
    }
    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 30px -10px #ce112680;
    }
    .badge-ghana {
      background: #fcd11620;
      color: #0b4f2e;
      border-left: 5px solid #ce1126;
      font-weight: 600;
    }
    .feature-icon-gh {
      font-size: 2rem;
      color: #ce1126;
      background: #fcd11630;
      width: 75px;
      height: 75px;
      border-radius: 40% 60% 30% 70% / 50% 40% 60% 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .feature-icon-gh:hover {
      background: #ce1126;
      color: #fcd116;
    }
    .momo-badge {
      background: #2d2d2d;
      color: white;
      padding: 0.3rem 1rem;
      border-radius: 50px;
      font-size: 0.85rem;
    }
    .input-group-ghana .form-control {
      border-radius: 60px 0 0 60px;
      border: 2px solid #fcd116;
      border-right: none;
      padding: 0.8rem 1.5rem;
    }
    .input-group-ghana .btn {
      border-radius: 0 60px 60px 0;
      border: 2px solid #fcd116;
      border-left: none;
      background: #ce1126;
      color: white;
      font-weight: 700;
      padding: 0 2rem;
    }
    .input-group-ghana .btn:hover {
      background: #a50e1f;
    }
    .flag-strip {
      height: 6px;
      background: linear-gradient(90deg, #fcd116 33%, #ce1126 33%, #ce1126 66%, #006b3c 66%);
    }
    .price-tag {
      font-size: 1.4rem;
      font-weight: 700;
      color: #0b4f2e;
    }
    .old-price {
      font-size: 0.95rem;
      color: #999;
      text-decoration: line-through;
      margin-left: 6px;
    }
    .product-badge {
      background: #fcd11620;
      color: #0b4f2e;
      font-size: 0.75rem;
      font-weight: 600;
      border-radius: 30px;
      padding: 0.3rem 1rem;
    }
    .category-badge-pre {
      background: #ce1126;
      color: white;
      font-size: 0.8rem;
      padding: 0.3rem 1rem;
      border-radius: 50px;
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 10;
      box-shadow: 0 4px 10px rgba(206, 17, 38, 0.3);
    }
    .category-badge-avail {
      background: #0b4f2e;
      color: white;
      font-size: 0.8rem;
      padding: 0.3rem 1rem;
      border-radius: 50px;
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 10;
      box-shadow: 0 4px 10px rgba(11, 79, 46, 0.3);
    }
    .section-title {
      position: relative;
      display: inline-block;
      margin-bottom: 2rem;
    }
    .section-title:after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #fcd116, #ce1126, #006b3c);
      border-radius: 2px;
    }
    footer a {
      color: #fcd116;
      text-decoration: none;
      border-bottom: 1px dotted transparent;
    }
    footer a:hover {
      border-bottom-color: #fcd116;
      color: white;
    }
    
    .navbar.fixed-top {
      position: fixed;
      top: 6px;
      left: 0;
      right: 0;
      z-index: 1030;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      animation: slideDown 0.5s ease-in-out;
    }
    
    @keyframes slideDown {
      from { transform: translateY(-100%); }
      to { transform: translateY(0); }
    }
    
    html {
      scroll-behavior: smooth;
      scroll-padding-top: 100px;
    }
    
    .back-to-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      background: #ce1126;
      color: white;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      cursor: pointer;
      opacity: 0;
      transition: all 0.3s ease;
      z-index: 1000;
      border: 2px solid #fcd116;
    }
    
    .back-to-top.show { opacity: 1; }
    .back-to-top:hover {
      background: #0b4f2e;
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
    
    .cart-badge {
      position: relative;
      display: inline-block;
    }
    .cart-count {
      position: absolute;
      top: -8px;
      right: -8px;
      background: #ce1126;
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }