html, body { height: 100%; margin: 0; }
    * { font-family: 'Hanken Grotesk', sans-serif; }
    .font-display { font-family: 'Hanken Grotesk', sans-serif; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes slideIn {
      from { opacity: 0; transform: translateX(-20px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes bounceIn {
      0% { opacity: 0; transform: scale(0.8); }
      50% { transform: scale(1.05); }
      100% { opacity: 1; transform: scale(1); }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    .anim-fade-up { animation: fadeUp 0.5s ease forwards; }
    .anim-slide-in { animation: slideIn 0.4s ease forwards; }
    .anim-bounce-in { animation: bounceIn 0.5s ease forwards; }
    .anim-float { animation: float 3s ease-in-out infinite; }
    
    .card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .card-hover:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
    
    .gradient-bg {
      background: linear-gradient(135deg, #FF6B6B 0%, #FFE66D 25%, #4ECDC4 50%, #45B7D1 75%, #96CEB4 100%);
      background-size: 300% 300%;
      animation: gradientShift 8s ease infinite;
    }
    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    
    .nav-item { position: relative; }
    .nav-item::after {
      content: ''; position: absolute; bottom: -4px; left: 50%; width: 0; height: 3px;
      background: #FF6B6B; border-radius: 2px; transition: all 0.3s ease; transform: translateX(-50%);
    }
    .nav-item.active::after, .nav-item:hover::after { width: 80%; }
    
    .toast-msg {
      position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
      padding: 12px 24px; border-radius: 12px; color: white; font-weight: 600;
      z-index: 9999; animation: fadeUp 0.3s ease;
    }
    .toast-success { background: #4ECDC4; }
    .toast-error { background: #FF6B6B; }
    
    .kategori-tab { transition: all 0.3s ease; }
    .kategori-tab.active { background: #FF6B6B; color: white; transform: scale(1.05); }
    
    .modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100;
      display: flex; align-items: center; justify-content: center; padding: 16px;
    }

    input:focus, textarea:focus, select:focus {
      outline: none; border-color: #4ECDC4; box-shadow: 0 0 0 3px rgba(78,205,196,0.2);
    }

    .stok-badge { font-size: 11px; padding: 2px 8px; border-radius: 99px; font-weight: 700; }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #FFF5F5; }
    ::-webkit-scrollbar-thumb { background: #FFB8B8; border-radius: 3px; }

    /* ===== STAR RATING ===== */
    .star-btn { font-size: 30px; cursor: pointer; transition: transform 0.15s; color: #d1d5db; line-height: 1; display: inline-block; }
    .star-btn:hover, .star-btn.active { color: #FBBF24; transform: scale(1.2); }

    /* ===== PRINT STRUK ===== */
    @media print {
      body > *:not(#struk-print) { display: none !important; }
      #struk-print { display: block !important; position: fixed; top: 0; left: 0; width: 100%; background: white; padding: 20px; }
    }

    /* ===== PRODUCT DETAIL POPUP ===== */
    .modal-detail-inner {
      background: white; border-radius: 28px; width: 100%; max-width: 420px;
      max-height: 92vh; overflow-y: auto; position: relative;
    }
    .detail-img-wrap {
      width: 100%; aspect-ratio: 1/1; background: linear-gradient(135deg,#fff1eb,#fff8e7);
      display: flex; align-items: center; justify-content: center;
      border-radius: 28px 28px 0 0; overflow: hidden; position: relative;
    }
    .detail-img-wrap img { width:100%; height:100%; object-fit:cover; }
    .detail-close {
      position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
      background: rgba(255,255,255,0.92); border: none; border-radius: 50%;
      font-size: 18px; cursor: pointer; display: flex; align-items: center;
      justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      backdrop-filter: blur(4px); z-index: 10; transition: transform 0.2s;
    }
    .detail-close:hover { transform: scale(1.12); }

    /* ===== CART ===== */
    .cart-fab {
      position: fixed; bottom: 24px; right: 24px; z-index: 200;
      background: linear-gradient(135deg, #FF6B6B, #7C3AED);
      color: white; border: none; border-radius: 20px;
      padding: 14px 22px; font-weight: 700; font-size: 15px;
      display: flex; align-items: center; gap: 10px;
      box-shadow: 0 8px 24px rgba(255,107,107,0.45);
      cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    }
    .cart-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 32px rgba(255,107,107,0.55); }
    .cart-fab.hidden { display: none; }
    .cart-badge {
      background: white; color: #7C3AED; border-radius: 99px;
      font-size: 12px; font-weight: 800; padding: 2px 8px; min-width: 22px; text-align: center;
    }
    .qty-btn {
      width: 30px; height: 30px; border-radius: 50%; border: 2px solid #e5e7eb;
      background: white; font-size: 16px; font-weight: 700; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s; color: #374151;
    }
    .qty-btn:hover { background: #FF6B6B; border-color: #FF6B6B; color: white; }
    .add-cart-btn {
      width: 100%; margin-top: 8px; padding: 7px 0; border-radius: 12px;
      background: linear-gradient(135deg, #FF6B6B, #FF8E53);
      color: white; font-weight: 700; font-size: 13px; border: none;
      cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .add-cart-btn:hover { opacity: 0.88; transform: scale(1.03); }
    .add-cart-btn:disabled { background: #d1d5db; cursor: not-allowed; transform: none; }
    @keyframes cartPop { 0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)} }
    .cart-pop { animation: cartPop 0.3s ease; }
    .item-qty-badge {
      position: absolute; top: 8px; left: 8px;
      background: #EF4444; color: white;
      border-radius: 50%; width: 22px; height: 22px;
      font-size: 12px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.25);
      z-index: 10; pointer-events: none;
      animation: cartPop 0.3s ease;
    }

    /* ===== SKELETON LOADER ===== */
    @keyframes shimmer {
      0% { background-position: -400px 0; }
      100% { background-position: 400px 0; }
    }
    .skeleton {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 400px 100%;
      animation: shimmer 1.4s ease infinite;
      border-radius: 8px;
    }
    .skeleton-card {
      background: white; border-radius: 16px; overflow: hidden;
      border: 1px solid #fff1e6; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    .skeleton-img  { width: 100%; aspect-ratio: 1/1; }
    .skeleton-line { height: 14px; margin: 6px 0; }
    .skeleton-line.short { width: 60%; }
    .skeleton-line.medium { width: 80%; }

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

    /* ===== PRINT STRUK - improved ===== */
    @media print {
      body > *:not(#struk-print) { display: none !important; }
      #struk-print {
        display: block !important; position: fixed; top: 0; left: 0;
        width: 100%; background: white; padding: 20px;
        font-family: 'Courier New', Courier, monospace !important;
        font-size: 12pt !important; color: #000 !important;
      }
      #struk-print * { color: #000 !important; background: transparent !important; }
    }

    /* ===== SNAP LOADING OVERLAY ===== */
    #snap-loading-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.65);
      z-index: 9000; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 16px;
    }
    #snap-loading-overlay .snap-spinner {
      width: 52px; height: 52px; border: 5px solid rgba(255,255,255,0.25);
      border-top-color: white; border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }