:root { --accent: #c49a2f; --text:#0f172a; --muted:#6b7280; }
    body { background: linear-gradient(160deg,#fdfaf4,#f6efe0); font-family: "Cairo",sans-serif; color:var(--text); }
    .hero {
      position: relative;
      background: linear-gradient(135deg, rgba(196, 154, 47, 0.12), rgba(255, 255, 255, 0.92));
      border: 1px solid rgba(0, 0, 0, 0.05);
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
      border-radius: 20px;
      padding: 22px 20px;
      margin: 22px auto 12px;
      max-width: 960px;
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--text);
    }
    .brand-head { display: flex; align-items: center; gap: 10px; }
    .logo { width: 140px; height: auto; border-radius: 14px; object-fit: contain; background: rgba(255,255,255,.7); padding: 6px 10px; border: 1px solid rgba(0,0,0,.05); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
    .wrap { width: 100%; max-width: none; margin: 20px 0; background:#fff; border-radius:18px; padding:18px; box-shadow:0 18px 32px rgba(15,23,42,.12); }
    .badge-pill {
      background:#fff7e3;
      color:#7c5213;
      border:1px solid rgba(196,154,47,.25);
      border-radius:999px;
      padding:4px 10px;
      font-weight:700;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .qty-btn { width:32px; height:32px; border-radius:8px; border:1px solid rgba(0,0,0,.08); background:#fff; font-weight:800; }
    .note { border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:10px; width:100%; min-height:100px; }
    .whats-btn {
      background: linear-gradient(135deg, var(--accent), #e9c468);
      color: #0f172a;
      border: none;
      padding: 12px 14px;
      border-radius: 12px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 10px 18px rgba(196, 154, 47, 0.25);
      transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }
    .whats-btn:hover { transform: translateY(-1px); opacity: .95; }
    .empty { display:none; text-align:center; color:var(--muted); padding:40px 0; }
    .user-card { border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:12px; background:#fff7e3; box-shadow:0 10px 18px rgba(15,23,42,.06); }

    .btn {
      border-radius: 10px;
      font-weight: 700;
      transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
    }
    .btn:hover { transform: translateY(-1px); }

    .btn-primary,
    .btn-success,
    .btn-warning {
      color: #0f172a;
      border-color: transparent;
      background: linear-gradient(135deg, var(--accent), #e9c468);
      box-shadow: 0 10px 18px rgba(196, 154, 47, 0.25);
    }

    .btn-primary:hover,
    .btn-success:hover,
    .btn-warning:hover {
      color: #0f172a;
      border-color: transparent;
      background: linear-gradient(135deg, #d0a13a, #efcf7d);
    }

    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-dark {
      color: #7c5213;
      border-color: rgba(196, 154, 47, 0.45);
      background: #fff9ef;
    }

    .btn-outline-primary:hover,
    .btn-outline-secondary:hover,
    .btn-outline-dark:hover {
      color: #0f172a;
      border-color: transparent;
      background: linear-gradient(135deg, var(--accent), #e9c468);
    }
    #toast {
      position: fixed;
      inset: auto 50% 20px auto;
      transform: translateX(50%);
      background: #0f172a;
      color: #fff;
      padding: 10px 14px;
      border-radius: 12px;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      z-index: 9999;
      font-weight: 700;
    }
    #toast.show { opacity: 1; transform: translateX(50%) translateY(-6px); }
    #scroll-top {
      position: fixed;
      right: 16px;
      bottom: 16px;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(135deg, var(--accent), #e9c468);
      color: #0f172a;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
      display: grid;
      place-items: center;
      font-size: 18px;
      font-weight: 800;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
      z-index: 10000;
      transform: translateY(8px);
    }
    #scroll-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

    @media (max-width: 576px) {
      .summary-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      .summary-row .btn-stack {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .summary-row #total-label {
        width: 100%;
        text-align: center;
      }
      .summary-row #clear-cart,
      .summary-row #confirm {
        width: 100%;
        justify-content: center;
      }
    }

    .btn-close {
      display: none;
    }