:root {
      --primary: #0a0a0a;
      --accent: #d4a853;
      --accent-hover: #c49a3e;
      --light-bg: #fafafa;
      --white: #ffffff;
      --text-dark: #1a1a1a;
      --text-muted: #6b7280;
      --border-light: #e5e7eb;
      --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.06);
      --card-shadow-hover: 0 1px 3px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.12);
      --radius-sm: 10px;
      --radius-md: 14px;
      --radius-lg: 20px;
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background-color: var(--light-bg);
      color: var(--text-dark);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* ========== TOP BAR ========== */
    .top-bar {
      background: var(--primary); color: #ffffff; font-size: 0.78rem;
      padding: 8px 0; letter-spacing: 0.3px; font-weight: 500;
    }
    .top-bar a { color: #ccc; text-decoration: none; transition: var(--transition); }
    .top-bar a:hover { color: var(--accent); }
    .top-bar .divider { color: #555; margin: 0 10px; }

    /* ========== HEADER ========== */
    .main-header {
      background: var(--white); padding: 14px 0; border-bottom: 1px solid var(--border-light);
      position: sticky; top: 0; z-index: 1030; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
    }
    .logo {
      font-size: 1.7rem; font-weight: 800; letter-spacing: -0.8px;
      color: var(--primary); text-decoration: none; display: flex; align-items: center; gap: 3px;
    }
    .logo .accent-dot { color: var(--accent); }
    .logo:hover { color: var(--primary); }
    .search-wrapper { position: relative; max-width: 480px; width: 100%; }
    .search-wrapper input {
      width: 100%; padding: 11px 44px 11px 18px; border: 2px solid var(--border-light);
      border-radius: 50px; font-size: 0.88rem; font-weight: 500; background: #f9fafb;
      transition: var(--transition); outline: none;
    }
    .search-wrapper input:focus { border-color: var(--accent); background: var(--white); box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.08); }
    .search-wrapper .search-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 1.05rem; pointer-events: none; }

    /* ========== LIVE SEARCH SUGGESTIONS ========== */
    .search-suggestions {
      position: absolute; top: calc(100% + 8px); left: 0; right: 0;
      background: var(--white); border: 1px solid var(--border-light);
      border-radius: var(--radius-md); box-shadow: var(--card-shadow-hover);
      max-height: 420px; overflow-y: auto; z-index: 1050;
      display: none;
    }
    .search-suggestions.show { display: block; }
    .search-suggest-loading, .search-suggest-empty {
      padding: 16px 18px; font-size: 0.85rem; color: var(--text-muted); text-align: center;
    }
    .search-suggest-item {
      display: flex; align-items: center; gap: 12px; padding: 10px 14px;
      text-decoration: none; color: inherit; border-bottom: 1px solid #f3f4f6;
      transition: var(--transition);
    }
    .search-suggest-item:last-of-type { border-bottom: none; }
    .search-suggest-item:hover, .search-suggest-item.active { background: #fafafa; }
    .search-suggest-img {
      width: 52px; height: 52px; flex-shrink: 0; border-radius: 8px;
      overflow: hidden; background: #f3f4f6; border: 1px solid var(--border-light);
    }
    .search-suggest-img img { width: 100%; height: 100%; object-fit: cover; }
    .search-suggest-body { flex: 1; min-width: 0; }
    .search-suggest-name { font-size: 0.88rem; font-weight: 600; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .search-suggest-desc { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
    .search-suggest-meta { font-size: 0.72rem; color: #9ca3af; margin-top: 3px; }
    .search-suggest-meta span + span { margin-left: 4px; }
    .search-suggest-price { font-size: 0.82rem; font-weight: 700; color: var(--accent-hover); white-space: nowrap; flex-shrink: 0; }
    .search-suggest-footer {
      display: block; width: 100%; padding: 11px 14px; border: none; border-top: 1px solid var(--border-light);
      background: #fafafa; font-size: 0.82rem; font-weight: 600; color: var(--text-dark);
      cursor: pointer; text-align: center; transition: var(--transition);
    }
    .search-suggest-footer:hover { background: #f3f4f6; color: var(--accent-hover); }

    .header-actions { display: flex; align-items: center; gap: 6px; }
    .icon-btn {
      position: relative; background: transparent; border: none; font-size: 1.35rem;
      color: #374151; padding: 8px; border-radius: 50%; transition: var(--transition);
      cursor: pointer; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    }
    .icon-btn:hover { background: #f3f4f6; color: var(--accent); }
    .icon-btn .badge-pill {
      position: absolute; top: 2px; right: 2px; background: #ef4444; color: white;
      font-size: 0.6rem; font-weight: 700; min-width: 17px; height: 17px;
      border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid white;
      transition: transform 0.3s ease;
    }
    .badge-pill.bump { animation: bump 0.3s ease; }
    @keyframes bump {
      0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); }
    }

    /* ========== CART SLIDE PANEL ========== */
    .cart-overlay {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.5); z-index: 1040; opacity: 0; visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .cart-overlay.active { opacity: 1; visibility: visible; }
    .cart-panel {
      position: fixed; top: 0; right: -450px; width: 420px; height: 100vh;
      background: #fff; z-index: 1050; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex; flex-direction: column; box-shadow: -5px 0 30px rgba(0,0,0,0.15);
    }
    .cart-panel.active { right: 0; }
    .cart-header {
      padding: 20px 24px; border-bottom: 1px solid var(--border-light);
      display: flex; justify-content: space-between; align-items: center;
    }
    .cart-header h5 { font-weight: 700; font-size: 1.1rem; margin: 0; }
    .cart-close {
      background: none; border: none; font-size: 1.3rem; cursor: pointer;
      color: #6b7280; transition: var(--transition); padding: 4px 8px; border-radius: 8px;
    }
    .cart-close:hover { background: #f3f4f6; color: #ef4444; }
    .cart-items { flex: 1; overflow-y: auto; padding: 16px 24px; }
    .cart-empty { text-align: center; padding: 60px 20px; color: #9ca3af; }
    .cart-empty i { font-size: 3rem; display: block; margin-bottom: 12px; }
    .cart-item {
      display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f3f4f6;
      align-items: center;
    }
    .cart-item-img {
      width: 70px; height: 70px; border-radius: var(--radius-sm); overflow: hidden;
      background: #f5f5f5; flex-shrink: 0;
    }
    .cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
    .cart-item-info { flex: 1; }
    .cart-item-info h6 { font-weight: 700; font-size: 0.85rem; margin-bottom: 2px; }
    .cart-item-info .item-meta { font-size: 0.75rem; color: #6b7280; }
    .cart-item-price { font-weight: 700; font-size: 0.9rem; color: var(--primary); }
    .cart-item-qty {
      display: flex; align-items: center; gap: 8px; margin-top: 4px;
    }
    .qty-btn {
      width: 26px; height: 26px; border-radius: 50%; border: 1px solid #d1d5db;
      background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
      font-size: 0.8rem; transition: var(--transition);
    }
    .qty-btn:hover { background: #f3f4f6; }
    .qty-num { font-weight: 600; font-size: 0.85rem; min-width: 20px; text-align: center; }
    .cart-item-remove {
      background: none; border: none; color: #ef4444; cursor: pointer; font-size: 1rem;
      padding: 4px; transition: var(--transition);
    }
    .cart-item-remove:hover { color: #dc2626; }
    .cart-footer {
      padding: 20px 24px; border-top: 1px solid var(--border-light);
    }
    .cart-total {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 14px; font-weight: 700; font-size: 1rem;
    }
    .cart-total .total-price { font-size: 1.2rem; color: var(--primary); }
    .btn-checkout {
      width: 100%; background: var(--accent); color: #000; font-weight: 700;
      padding: 13px; border-radius: 50px; border: none; cursor: pointer;
      transition: var(--transition); font-size: 0.9rem; letter-spacing: 0.3px;
    }
    .btn-checkout:hover { background: var(--accent-hover); box-shadow: 0 6px 20px rgba(212, 168, 83, 0.3); }

    /* ========== SPINNER ON BUTTON ========== */
    .btn-add {
      width: 100%; background: var(--primary); color: white; border: none; padding: 9px;
      border-radius: 50px; font-weight: 700; font-size: 0.78rem; cursor: pointer;
      transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 5px;
      letter-spacing: 0.2px; position: relative; overflow: hidden;
    }
    .btn-add:hover { background: #1f2937; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
    .btn-add.adding { pointer-events: none; opacity: 0.8; }
    .btn-add .spinner-border {
      width: 14px; height: 14px; border-width: 2px; display: none;
    }
    .btn-add.adding .spinner-border { display: inline-block; }
    .btn-add.adding .btn-text { display: none; }
    .btn-add .btn-text { display: inline; }

    /* ========== FOOTER ========== */
    .site-footer { background: #111111; color: #d1d5db; padding: 44px 0 20px; margin-top: 36px; }
    .site-footer h5 { color: #fff; font-weight: 700; margin-bottom: 14px; font-size: 0.9rem; letter-spacing: 0.3px; }
    .site-footer a { color: #9ca3af; text-decoration: none; font-size: 0.82rem; display: block; margin-bottom: 7px; transition: var(--transition); }
    .site-footer a:hover { color: var(--accent); }
    .footer-logo { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
    .footer-logo .accent-dot { color: var(--accent); }
    .newsletter-input { display: flex; gap: 7px; margin-top: 10px; }
    .newsletter-input input { flex: 1; padding: 9px 14px; border-radius: 50px; border: 1px solid #374151; background: #1f1f1f; color: #fff; outline: none; font-size: 0.82rem; }
    .newsletter-input button { background: var(--accent); border: none; color: #000; font-weight: 700; padding: 9px 18px; border-radius: 50px; cursor: pointer; transition: var(--transition); }
    .newsletter-input button:hover { background: #c99c3b; }